使用自定义标记更改传单默认标记答案

【问题标题】：Change Leaflet Default Markers with Custom Markers使用自定义标记更改传单默认标记
【发布时间】：2018-04-23 20:09:38
【问题描述】：

我正在寻求有关如何将传单默认标记（蓝色标记）更改为海关标记的建议/帮助。我在 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);

【问题讨论】：

至于读取与您的 Leaflet Marker 关联的 GeoJSON 数据，您可以简单地使用 marker.feature.properties 而不是调用方法 marker.toGeoJSON()，后者在后台执行更多操作。

标签： javascript leaflet

【解决方案1】：

我进行了更多研究并找到了我的问题的答案，即如何使用杂食 Leaflet/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);

【讨论】：