gpt4 book ai didi

javascript - Leaflet GeoJSON 点*在*多边形后面

转载 作者:行者123 更新时间:2023-11-29 15:31:08 25 4
gpt4 key购买 nike

我有两个传单 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com