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,在创建L.GeoJson层时没有这样的选项icon.我相信您可能正在寻找样式选项,用于折线和多边形,或者用于指定图标的pointToLayer选项.

Leaflet网站上的示例GeoJson页面显示了这种情况.看看棒球运动员的图标.

图标以这种方式定义:

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使用您指定图标的函数.

所以,回答你的问题:创建你的Layer的代码块应如下所示:

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