Question

我根据类别创建了多个图层，它们显示在地图上，但是现在我希望在其上绑定一个弹出窗口，显示一些属性，例如“ Nom de la structure”等。

这是我Json的伪代码

{
    "type": "Feature",
    "properties": {
        "Nom de la structure": "Stade Olympique Maritime Boulonnais",
        "Nom": "Monteuuis Pierre",
        "Adresse": "4 rue du Colonel de l'Esperance",
        "category": "CVGd",
        "Exemple 1": "Organisation d'un match de Basket ball",
        "Exemple 2": "Gestion des partenaires commerciaux",
        "Exemple 3": "Gestion de la communication",
    },
    "geometry": {
        "type": "Point",
        "coordinates": [1.5986012, 50.7202296]
    }

这是我的JS文件：

$.getScript("CoordinatesPdC.js");
$(document).ready(function() {

  // Create an object to keep track of active layers and each layer with its markers
  const layers = {
    active: [],
    APEnEvSa: new L.LayerGroup()
  };

  // create the map
  var map = L.map('map').setView([50.5703007,2.4328028], 9);

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
  }).addTo(map);

  // based on the category assign a marker to the layer
  layers.APEnEvSa = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "APEnEvSa");
    }
  }) //repeat for each category

  // register click event
  $('button').on('click', function(e) {
    const layerName = e.target.name;

    // if a layer is already active, remove it from the map and the active array

    if (layers.active.includes(layerName)) {
      layers.active = layers.active.filter(layer => layer !== layerName);
      map.removeLayer(layers[layerName]);
    } else {
      // add the layer to the map and to the active array
      layers.active.push(layerName);
      layers[layerName].addTo(map);
    }
  });
});

Answer 1

您可以使用.bindPopup方法将弹出窗口绑定到每个标记（通过每一层）。因此，每次生成新图层时，都要创建一个标记变量，并使用.bindPopup方法添加诸如“ Nom”，“ Adresse”等之类的内容。为了使其与您的示例相符，它可能看起来像这样：

layers.APEnEvSa = L.geoJson(internships, {
    filter: function(feature, layer, latlng) {
        var marker = L.marker(latlng);
        marker.bindPopup(feature.properties.Nom + feature.properties.Adresse);
        var category = feature.properties.category === "APEnEvSa";
        return [category, marker];
    }
});

我在调用过滤器的位置插入了“ latlng”，但是如果您已经获得了积分（听起来像您的描述中那样），则可以将其省略。在这里，您可以将弹出窗口绑定到标记，然后可以使用feature.properties.whatever将想要的任何信息添加到该标记。如果您想澄清信息，甚至可以在.bindPopup中添加纯HTML，例如：

marker.bindPopup('<p align=center>' + '<strong>Nom: </strong>' + feature.properties.Nom + '<strong>Adresse: </strong>' + feature.properties.Adresse);

您将自己返回每个图层的类别，因此您可能必须同时return an array类别图层和标记（除非注释中的某人知道更好的方法）。

Leaflet.js-将弹出窗口一次应用于多个图层

1 个答案: