Leaflet.js - Create layers and add markers depending on geojson category data?

问题

I have a .js file with coordinates for internships:

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]}}
  ]
}];

I've found this bit of code allowing me to create layers depending on a property and here what my JS looks like:

$.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;

But now I have to create the markes assigned to these layers, how can I achieve that?

回答1:

Your markers are already assigned to each later. In your example, you create a layer (with all of its markers) and immediately add it to the map using .addTo(map); Here's the code responsible for it.

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

Now, you probably want to only display a certain layer based on user input. If so, I suggest adding the related layer to the map on a click event. Then when the event is triggered a layer is added. Here's the code for doing that. sécurité.addTo(map)
A layer is removed using map.removeLayer(sécurité);

Below is a working example based on your initial code. (I did write it in jQuery as my vanilla JavaScript could be better) You can also view it on jsFiddle here.

I left some comments in the code to explain what each part does. I hope that helps you with your understanding.

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>

UPDATE: updated leaflet.js to version 1.3.3. The difference with the update is that each layer needs to be initialised using the new key word. Code is updated to reflect the change.

来源：https://stackoverflow.com/questions/51786003/leaflet-js-create-layers-and-add-markers-depending-on-geojson-category-data

标签

javascript

leaflet

geojson

layer