使用 leaf.js 为标记分配 ID 并从集群中添加和删除

Question

我是传单和集群的新手，但我已经设法在带有 leaflet.js 地图和集群的地图上获得了一些自定义标记。

一切都很好，除了我似乎无法弄清楚如何删除标记，因为它似乎没有分配 ID 号或任何东西。我曾尝试使用这种东西来添加 ID 但没有得到任何结果，因此我没有尝试删除标记。

var user_id = '101';

 var marker[user_id] = L.marker(new L.LatLng(a[0], a[1]), {
 icon: client,
 title: title
 });

我有这种格式的数据:-

var addressPoints = [
[52.4134975, -1.5131260, "101", "YES"],
[52.4904975, -1.5151260, "102", "NO"],
[52.4734975, -1.5171260, "103", "BUSY"],
[52.4194975, -1.5181260, "104", "NO"],
[52.4264975, -1.5130460, "105", "YES"],
[52.4284975, -1.5191210, "106", "YES"],
[52.4014975, -1.5191949, "107", "BUSY"],
[52.4299975, -1.5110060, "108", "NO"]
]

我使用此代码遍历它们并使用自定义标记添加到地图中，效果很好，但如果我想删除或更改其中一个上的 CSS，我找不到它。

var map = L.mapbox.map('map')
      .setView([52.450439, -1.729660], 14)
      .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    var markers = new L.MarkerClusterGroup();



    for (var i = 0; i < addressPoints.length; i++) {
            var a = addressPoints[i];
            var online_status = a[3];
            var user_id = a[2];
            var imgts = a[2];
            var title = a[2];

// Add online users //  

    if  (online_status === "YES") {
    console.log('online');
                var client = L.divIcon({
                className: 'location-pin',          
                html: '<img id"operatorimg" src="img/'+imgts+'.jpg"><div class="pin online"><div class="pulse"></div>',
                iconSize: [30, 30],
                iconAnchor: [18, 30]
        });
        
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: client,
            title: title
        });
    
    }

        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers);

我试过在循环时分配某种 ID 但它没有？我采取了错误的方法吗？如果我没有正确提出这个问题，我将不胜感激和抱歉，我刚刚加入。

谢谢

Answer 1

传单标记是 classes，所以您可以尝试的一件事是将属性添加到 class 并通过属性找到标记。例如，如果您有一个标记并且该标记的数据包含一个名称，您可以向该标记添加一个 name 属性。然后，您需要循环遍历 markerClusterGroup 中的图层以找到要删除的标记。根据, L.markerClusterGroup extends Leaflet's layerGroup, so you can use the eachLayer method to iterate each layer in the group. Then, you can find the desired marker by the property you assigned earlier and use the removeFrom method将其从地图中删除。这是一个使用 Leaflet 的 layerGroup:

的例子

import L from 'leaflet';

var mymap = L.map('mapid').setView([51.505, -0.09], 12);

var tile = {
  base: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  attr: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
};
var tileLayer = L.tileLayer(tile.base, {
  attribution: tile.attr,
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1,
}).addTo(mymap);

// Create a group for the layers:
var markerLayer = L.layerGroup().addTo(mymap);

var pointsForMarker = [
  { name: 'Center Of London', lat: 51.5, lng: -0.09 },
  { name: 'Big Ben', lat: 51.5007, lng: -0.1246 },
  { name: 'Buckingham Palace', lat: 51.5014, lng: -0.1419 },
];

var originalMarkerStyles = `
  background-color: black;
  width: 3em;
  height: 3em;
  display: block;
  left: -1.5em;
  top: -1.5em;
  position: relative;
  border-radius: 3rem 3rem 0;
  transform: rotate(45deg);
  border: 1px solid #FFFFFF`;

var myIcon = L.divIcon({
  className: 'custom-icon',
  iconAnchor: [0, 24],
  labelAnchor: [-6, 0],
  popupAnchor: [0, -36],
  html: `<span style="${originalMarkerStyles}"></span>`,
});

// Add points to the map:
pointsForMarker.forEach((point) => {
  var marker = L.marker(point, { icon: myIcon }).addTo(markerLayer);
  marker.bindPopup(`NAME: ${point.name}`).openPopup();
  // Add a 'name' property to the marker class:
  marker.name = point.name;
});

var dismissBtn = document.querySelector('#dismissBtn');
dismissBtn.addEventListener('click', () => {
  // When button clicked, user prompted to enter name for marker to dismiss:
  var markerToDismiss = prompt(
    'Enter name of marker to dismiss:',
    'buckingham palace'
  );
  // Iterate through each layer (marker) in layerGroup:
  markerLayer.eachLayer((layer) => {
    if (markerToDismiss) {
      // If the name property on the marker matches the name entered in the prompt:
      if (
        layer.name.trim().toLowerCase() === markerToDismiss.trim().toLowerCase()
      ) {
        // Remove the marker:
        layer.removeFrom(markerLayer);
      }
    }
  });
});

// To change the style of a custom Icon:
var colorBtn = document.querySelector('#colorBtn');
colorBtn.addEventListener('click', () => {
  var markerToChange = prompt('Enter name to change marker color:', 'big ben');
  markerLayer.eachLayer((layer) => {
    if (markerToChange) {
      if (
        layer.name.trim().toLowerCase() === markerToChange.trim().toLowerCase()
      ) {
        var newStyle = `
          background-color: red;
          width: 5em;
          height: 5em;
          display: block;
          left: -1.5em;
          top: -1.5em;
          position: relative;
          border-radius: 3rem 3rem 0;
          transform: rotate(45deg);
          border: 1px solid #FFFFFF`;
        var newIcon = L.divIcon({
          className: 'custom-icon',
          iconAnchor: [0, 24],
          labelAnchor: [-6, 0],
          popupAnchor: [0, -36],
          html: `<span style="${newStyle}"></span>`,
        });
        // Use the L.marker.setIcon to set an icon with the style changes:
        layer.setIcon(newIcon);
      }
    }
  });
});

Here is a demo set up on StackBlitz for you to play with

Answer 2

感谢 jharris711 的上述代码，我这样实现了它并使用了自定义标记。

pointsForMarker.forEach((point) => {

            var client = L.divIcon({
                className: 'location-pin',          
                html: '<img id"operatorimg" src="img/'+point.name+'.jpg"><div class="pin"></div>',
                iconSize: [30, 30],
                iconAnchor: [18, 30]
        });
        var marker = L.marker ([point.lat, point.lng], {
            icon: client
        });
  markerLayer.addLayer(marker);
  marker.name = point.name;
  //alert(marker.name);
});

markerLayer.eachLayer((layer) => {
    // console.log(layer);
    
    var markerToDismiss = "LILLY";
    
    if (markerToDismiss) {
      // If the name property on the marker matches the name entered in the prompt:
      if (

        layer.name.trim().toLowerCase() === markerToDismiss.trim().toLowerCase()
      ) {
        // Remove the marker:
        layer.removeFrom(markerLayer);
      }
    }
  });

再次感谢

使用 leaf.js 为标记分配 ID 并从集群中添加和删除

Assigning ID to marker and adding and removing from cluster using leaf.js

javascript

google-maps-markers

leaflet.markercluster