пользовательский значок в листе не работает

Question

Стандартный метод использования пользовательского значка, как показано в документах «Листовка», не работает для меня, когда у меня есть источник данных geojson. слой добавляется отлично, но используется значок маркера по умолчанию. Когда я исследую DOM, нет ссылки на мой пользовательский значок PNG. Вот мой код:

var crossIcon = L.icon({ 
      iconUrl: 'plus.png', 
      shadowUrl: 'marker-shadow.png', 
      iconSize: [11, 11], 
      shadowSize: [11, 11], 
      iconAnchor: [6, 6], 
      shadowAnchor: [5, 5], 
      popupAnchor: [5, 5] 
    }); 


    var points = L.geoJson(labels, { 
      icon: crossIcon 
    }); 
    map.addLayer(points); 
    layerControl.addOverlay(points, 'Site Locations'); 

Я пробовал несколько предложений, найденных на SO и в других местах, без успеха. plus.png находится в/lib/images /, где также найден значок по умолчанию.

Answer 1

Глядя на API для GeoJson here, такой возможности нет при создании слоя L.GeoJson для icon. Я считаю, вы можете искать style option, для полилиний и полигонов, или pointToLayer для указания значков.

sample GeoJson page На веб-сайте Leaflet показан этот сценарий. Посмотрите на значок с бейсболистом.

Значок определяется следующим образом:

var baseballIcon = L.icon({ 
     iconUrl: 'baseball-marker.png', 
     iconSize: [32, 37], 
     iconAnchor: [16, 37], 
     popupAnchor: [0, -28] 
    }); 

Значок наносится на L.geoJson слоя через pointToLayer вариант, который определяет функцию; например:

var coorsLayer = L.geoJson(coorsField, { 
     pointToLayer: function (feature, latlng) { 
      return L.marker(latlng, {icon: baseballIcon}); 
     } 
    }) 

Эта функция будет вызываться для каждой точки GeoJSON. Функция вернет L.Marker, который использует указанный вами значок.

Таким образом, чтобы ответить на ваш вопрос: Ваш блок кода, который создает свой слой должен выглядеть следующим образом:

var points = L.geoJson(labels, { 
     pointToLayer: function (feature, latlng) { 
      return L.marker(latlng, {icon: crossIcon }); 
     } 
}); 

Answer 2

Вместо того, чтобы добавить его в качестве GeoJSON слоя вы можете добавить его в качестве маркера

var crossIcon = L.icon({ 
     iconUrl: 'plus.png', 
     shadowUrl: 'marker-shadow.png', 
     iconSize: [11, 11], 
     shadowSize: [11, 11], 
     iconAnchor: [6, 6], 
     shadowAnchor: [5, 5], 
     popupAnchor: [5, 5] 
}); 

     L.marker(icon:crossIcon);