Leaflet使PolyLine位于geoJson之上

Question

我需要在geoJson对象的顶部创建虚线，但此对象始终显示在顶部。

我试图将z-index参数设置为对象的css类和js代码中的参数，但它没有帮助。

当我手动拖动国家标签下方的行标签时，我也看到该行移到了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);

然后，您将获得所需的结果。