javascript - 如何将 L.divIcon 移回 Leaflet Js 中的现有层？

Question

我使用 Leaflet Js 向图层添加了一个 L.divIcon 并尝试将该图层带回但标记仍然显示在所有现有图层的前面。我还尝试了 Bringfront 现有图层但标记仍在所有图层上，任何更改以将添加的标记移回 Leaflet Js 中的所有现有图层

代码如下:

  var LayerFeatureGroup = new L.FeatureGroup(); 
  var LabelCount = new L.FeatureGroup();
  map.addLayer(LayerFeatureGroup);
  map.addLayer(LabelCount);
  var LabelMarker = new L.Marker([centerPoint.geometry.coordinates[0], centerPoint.geometry.coordinates[1]], {
      icon: L.divIcon({
        className: 'roof-center-label',
        roofId: currentLayer._leaflet_id, 
        html: PanelNumber,
        iconAnchor: [0, 0],
        iconSize: null,
        popupAnchor: [0, 0]
      }),
    })
    LabelMarker.addTo(LabelCount);
    LabelCount.bringToBack();

Answer 1

在 Leaflet 中，标记图标(包括 DivIcon 的)默认放置在 markerPane 中。 pane ，位于图 block 层和矢量形状(多边形、折线等)之上。

如果你想将它们放在“垂直堆栈”中的不同位置，你可以使用自定义 Pane ，使用 map.createPane('myPane') ，并将其传递给 pane您的标记选项:

var map = L.map('map').setView([48.86, 2.35], 11);

var myPane = map.createPane('myPaneName');

myPane.style.zIndex = 300; // In between tilePane (200) and overlayPane (400)

L.marker([48.86, 2.35], {
  pane: myPane,
  icon: L.divIcon({
    className: 'myDivIcon',
    iconSize: [40, 40]
  })
}).addTo(map).bindPopup('Marker White');

L.marker([48.86, 2.37], {
  //pane: myPane, // Normal behaviour => markerPane.
  icon: L.divIcon({
    className: 'myDivIcon2',
    iconSize: [20, 20]
  })
}).addTo(map).bindPopup('Marker Red');

var circle = L.circle([48.86, 2.35], {
  radius: 3000
}).addTo(map).bindPopup('Circle');

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

L.control.layers(null, {
  Circle: circle
}, {
  collapsed: false
}).addTo(map);

.myDivIcon {
  background-color: white;
  border: 1px solid black;
}

.myDivIcon2 {
  background-color: red;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 200px"></div>