leaflet - 传单中的自定义图标不起作用

Question

当我有 geojson 数据源时，使用 Leaflet 文档中显示的自定义图标的标准方法对我不起作用。图层添加得很好，但使用的是默认标记图标。当我检查 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

查看 GeoJson 的 API here ，为 icon 创建 L.GeoJson 图层时没有这样的选项.我相信您可能正在寻找 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 });
        }
});