8

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/ にあります。

4

2 に答える 2

17

ここでGeoJson の API を見ると、L.GeoJson レイヤーを作成するときにそのようなオプションはありませんicon。スタイル オプション、ポリラインとポリゴン、またはアイコンを指定するためのpointToLayerオプションを探していると思います。

Leaflet の Web サイトのサンプル 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 に答える