Leaflet在geoJson頂部創建多邊形

我需要在geoJson對象頂部創建虛線，但該對象始終出現在頂部。Leaflet在geoJson頂部創建多邊形

我試圖設置z-index參數既爲對象的css類，也作爲js代碼中的參數，但它沒有幫助。

我還看到，當我手動將行標記拖動到國家標記下方時，該行移動到geoJson的頂部，但我當然不希望在jQuery代碼中使用jquery（看起來像一個非常糟糕的決定）。

我使用此代碼創建地圖：

// 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/

來源

2017-05-31 user3601262

添加的順序他們對地圖很重要。如果您想將該行放在頂部，只需將其添加到geojson圖層之後的地圖即可。

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

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

然後，你得到你想要的結果。

來源

2017-05-31 18:03:43

謝謝，您對項目訂購的建議幫助我解決了這個問題。但是，我已經嘗試在發佈問題之前在腳本的末尾添加折線，並且它在本地機器上無法正常工作（現在我發現它在jsfiddle上工作正常，不知道什麼是不同的是，我使用相同的瀏覽器）。因此，爲了確保在geojson之後添加多段線，我在添加多段線之前添加了一點點超時（10毫秒），現在問題也爲我的本地機器解決了。 – user3601262

Leaflet在geoJson頂部創建多邊形

回答

相關問題