8

The standard method of using a custom icon as shown in the Leaflet docs isn't working for me when I have a geojson data source. the layer is added fine, but is using the default marker icon. There's no reference to my custom icon PNG when i examine the DOM. Here's my code:

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

I've tried several suggestions found on SO and elsewhere with no success. plus.png is located in /lib/images/ where the default icon is also found.

4

2 回答 2

17

在这里查看 GeoJson 的 API，在为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使用您指定的图标。

因此，要回答您的问题：创建图层的代码块应如下所示：

var points = L.geoJson(labels, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: crossIcon });
        }
});
于 2013-09-05T16:23:07.633 回答
0

您可以将其添加为标记，而不是将其添加为 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);
于 2014-02-10T12:40:09.547 回答