javascript - 使用 Leaflet.MarkerCluster.LayerSupport 插件在 Leaflet 中显示 PopUp

Question

我正在使用Leaflet来显示GeoJson的数据，我添加了MarkerCluster插件，到目前为止一切顺利。

下一步是将集群分组，为此我使用插件 Leaflet.MarkerCluster.LayerSupport，https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport

这就是问题的根源，我尝试了以下操作，它向我显示了组以及 map 上的标记与markerCluster，但我没有在弹出窗口中看到信息。弹出窗口为空。在尝试对标记进行分组之前，如果弹出窗口中有信息。

/*
****************************************
Mapa Leaflet
****************************************
*/

// Se crea el mapa
var mymap = L.map('mapid', {
  center: [40.4167,-3.70325],
  zoom:6
});

// llamada a la API de Openstreetmap
var apiOpenstrertmap = {
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    options: {attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
  }

// Icono personalizado
var icon = L.divIcon({
  className: 'custom-div-icon',
  html: "<div class='marker-pin'></div><i class='material-icons'></i>",
  iconSize: [30, 42],
  iconAnchor: [15, 42]
});

var renderMap = L.tileLayer(apiOpenstrertmap.url,apiOpenstrertmap.options);
renderMap.addTo(mymap);

/*
****************************************
Añade la información al popUp personalizado
****************************************
*/
function dataPopup(feature,layer){
  var outData = [];
  if (feature.properties){
    for(key in feature.properties){
      switch (key) {
        case 'movil':
        var movil = `<p class="tagDescription"><span class="tagKey">Móvil: </span>${feature.properties[key]}</p>`;
        break;
        case 'gps':
        var gps = `<a class="urlOsm" href="${feature.properties[key]}" rel="noopener noreferrer" target="_blank">Ir</a>`
        break;
    }
  }
  // Inserta los tags en el orden deseado
  outData.push(movil, gps)
  layer.bindPopup(outData.join(''));
  }
}


/*
****************************************
Carga la información del Geojson, y define MarkerCluster
****************************************
*/
// Variables para crear los layerGroup
var mcgLayerSupportGroup = L.markerClusterGroup.layerSupport(),
    group1 = L.layerGroup(),
    group2 = L.layerGroup(),
    group3 = L.layerGroup(),
    group4 = L.layerGroup(),
    control = L.control.layers(null, null, { collapsed: false }),
    marker;
// Agraga los grupos al mapa
mcgLayerSupportGroup.addTo(mymap);

// Llamada ajax para mostrar los datos del geojson en el mapa
var myLoader = document.getElementById('myLoaderContainer');
var xhr = new XMLHttpRequest();

xhr.open('GET', '../data/map/a.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status == 200){
    var geojsonAjax = L.geoJSON(xhr.response, {
      onEachFeature:dataPopup,
      // Añade el icon personalizado
      pointToLayer: function (feature, latlng) {
        marker = L.marker(latlng, {icon:icon})
        if (feature.properties.provincia == 'a') {
          marker.addTo(group1)
        }else if(feature.properties.provincia == 'b'){
          marker.addTo(group3)
        }
        else {
          marker.addTo(group2)
        }
      }
    });

    mcgLayerSupportGroup.checkIn([group1, group2, group3]);

    control.addBaseLayer(group1, 'first quarter');
    control.addBaseLayer(group2, 'Second quarter');
    control.addBaseLayer(group3, 'Third quarter');

    control.addTo(mymap);

    group1.addTo(mymap);
    group2.addTo(mymap);
    group3.addTo(mymap);


    myLoader.style.display = "none";
  }else {
    alert("Error al cargar el mapa. Por favor inténtelo más tarde.")
    myLoader.style.display = "none";
  }


};
xhr.send();

Answer 1

欢迎来到SO!

您可能只需要在 pointToLayer 选项函数末尾返回您的标记。

否则，您的 dataPopup 函数/onEachFeature 选项将无法使用layer。