Question

在下面，我试图通过单击按钮将绿色圆圈带到前面。我怎样才能做到这一点？

<!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 sit amet，interdum est eu。一种告诉性调味品hendrerit enim，ligula fusce vitae，leo et fusce mauris lorem suscipit scelerisque。 Vel arcu，non vestibulum suspendisse non lectus magnis suspendisse，aliquam magna commodo。 Nascetur eleifend at faucibus faucibus，nulla fringilla，mauris ultrices posuere in

Answer 1

不确定为什么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

控制传单图标图层上的zindex

1 个答案: