高德地图清除上一次操作遗留的Polygon覆盖物 您所在的位置:网站首页 如何在高德地图上测距 高德地图清除上一次操作遗留的Polygon覆盖物

高德地图清除上一次操作遗留的Polygon覆盖物

2024-07-14 04:00| 来源: 网络整理| 查看: 265

首先先说我目前的场景。我目前项目中:一个地图划分了很多区块,每个区块都是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


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有