未使用.removeLayer()删除Mapbox JS标记
Mapbox JS markers not being removed using .removeLayer()
我有一个函数,它使用mapbox javascript库成功地将标记添加到地图中。但是,我希望函数在添加两个新标记之前清除地图上的所有标记,这样一次只显示两个标记。
我在这里查看了其他问题/答案,但到目前为止没有一个有效;标记只是不断地添加而不被移除。
var map = L.mapbox.map(...);
function updateMarkers(d) {
var featureLayer = L.mapbox.featureLayer();
map.removeLayer(featureLayer);
getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");
getCoordY = d.stn_t_c;
getCoordY = getCoordY.split(",");
featureLayer = L.marker([getCoordX[0],getCoordX[1]], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#66CD00'
})
}).addTo(map);
featureLayer += L.marker([getCoordY[0],getCoordY[1]], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#FF6666'
})
}).addTo(map);
}
提前感谢您的帮助。
"removeLayer"方法只是从地图实例中删除层并保持其完整,以便以后可以重新添加。您需要调用L.mapbox.FeatureLayer的clearLayers()
,它将从层中删除所有添加的功能:
featureLayer.clearLayers();
此外,您正在用L.Marker
:的实例覆盖包含层实例的引用featureLayer
featureLayer = L.marker(...);
在featureLayer
引用上使用+=
赋值运算符的下一个标记(现在包含对第一个标记的引用)将不起作用。它用于添加值,而不是对象实例:
featureLayer += L.marker(...);
有两种方法可以将单层(标记、多边形等)添加到featureLayer,可以使用featureLayer的addLayer
方法,也可以使用要添加的对象的addTo
方法:
featureLayer.addLayer(marker);
// or
marker.addTo(featureLayer);
你正在做的另一件奇怪的事情是添加坐标。您将字符串值拆分为一个数组:
getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");
现在(我假设)你有一个有两个值的数组,然后你分别使用它们,并再次创建一个数组:
L.marker([getCoordX[0],getCoordX[1]])
你可以跳过它,只做:
L.marker(getCoordX)
事实上是一样的。我已经清理了你的代码,但无法测试,所以如果我犯了一个徒手错误,请原谅:
var map = L.mapbox.map(...);
// Create empty layer
var featureLayer = L.mapbox.featureLayer().addTo(map);
function updateMarkers (d) {
// Clear layer
featureLayer.clearLayers();
// Splitting the value and adding it in one go
L.marker(d.stn_f_c.split(","), {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#66CD00'
})
}).addTo(featureLayer); // Add to the featureLayer
L.marker(d.stn_t_c.split(","), {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#FF6666'
})
}).addTo(featureLayer);
}
希望对有所帮助
相关文章:
- Mapbox JS,来自URL的GeoJSON featureCollection对象只添加了一个标记
- 在标记mapbox.js上添加自定义图标
- 在Mapbox.js中,如何在不同的地图样式之间切换
- 未使用.removeLayer()删除Mapbox JS标记
- leafleat-editable.js with mapbox.js
- 如何实现 Mapbox.js脱机缓存
- 从 Mapbox.js 使用“LoadURL()”时出现“跨源请求错误”
- mapbox.js 1.6.2-更改缩放级别的平铺集
- Mapbox.js API自动缩放为GeoJSON
- 如何使用mapbox.js绘制具有指定半径值的标记周围的圆圈
- 如何隐藏集群中的标记(Mapbox.js / leafmarkercluster)
- Mapbox.js -不能初始化map,除非它在全局作用域中可用
- Mapbox js地图没有瓷砖
- 我如何改变var map = L.mapbox.map点击(mapbox.js)
- 如何在按下按钮后重新定位mapbox js
- Mapbox JS -集群计数层异常
- 我如何添加自定义平铺集作为mapbox.js层
- Mapbox.js/传单如何在点击时获得MultiPolyon的属性
- Mapbox.js:添加CSV文件中的标记
- mapbox.js:使用本地瓦片创建支持离线的地图