web-dev-qa-db-ja.com

リーフレットマーカーアイコンの変更

デニスウィルヘルムのLeaflet Sliderを使用して、リーフレットマップ上のデータの変更を表示しています。

マーカーアイコンの変更を変更しようとしていますが、正しくありません。だから、リーフレットスライダーを使用して経時変化を表示するときにマーカーアイコンを変更するにはどうすればよいですか？元のSliderControl.jsで何を変更する必要がありますか？

前もって感謝します！

以下は、デニスウィルヘルムのリーフレットスライダーコードへのリンクです。

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

javascriptjquerysliderleaflet
9
sowmyaa guptaa

これは、元のslidercontrol.jsファイルの正確な変更になります

   if (this._layer) {
        var index_temp = 0;
        this._layer.eachLayer(function (layer) {

             var greenIcon = L.icon({ //add this new icon
                iconUrl: i+'.png',
                shadowUrl: 'leaf-shadow.png',

                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            options.markers[index_temp] = layer;
            options.markers[index_temp].setIcon(greenIcon); //Here set the icon to indiviual markers

            ++index_temp;
        });
        options.maxValue = index_temp - 1;
        this.options = options;
    }
2
sowmyaa guptaa

以下のように新しいアイコンクラスを作成できます。

var LeafIcon = L.Icon.extend({
    options: {
       iconSize:     [38, 95],
       shadowSize:   [50, 64],
       iconAnchor:   [22, 94],
       shadowAnchor: [4, 62],
       popupAnchor:  [-3, -76]
    }
});

次に、以下のような新しいアイコンオブジェクトを作成します。

var greenIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

これで、マップ内のマーカーのアイコンの上に次のように表示できます。

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

詳細については、この document を参照してください。

スライダーコントロールの場合、2つの画像を作成する必要があります。

(1) Marker Icon [ Use name: marker-icon.png ]
(2) Marker Icon Shadow [ Use name: marker-shadow.png ]

その後、次のようにデフォルトの画像パスを指定できます。

L.Icon.Default.imagePath = "Url to the image folder"; // This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "http://leafletjs.com/examples/custom-icons";

したがって、アイコンURLは次のようになります。

Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png
16
Jainil