提问人:TonyT 提问时间:4/24/2018 更新时间:4/25/2018 访问量:2407
使用自定义标记更改传单默认标记
Change Leaflet Default Markers with Custom Markers
问:
我正在寻求有关如何将传单默认标记(蓝色标记)更改为海关标记的建议/帮助。我在 StackOverFlow 上搜索了一下,我找到了几种方法可以做到这一点,但我似乎无法使它们中的任何一种起作用。我得到的关闭,我能够在地图上添加一个新图标,但无法将默认图标更改为我的自定义图标。我正在使用传单杂食动物,因为我喜欢处理 csv 文件,所以这种方法非常适合我。此外,我是 D3 的忠实用户,我正在尝试学习新东西。下面是我正在使用的代码。但是,我的最终目标是将默认的蓝色标记替换为不同标记/图标的混合,就像我可以用 D3 实现的那样(图标文件类型,如 svg、png、jpg 或 gif 等)。我感谢任何帮助,并提前感谢您。
omnivore.csv('data/pointData5.csv')
.on('ready', function(layer) {
/*Couldn't get this to work*/
var tankIcon = L.icon({
iconUrl: 'graphic/tank.png',
iconSize: [50,40]
});
L.geoJson(layer,{
pointToLayer: function(feature,latlng){
return L.marker(latlng,{icon: ratIcon});
}
}).addTo(map);
/*Only place one icon on the map and changing all the default markers*/
var markers = new L.LayerGroup();
var myIcon = L.icon({
iconUrl: 'graphic/tank.png',
iconSize: [20, 20],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
marker = L.marker([50.505, 30.57], {icon: myIcon}).bindPopup("Hi there").addTo(markers);
map.addLayer(markers);
/*This code works perfect - providing me what I was hoping for*/
this.eachLayer(function(marker) {
marker.bindPopup(marker.toGeoJSON().properties.imageTitle + ', ' + "<br />" + marker.toGeoJSON().properties.discrip + ', ' + "<br /><a class='fancybox-thumb' rel='fancybox-button' rel='fancybox-thumb' data-fancybox-group='gallery' href='graphic/" + marker.toGeoJSON().properties.popup +"'><img src='graphic/" + marker.toGeoJSON().properties.popup + "' style='width:100%' /></a>");
});
})
.addTo(map);
答:
2赞
TonyT
4/25/2018
#1
我进行了更多的研究,找到了问题的答案,如何使用杂食者传单/Mapbox 将自定义标记添加到我的地图中。如果有人需要这样做,下面的脚本对我有用。
//set up a customized icon to use for the point data
var customIcon = L.icon({
iconUrl: 'graphic/tank.png',
iconSize: [18, 9], //size of the icon in pixels
iconAnchor: [9, 9], //point of the icon which will correspond to marker's
location (the center)
popupAnchor: [0, 0] //point from which the popup should open relative to
the iconAnchor
});
omnivore.csv('data/pointData5.csv')
.on('ready', function(layer) {
this.eachLayer(function(marker) {
//change the icons for each point on the map
marker.setIcon(customIcon);
//create popup with text and image - click image in popup, large
image displays in fancybox
var popupText =
marker.bindPopup(marker.toGeoJSON().properties.imageTitle +
', ' + "<br />" + marker.toGeoJSON().properties.discrip + ', ' + "<br
/><a class='fancybox-thumb' rel='fancybox-button' rel='fancybox-
thumb' data-fancybox-group='gallery' href='graphic/" +
marker.toGeoJSON().properties.popup +"'><img src='graphic/" +
marker.toGeoJSON().properties.popup + "' style='width:100%' /></a>");
});
}).addTo(map);
评论
marker.feature.properties
marker.toGeoJSON()