地圖小冊子標記

我嘗試開發一個應用程序，以顯示單張地圖服務：地圖小冊子標記

是否有可能根據「屬性」 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

地圖小冊子標記

回答

相關問題