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顶部创建多边形

回答

相关问题