我正在使用 Dennis Wilhelm 的 Leaflet Slider 来显示 Leaflet map 上数据的变化。
我正在尝试更改更改标记图标,但没有正确完成。那么,如何在使用 Leaflet Slider 显示随时间变化时更改标记图标?我必须在原始 SliderControl.js 中做哪些更改?
提前致谢!
下面是 Dennis Wilhelm 的 Leaflet Slider 代码的链接:
https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js
最佳答案
您可以创建新的图标类如下:
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'
})
现在您可以在 map 上标记图标,如下所示:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
可以引用这个document了解更多信息。
对于 slider 控件,您需要创建两个图像:
(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
关于javascript - 更改传单标记图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41590102/