改变传单标记图标

Question

我使用Dennis Wilhelm的Leaflet Slider来显示Leaflet地图上的数据变化.

我正在尝试更改标记图标的更改,但没有正确.那么,当使用Leaflet Slider显示随时间的变化时,如何更改标记图标？我必须在原始的SliderControl.js中做些什么改变？

提前致谢!

以下是Dennis Wilhelm的Leaflet Slider代码的链接:

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

Answer 1

您可以创建新的图标类,如下所示:

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

您可以参考此文档以获取更多信息.

对于slidercontrol,您需要创建两个图像:

(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

Answer 2

这将是原始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;
    }

Answer 3

var century21icon = L.icon({
    iconUrl: 'https://i.ibb.co/sJrMTdz/favicon-32x32.png',
    iconSize: [20, 20]
    });
var maker = L.marker([25.045403,121.526088],{icon: century21icon}).addTo(map);

Answer 4

我们可以简单地使用 Unicode 字符作为图标，并传入 CSS 类名来进一步改进它。很少有图标可能在浏览器之间呈现不同的效果。

L.marker([45, 5], {icon: L.divIcon({className: 'poi', html: '<b></b>'})}).addTo(map);

https://leafletjs.com/reference.html#icon