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

我有一个.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;

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

最佳答案

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

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

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

下面是一个基于您的初始代码的工作示例。 （我确实在jQuery中编写了它，因为我的原始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关键字进行初始化。代码已更新以反映更改。

关于javascript - Leaflet.js-根据geojson类别数据创建图层并添加标记？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51786003/