我的Leaflet Map中的pointTolayer问题

Question

我尝试在我的Leaflet Map中应用pointTolayer，但它仍然会抛出经典图标。代码中存在错误。

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

    var baseline_person = L.icon({
          iconUrl: 'baseline_person.png',
          iconSize: [18,18]
    });

    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data, {
         pointTolayer: function(feture, latlng){
                    return L.marker(latlng,{icon: baseline_person});
         }
   }).addTo(map);
});

Answer 1

你的L.geoJson应该是L.geoJSON和pointTolayer应该分别是pointToLayer。

然后将iconSize和iconAnchor定义为L.icon params

const customMarker = new L.icon({
  iconUrl: "marker.png",
  iconSize: [32, 32],
  iconAnchor: [10, 41],
});

axios
  .get(
    "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson"
  )
  .then(response => {
    L.geoJSON(response.data, {
      pointToLayer: (feature, latlng) => {
        return L.marker(latlng, { icon: customMarker });
      }
    }).addTo(map);
  });

Demo