[英]change leaflet marker icon
我正在使用 Dennis Wilhelm 的 Leaflet Slider 來顯示 Leaflet Z1D78DC8ED512144014 上的數據變化
我正在嘗試更改更改標記圖標但不正確。 那么,當使用 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'
})
現在您可以在地圖中標記的圖標上方,如下所示:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
您可以參考此文檔以獲取更多信息。
對於滑塊控件,您需要創建兩個圖像:
(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
這將是原始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;
}
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);
如果有人想知道如何使用 vue2-leaflet 在 Typescript 中做到這一點,下面是一個示例代碼。 您甚至可以在 l-marker 上使用 v-for 一次性繪制多個標記:
// inside template
<l-marker :lat-lng="position"
:icon="defaultIcon" :key="index">
<l-icon
:icon-size=[20,40]
:popupAnchor= [0,0]
:iconUrl= "'assets/logo.png'"
:shadowUrl= "'assets/logo.png'" >
<v-icon medium >
mdi-target
</v-icon>
</l-icon>
</l-marker>
// default icon in script
defaultIcon = L.icon({
iconUrl: "https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png",
shadowUrl: require('../static/marker.png'),
iconSize: [20, 30],
iconAnchor: [18, 18],
popupAnchor: [0, -10],
shadowSize: [0, 0],
shadowAnchor: [10, 10]
});
我們可以簡單地使用一個 Unicode 字符作為圖標,並傳入一個 CSS class 名稱來進一步改進它。 在瀏覽器之間呈現不同的圖標很少。
L.marker([45, 5], {icon: L.divIcon({className: 'poi', html: '<b>🚰</b>'})}).addTo(map);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.