リーフレットgeoJsonの上にPolyLineを作成

Question

geoJsonオブジェクトの上に破線を作成する必要がありますが、このオブジェクトは常に上に表示されます。

オブジェクトのcssクラスとjsコードのパラメータの両方にZ-インデックスパラメータを設定しようとしましたが、それは役に立ちません。

また、国のタグの下に手動で行のタグをドラッグすると、geoJsonの行に移動したことがわかりましたが、jqueryでjsコードでそれをしたくないのは確かです決定）。

私はこのコードを使用してマップを作成しています：

// Creating the map 
var map = L.map('map').setView([25, 10], 4); 

// Creating the polyline 
var pointA = new L.LatLng(-20, -20); 
var pointB = new L.LatLng(80, 77.70641); 
var pointList = [pointA, pointB]; 

var firstpolyline = new L.Polyline(pointList, { 
    smoothFactor: 1, 
    className: 'my_polyline' 
}); 
firstpolyline.addTo(map); 


// Creating the geojson object 
var geojson = {"type": "FeatureCollection","features": [{ "type": "Feature", "properties": { "NAME": "Custom country" }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.18,29.76],[8.79,31.65],[13.54,27.61],[8.53,21.86] ] ] } }]} 

var myCustomStyle = { 
    stroke: false, 
    fill: true, 
    fillColor: 'green', 
    fillOpacity: 1 
} 

L.geoJson(geojson, { 
    clickable: true, 
    style: myCustomStyle 
}).setZIndex(1).addTo(map); 

そして、いくつかのCSS：

.my_polyline { 
stroke: red; 
    fill: none; 
    stroke-dasharray: 10,10; 
    stroke-width: 2; 
} 

あなたはまた、jsfiddleに取り組ん例を見ることができます：https://jsfiddle.net/d7v4bhku/4/

Answer 1

追加オーダーマップの問題にそれらを。線を上にしたい場合は、geojsonの層の後にマップに追加するだけです。

L.geoJson(geojson, { 
    clickable: true, 
    style: myCustomStyle 
}).addTo(map); 

var firstpolyline = new L.Polyline(pointList, { 
    smoothFactor: 1, 
    className: 'my_polyline' 
}); 
firstpolyline.addTo(map); 

次に、希望する結果が得られます。