首先先说我目前的场景。我目前项目中:一个地图划分了很多区块,每个区块都是
Polygon
覆盖物,用来制作鼠标滑动高亮效果。同时点击项目其他地方某处,也会在覆盖物上显示一个小方块,这个小方块我也是使用Polygon
做的。
1. 项目痛点
我目前项目中:一个地图划分了很多区块,每个区块都是Polygon
覆盖物,用来制作鼠标滑动高亮效果。同时点击项目其他地方某处,也会在覆盖物上显示一个小方块,这个小方块我也是使用Polygon
做的。如下图:
高亮区域和白色方块区域都是覆盖物。
我重新添加白色方块覆盖物的时候会出现重复添加的问题。
这个时候使用Polygon
再添加的时候,会出现重复添加Polygon
, 即上一次操作的Polygon
也遗留在覆盖物上。
网上看了很多办法,有直接移除map.remove()
的。也有移除全部地图上的覆盖物map.clearMap()
的。并不能解决我的问题。因为我的基础覆盖物也就是图上高亮区域是不能移除的。
于是,困扰了我一下午。自己打印map
覆盖物的实例,发现了解决方法。
2. 解决方法
先说思路:还是通过 map.remove
方法,它可以接收需要移除覆盖物的实例。可以一次性移除多条。所以我们只需要循环拿到添加后的实例,然后再map.remove
就好。
废话不多说,上代码
removePolygon() {
// 创建Polygon实例
let poly = new AMap.Polygon({
// 地图
map: map,
path: '你的覆盖物路径',
// 边框颜色
strokeColor: '#fff',
// 边框透明度
strokeOpacity: 1,
// 边框宽度
strokeWeight: 2,
// 覆盖物颜色
fillColor: '#fff',
// 覆盖物透明度
fillOpacity: 1
})
// 首先获取当前地图中所有覆盖物的实例。
let mapPolyArr = this.map.getAllOverlays('polygon')
// 定义一个空数组用来存放需要删除的覆盖物实例。
let arr = []
// 循环拿到需要删除的覆盖物
// 此处需要说明,为什么从22开始。
// 因为我自己项目中前23个覆盖物为固定的,不需要删除的。故从22开始。
// mapPolyArr.length 的值是返回目前所有覆盖物的长度,我们不需要删最后一个,因为是自己添加的。所以要需要-1。
for (let i = 22; i < mapPolyArr.length - 1; i++) {
// 将需要删除的项添加到空数组里
arr.push(mapPolyArr[i])
}
// 移除覆盖物
this.map.remove(arr)
// 重新添加覆盖物
this.map.add(poly)
}
至此,就实现了自己想要的结果。