我有两个传单 geojson 层 - 它们都有点和多边形特征。我希望能够在地图上对它们进行排序，但是当我今天这样做时（尝试通过按特定顺序添加它们来排序它们，使用 BringToBack/bringToFront 等），两个图层中的点图标都位于所有图层的顶部多边形。
原因（根据我有限的经验）似乎是它们绘制在地图中完全不同的窗格上。
我非常希望将某个图层中的点与该图层中的多边形绘制在同一窗格上，因此当我订购所有图层时，“下面”图层的点位于该图层上的多边形下方“在上面”。
有没有一种我错过的简单/明显的方法可以做到这一点，或者今天这是不可能的？
非常感谢！
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);
