javascript - Leaflet.js - 根据 geojson 类别数据创建图层并添加标记？

Question

我有一个带有实习坐标的 .js 文件:

var internships = [{
  "features": [
    {"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","coordinates":[50.807149, 3.162994]}},
    {"type":"Feature","properties":{"category":"securité","Name":"blue"},"geometry":{"type":"Point","coordinates":[50.334421, 3.290146]}},
    {"type":"Feature","properties":{"category":"secretaria","Name":"red"},"geometry":{"type":"Point","coordinates":[50.744787, 2.256216]}}
  ]
}];

我发现这段代码允许我根据属性创建图层，这里是我的 JS 的样子:

$.getScript("CoordinatesPdC.js");

function mapLoad() {
  var sécuritéLayer = new L.LayerGroup();
  var secrétariatLayer = new L.LayerGroup();
  var entretientLayer = new L.LayerGroup();

  var map = L.map('map').setView([50.2910, 2.7775], 8);

  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);

  var marker = L.marker([50.2910, 2.7775]).addTo(map);

  var entretientLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "entretient");
    }
  }).addTo(map);

  var sécuritéLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "sécurité");
    }
  }).addTo(map);

  var secrétariatLayer = L.geoJson(internships, {
    filter: function (feature, layer) {
      return (feature.properties.category === "secrétariat");
    }
  }).addTo(map);

}

window.onload = mapLoad;

但现在我必须创建分配给这些层的标记，我该如何实现呢？

Answer 1

您的标记已分配给以后的每个标记。在您的示例中，您创建了一个层(及其所有标记)并立即使用 .addTo(map); 将其添加到 map 中 这是负责它的代码。

var sécurité = L.geoJson(internships, {
  filter: function (feature, layer) {
    return (feature.properties.category === "sécurité");
  }
}).addTo(map);

现在，您可能只想根据用户输入显示特定图层。如果是这样，我建议在点击事件中将相关图层添加到 map 中。然后当事件被触发时，一个层被添加。这是执行此操作的代码。 sécurité.addTo( map )
使用 map.removeLayer(sécurité);

删除图层

下面是一个基于您的初始代码的工作示例。 (我确实是用 jQuery 编写的，因为我的 vanilla JavaScript 可能会更好) 您也可以在 jsFiddle here 上查看它.

我在代码中留下了一些注释来解释每个部分的作用。希望对您的理解有所帮助。

var internships = [{
  "features": [{
      "type": "Feature",
      "properties": {
        "category": "entretient",
        "Name": "green"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [3.162994, 50.807149]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "category": "securité",
        "Name": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [3.290146, 50.334421]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "category": "secretaria",
        "Name": "red"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [2.256216, 50.744787]
      }
    }
  ]
}];

$(document).ready(function() {

  // Create an object to keep track of active layers and each layer with its markers
  const layers = {
    active: [],
    entretientLayer: new L.LayerGroup(),
    sécuritéLayer: new L.LayerGroup(),
    secrétariatLayer: new L.LayerGroup(),
  };

  // create the map
  var map = L.map('map').setView([50.8010, 3.1675], 6,5);

  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.entretientLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "entretient");
    }
  })

  layers.sécuritéLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "securité");
    }
  })

  layers.secrétariatLayer = L.geoJson(internships, {
    filter: function(feature, layer) {
      return (feature.properties.category === "secretaria");
    }
  })

  // 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);
    }
  });
});

#map {
  height: 140px;
  width: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet-src.js"></script>


<div class="button-group">
  <button name="entretientLayer">entretient</button>
  <button name="sécuritéLayer">sécurité</button>
  <button name="secrétariatLayer">secrétariat</button>
</div>
<p></p>
<div id="map"></div>

更新:将 leaflet.js 更新到版本 1.3.3。与更新的不同之处在于，每一层都需要使用 new 关键字进行初始化。代码已更新以反射(reflect)更改。