openlayer获取地图上的layers数组 并循环删除 bug解决

解决办法:从后往前删

function clearLayerWithIdArr(arr){
  let map = getMap()
  let layers = map.getLayers().getArray()
  for(let i=layers.length-1;i>=0;i--){
    let layer = layers[i]
    let layerId = layer.get('layerId')
    if(arr.indexOf(layerId) > -1){
      layer.getSource().clear()
      map.removeLayer(layer)
    }
  }
  //会造成循环中部分layer删除不掉的情况
  // map.getLayers().forEach(layer => {
  //   let layerId = layer.get('layerId')
  //   if(arr.indexOf(layerId) > -1){
  //     layer.getSource().clear()
  //     map.removeLayer(layer)
  //   }
  // }) 
}
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要实现地图上标绘坐标点500米半径圆圈内的数据,可以按照以下步骤进行: 1. 获取需要标绘的坐标点的经纬度数据。 2. 使用 OpenLayers 创建地图,并将坐标点添加到地图上。 3. 创建一个圆形图层,并将其添加到地图上。 4. 遍历坐标点数据,计算每个点与圆心之间的距离,如果距离小于等于500米,则将该点添加到圆形图层中。 5. 根据需要设置圆形的样式,如颜色、线宽、透明度等。 以下是一个简单的实现示例: ```javascript // 创建地图 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([120.13, 30.27]), zoom: 12 }) }); // 创建圆形图层 var circleLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.2)' }), stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, 0.8)', width: 2 }) }) }); map.addLayer(circleLayer); // 坐标点数据 var points = [ [120.13, 30.27], [120.14, 30.28], [120.15, 30.29], // ... ]; // 计算圆形半径 var radius = 500; // 圆心坐标 var center = ol.proj.fromLonLat([120.13, 30.27]); // 遍历坐标点数据 points.forEach(function(point) { var coordinate = ol.proj.fromLonLat(point); var distance = ol.sphere.getDistance(center, coordinate); if (distance <= radius) { // 将符合条件的点添加到圆形图层中 circleLayer.getSource().addFeature(new ol.Feature({ geometry: new ol.geom.Point(coordinate) })); } }); ``` 在上述示例中,我们首先创建了一个地图,并添加了一个 OpenStreetMap 图层。然后,我们创建了一个圆形图层,设置了其样式,并将其添加到地图上。接着,我们遍历了所有坐标点,计算了每个点与圆心之间的距离,并将距离小于等于500米的点添加到圆形图层中。最后,我们将圆形图层添加到地图上,即可在地图上显示出符合条件的点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值