Изменить маркер на карте листовки с данными GeoJson - PullRequest
Новая
       15

Изменить маркер на карте листовки с данными GeoJson

0 голосов
/ 11 апреля 2019

Я создаю веб-карту с 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);
            }

РЕДАКТИРОВАТЬ:

Например, я хочу добавить маркер foolowing 

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 Ответ

2 голосов
/ 12 апреля 2019

Просто используйте функцию 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);
...