使用GeoJson数据更改传单地图中的标记

时间:2019-04-11 11:26:45

标签: leaflet geojson

我使用Leaflet和GeoJSON构建了一个网络地图。我想更改标记,但是Leaflet网站的示例对我没有帮助,因为它用于本地文件。知道如何更改吗?

$.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson", function(data) { addDataToMap(data, map); });

function addDataToMap(data, map) {
                var dataLayer = L.geoJson(data, {
                    onEachFeature: function(feature, layer) {
                        var popupText = "Name: " + feature.properties.Name
                        + "<br>Location: " + feature.properties.place
                        + "<br><a href='" + feature.properties.url + "'>More info</a>";
                        layer.bindPopup(popupText); }
                });
                dataLayer.addTo(map);
            }

编辑:

为便于说明,我想添加以下标记

var MyIcon = L.icon({
    iconUrl: 'leaf-green.png',
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

,我想将{icon: greenIcon}添加到我的图层。 我必须添加这一行代码吗?

EDIT2:

我要更改此标记: enter image description here

1 个答案:

答案 0 :(得分:2)

只需使用pointToLayer函数

  var MyIcon = L.icon({
    iconUrl: 'leaf-green.png',
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

  L.geoJson(data  ,{
    pointToLayer: function(feature,latlng){
      return L.marker(latlng,{icon: MyIcon});
    }
  }).addTo(map);