[英]Leaflet how to combine icons and circle markers in the same layergroup
I have a bunch of coordinates to add onto a Leaflet map. 我有一堆坐标要添加到传单地图上。 Coordinates tagged with the value "home" will get a home-like svg icon and get stored in the
homeIcons
variable. 标有值“ home”的坐标将获得类似于home的svg图标,并存储在
homeIcons
变量中。 All other coordinates will get a circular marker and get stored in variable called circles
. 所有其他坐标将获得一个圆形标记,并存储在名为
circles
变量circles
。 My current approach only succeeds in turning circles
into a proper leaflet object but not the homeIcons
. 我当前的方法只能成功地将
circles
变成正确的传单对象,而不能成功地将homeIcons
。 So by the time I combine them into a layer group using L.layerGroup()
, objects from 'homeIcons' simply get dropped out. 因此,当我使用
L.layerGroup()
将它们组合成一个图层组时,来自'homeIcons'的对象就被丢弃了。 Please let me know if you see where the problem with my code is. 如果您看到我的代码的问题在哪里,请告诉我。 Thank you!
谢谢!
var circles = [];
var homeIcons = [];
var markerOptions = {
radius : 10,
fillColor : 'yellow',
color : 'null',
weight : 1,
opacity : 1,
fillOpacity : 0.8
};
var homeIcon = L.icon({
iconUrl: 'public/imgs/home_icon.svg',
iconSize : [30, 30],
iconAnchor : [8, 18],
popupAnchor : [0, -15],
});
var homeMarker = L.marker([null, null], {icon: homeIcon, opacity: 1});
for (var i=0; i<data.length; i++) {
var pois = JSON.parse(data[i].POIs);
for (var n=0; n<pois.length; n++) {
homeMarker = {latlng:[pois[n].lat, pois[n].lng], name: data[i].Name};
if (pois[n].poiTag == "home") {
homeIcons.push(L.marker(homeMarker));
} else {
circles.push(L.circleMarker([pois[n].lat, pois[n].lng], markerOptions, {name: data[i].Name}));
}
}
}
console.log(circles); // Outputs an array of leaflet objects
console.log(homeIcons); // Not outputing an array of objects with similar properties as leaflet objects
var allLayers = L.layerGroup(circles, homeIcons); // this is supposed to add both circles to homeIcons to the layergroup
console.log(allLayers); // By here, all the homeIcons have disappeared.
cb(allLayers);
}
Did you check if your "poiTag" excists/spelled correct? 您是否检查过您的“ poiTag”是否正确/拼写正确? could you provide example of the data
您能否提供数据示例
if (pois[n].poiTag == "home") {
homeIcons.push(L.marker(homeMarker));
} else {
circles.push(L.circleMarker([pois[n].lat, pois[n].lng], markerOptions, {name: data[i].Name}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.