传单GeoJSON指向*多边形背后* [英] Leaflet GeoJSON points *behind* polygon
问题描述
我有两个传单geojson图层-它们都具有Point和Polygon功能.我希望能够在地图上对其进行排序，但是今天当我这样做时(尝试通过按一定顺序添加它们，使用BringToBack/bringToFront等对它们进行排序)，来自两层的点"图标都位于所有图层的顶部多边形.
I have two leaflet geojson layers - they both have Point and Polygon features. I would like to be able to order them on the map, but when I do that today (attempting to order them by adding them in a certain order, using bringToBack/bringToFront, etc) the Point icons from both layers sit on top of all polygons.
(根据我的有限经验)，原因似乎是它们绘制在地图上完全不同的窗格上.
The reason (from my limited experience) appears to be that they're drawn on a completely different pane in the map.
我非常想将图层中的点与该图层中的多边形绘制在同一窗格上，所以当我对所有图层进行排序时，下方"图层的点都位于该图层上的多边形下方层位于顶部".
I'd very much like to have the points from a layer drawn on the same pane as the polygons from that layer, so when I order all of the layers, the points for the layer "below" are underneath the polygons on the layer "on top".
是否有一种简单/显而易见的方法来实现我所错过的功能，或者今天这不可能吗?
Is there an easy/obvious way to do this that I've missed, or is this impossible today?
非常感谢！
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);
推荐答案
使用该插件中的Leaflet(0.7.3)版本，您无法轻松完成所需的工作.
You can't easily do what you want to with the version of Leaflet (0.7.3) in that plunker.
在Leaflet 1.0(当前为Beta版)中，您可以创建自定义窗格，设置其z-index并更好地控制地图上标记，图层和所有元素的绘制顺序.
in Leaflet 1.0 (currently in Beta) you can create custom panes, set their z-index and have finer control over the drawing order of markers, layers and all elements on your map.
有关更多信息，请参见Leaflet 1.0文档的这一部分
See this section of the Leaflet 1.0 documentation for more information
https://mourner.github.io/Leaflet/reference.html#地图窗格
您可以创建两个自定义窗格，一个在覆盖窗格下方(默认z索引为4)的z索引，一个在其上方的z索引的自定义窗格.
You could create two custom panes one with a z-index below the overlay pane (which has a default z-index of 4) and one with a z-index above it.
然后，您可以根据将图标添加到哪个窗格中来选择图标的显示位置.
Then you have your choice of where the icons show up based on which pane you add them to.
因此，您的两层选项将如下所示:
So the options for your two layers will look something like this
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);
}
};
以这种格式为窗格提供了一个自动生成的类
The panes are given an autogenerated class in this format
传单窗格名称
因此，您希望CSS具有以下特征:
so you'll want css with something like:
.leaflet-activePane{z-index:10;}
.leaflet-inactivePane{z-index:3}
根据上面的文档链接，由于3在图块窗格上方但在覆盖窗格下方.
since 3 is above the tile pane but below the overlay pane according to the documentation link above.
这篇关于传单GeoJSON指向*多边形背后*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
