地图小册子标记

我尝试开发一个应用程序，以显示单张地图服务：地图小册子标记

是否有可能根据“属性” 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é " }}, 这里是我的地图脚本：我想，当你点击一个按钮的顶部显示它对应的属性（用另一种颜色）只标记？谢谢大家的帮助SO MUCH）

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

来源

2017-06-16 r tremeaud

您可以使用层比如在你的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/

来源

2017-06-16 16:42:25 iH8

您可以使用圆圈标记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看一个例子。（请记住检查源代码）。

来源

2017-06-23 01:04:05 Camilo

地图小册子标记

回答

相关问题