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

Leaflet网站上的sample GeoJson page显示了这种情况。看看棒球运动员的图标。

图标以这种方式定义：

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);

Leaflet中的自定义图标无法正常工作

2 个答案: