多个polygon循环添加到overlayGroup,删除时,overlayGroup只能删除最后添加的polygon
时间: 2024-03-15 13:48:02 浏览: 20
这个问题通常是因为在循环中使用 `let` 或者 `var` 定义变量时,变量的作用域存在问题,导致在删除时只能删除最后添加的 `polygon`。为了解决这个问题,可以使用 `forEach` 循环和一个新的 `layerGroup` 来管理所有的 `polygon`,具体步骤如下:
1. 创建一个 `polygonLayers` 变量,用于存储所有的 `polygon`:
```javascript
var polygonLayers = [];
```
2. 使用 `forEach` 循环遍历所有 `polygon`,将每个 `polygon` 添加到 `polygonLayers` 中:
```javascript
var polygons = [...]; // 所有的 polygon 数组
polygons.forEach(function(coords) {
var polygon = L.polygon(coords);
polygonLayers.push(polygon);
polygon.addTo(map);
});
```
3. 创建一个新的 `layerGroup`,将所有的 `polygon` 添加到该 `layerGroup` 中:
```javascript
var overlayGroup = L.layerGroup(polygonLayers).addTo(map);
```
4. 在删除 `polygon` 时,从 `polygonLayers` 中移除该 `polygon`,然后重新设置 `overlayGroup` 的图层:
```javascript
polygonLayers = polygonLayers.filter(function(layer) {
return layer !== polygon;
});
overlayGroup = L.layerGroup(polygonLayers).addTo(map);
```
这样,就能正确地删除任意一个 `polygon` 了。完整的代码示例如下:
```javascript
var polygonLayers = [];
var polygons = [...]; // 所有的 polygon 数组
polygons.forEach(function(coords) {
var polygon = L.polygon(coords);
polygonLayers.push(polygon);
polygon.addTo(map);
});
var overlayGroup = L.layerGroup(polygonLayers).addTo(map);
// 点击任意一个 polygon 时,从 overlayGroup 中删除该 polygon
polygon.on('click', function(e) {
polygonLayers = polygonLayers.filter(function(layer) {
return layer !== e.target;
});
overlayGroup = L.layerGroup(polygonLayers).addTo(map);
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![py](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)