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

EN

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

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>