地图传单标记答案

【问题标题】：Map leaflet markers地图传单标记
【发布时间】：2017-06-16 16:02:25
【问题描述】：

我尝试开发一个应用程序以在传单地图上显示服务：

是否可以根据“属性”geojson属性有不同的标记？

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 6.1200622,46.2106091 ] }, "properties": { "nom":"Cfffff Genève", "rue":"Route des F", "num":"11", "npa":1203, "localite":"Genève", "canton":"GE", "tel":"033 345 17 57", "url":"www.formation-cemea.ch", "domaine":"société " }}, 这是我的地图脚本：我希望当您单击顶部的按钮时，它仅显示与属性相对应的标记（使用另一种颜色）？非常感谢大家的帮助；）

  <div class="btn-group">
          <button type="button" id="allbus" class="btn btn-success">All</button>
          <button type="button" id="others" class="btn btn-primary">Sexualité</button>
          <button type="button" id="cafes" class="btn btn-danger">Mal-être</button>
          <button type="button" id="cafes" class="btn btn-secondary">Santé</button>
          <button type="button" id="cafes" class="btn btn-info">Drogues</button>
          <button type="button" class="btn btn-warning">Société</button>
          <button type="button" class="btn btn-outline-success">Internet</button>
      </div>


  <body>
    <div id="map"></div>

    <script type="text/javascript">

  var map = L.map('map');
  var terrainTiles = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });

  terrainTiles.addTo(map);
  map.setView([46.5160000, 6.6328200], 10);

  L.control.locate(location).addTo(map);

  L.easyButton( '<strong>BE</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map);

  L.easyButton( '<strong>FR</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map);
  L.easyButton( '<strong>GE</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map)

  L.easyButton( '<strong>JU</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map);
  L.easyButton( '<strong>NE</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map);

  L.easyButton( '<strong>VS</strong>',  function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12); 
  }).addTo(map);

  L.easyButton( '<strong>VD</strong>', function(){
    //zoomTo.setView([55, -2], 4);
    map.setView([46.95, 6.85], 12);
  }).addTo(map);


  function addDataToMap(data, map) {
      var dataLayer = L.geoJson(data, {
          onEachFeature: function(feature, layer) {
              var popupText = "<b>" + feature.properties.nom
                  + "<br>" 
                  + "<small>"  + feature.properties.localite 
                  + "<br>Rue: " + feature.properties.rue + + feature.properties.num
                  + "<br>Téléphone: " + feature.properties.tel
                  + "<br><a href= '" + feature.properties.url + "'>Internet</a>";
              layer.bindPopup(popupText); }
          });

      dataLayer.addTo(map);
  }

  $.getJSON("data.geojson", function(data) { addDataToMap(data, map); });



  </script>
  </body>
  </html>

【问题讨论】：

标签： javascript leaflet geojson

【解决方案1】：

您可以在onEachFeature 方法中使用图层实例，检查它是否是标记并设置它的图标：

new L.GeoJSON(null ,{
    onEachFeature: function (feature, layer) {
        if (layer instanceof L.Marker) {
            layer.setIcon(new L.Icon(...));
        }
    }
})

参考：http://leafletjs.com/reference-1.0.3.html#icon

示例：http://leafletjs.com/examples/custom-icons/

【讨论】：

【解决方案2】：

您可以使用圆形标记L.circleMarker 来根据feature.properties.[VALUE] 区分您的点。您也可以添加过滤器。例如，基于TotalImpct 属性：

munCustomLayer = L.geoJson(null, {
        onEachFeature: {SOME FUNCTION},

        filter: function (feature, layer) {
             return feature.properties.TotalImpct > 10000;
        },
        pointToLayer: function(feature, latlng) { //Style the layer based on TotalImpact
            if (feature.properties.TotalImpct < 50000){
                return new L.CircleMarker(latlng, {
                    radius: 5,
                    color: "#e0e0e0",
                    opacity: 0.95,
                    weight: 1.2,
                    dashArray: "2,3",
                    fillOpacity: 0.01,
                });    
            } 
(...)

您可以查看使用圆圈标记here 的示例。（记得查看源代码）。

【讨论】：