我有两个传单 geojson 层 - 它们都具有点和多边形特征。我希望能够在 map 上对它们进行排序，但是当我今天这样做时(尝试通过使用 bringToBack/bringToFront 等按特定顺序添加它们来进行排序)，两个图层的点图标都位于所有图层的顶部多边形。
原因(根据我有限的经验)似乎是它们绘制在 map 中完全不同的 Pane 上。
我非常希望将图层中的点绘制在与该图层中的多边形相同的 Pane 上，因此当我订购所有图层时，“下方”图层的点位于多边形下方“顶层”层。
是否有一种我错过的简单/明显的方法可以做到这一点，或者这在今天是不可能的？
非常感谢!
HTML:
<body>
<div id='map'></div>
<body>
JS:
var featColl1 = {
type : 'FeatureCollection',
features : [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-100, 48]
}
},
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}
]
};
var featColl2 = {
type : 'FeatureCollection',
features : [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [-103, 47]
}
},
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}
]
};
var layer1Opts = {
style : { color : 'red' },
pointToLayer : function(feat, latlng) {
var opts = {
icon : L.divIcon({ html : "1", iconSize: [15,15] })
};
return L.marker(latlng, opts);
}
};
var layer2Opts = {
pointToLayer : function(feat, latlng) {
var opts = {
icon : L.divIcon({ html : "2", iconSize: [15,15] })
};
return L.marker(latlng, opts);
}
};
var map = new L.map('map')
.setView([-103, 49], 5);
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg')
.addTo(map);
var layer1 = L.geoJson(featColl1, layer1Opts).addTo(map);
var layer2 = L.geoJson(featColl2, layer2Opts).addTo(map);
var bounds = new L.LatLngBounds();
bounds.extend(layer1.getBounds());
bounds.extend(layer2.getBounds());
map.fitBounds(bounds);
最佳答案
你不能轻易地用那个 plunker 中的 Leaflet (0.7.3) 版本做你想做的事。
在 Leaflet 1.0(目前处于 Beta 阶段)中，您可以创建自定义 Pane 、设置它们的 z-index 并更好地控制 map 上标记、图层和所有元素的绘制顺序。
有关详细信息，请参阅 Leaflet 1.0 文档的这一部分
https://mourner.github.io/Leaflet/reference.html#map-panes
您可以创建两个自定义 Pane ，一个在叠加 Pane 下方有一个 z-index(默认 z-index 为 4)，一个在其上方有一个 z-index。
然后，您可以根据将图标添加到哪个 Pane 来选择图标的显示位置。
所以你的两层的选项看起来像这样
var activePane = map.createPane("activePane"),
inactivePane = map.createPane("inactivePane");
var layer1Opts = {
style : { color : 'red' },
pointToLayer : function(feat, latlng) {
var opts = {
icon : L.divIcon({ html : "1", iconSize: [15,15], pane: "inactivePane" })
};
return L.marker(latlng, opts);
}
};
var layer2Opts = {
pointToLayer : function(feat, latlng) {
var opts = {
icon : L.divIcon({ html : "2", iconSize: [15,15], pane: "activePane" })
};
return L.marker(latlng, opts);
}
};
Pane 以这种格式被赋予一个自动生成的类
传单 Pane 名称
所以你会想要像这样的 css:
.leaflet-activePane{z-index:10;}
.leaflet-inactivePane{z-index:3}
因为根据上面的文档链接，3 在平铺 Pane 上方但在叠加 Pane 下方。
关于javascript - Leaflet GeoJSON 点*在*多边形后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34791059/