gpt4 book ai didi

leaflet - 控制传单图标图层上的 zindex

转载 作者:行者123 更新时间:2023-12-02 21:12:08 27 4
gpt4 key购买 nike

在下面,我尝试通过单击按钮将绿色圆圈置于前面。我怎样才能实现这个目标?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<button onclick="ccsdf()">Click me</button>
<div id="map" style="width: 100%; height: 90vh"></div>

<script>
var map;
var layer1;
var layer2;

function ccsdf() {
layer1.bringToFront();
}

$(document).ready(function(){
map = L.map('map').setView([0, 0], 14);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

layer1 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0.0005 ]}}]}, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Small_red_circle.png' }) });
}
}).addTo(map);

layer2 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0 ]}}]}, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e7/Blue_1.png' }) });
}
}).addTo(map);
});
</script>
</body>
</html>

有什么想法吗?

干杯

下面的文字是因为堆栈溢出让我写更多:-)

Lorem ipsum dolor sat amet,interdum est eu。 A Tellus condimentum hendrerit enim, ligula fusce vitae, leo et fusce mauris lorem suscipit scelerisque。 Vel arcu、非前庭悬置、非直门悬置、aliquam magna commodo。 Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in

最佳答案

不确定具体原因 featureGroup.bringToFront()似乎不适用于您的情况。它可能只适用于矢量形状,矢量形状确实有单独的 bringToFront() method同样,与标记相反。

无论如何,你可以简单地使用 layerGroup.eachLayer() method申请zIndexOffset每个标记(如果您的组有很多图层,您可能需要检查该图层是否为L.Marker)。您可以简单地使用marker.setZIndexOffset() method来实现这一目标。

function ccsdf() {
//layer1.bringToFront();
layer1.eachLayer(function (layer) {
layer.setZIndexOffset(1000);
});
}

Plunker 演示:http://plnkr.co/edit/lQLNiR5HwX4vT84vBLAC?p=preview

关于leaflet - 控制传单图标图层上的 zindex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37849030/

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