openlayers中实现圈选、多边形选择点要素

/**
 * 添加画图圈圈
 */
function  drawInteraction(Googlemap,features,layers) {
     
  var source = new SourceVector({
     
    features: features,
  })
  var draw = new olInteraction.Draw({
     
      source: source,
      type:"Polygon",     //为多边形    Circle 为圆形
  });
  Googlemap.addInteraction(draw);

  draw.on('drawend',async (evt) => {
     
      var polygon = await evt.feature.getGeometry();
         var center = polygon.getCenter(),radius = polygon.getRadius(),extent = polygon.getExtent();
         var features = layers.getSource().getFeaturesInExtent(extent); //先缩小feature的范围
         for(var i=0;i<features.length;i++){
     
             var newCoords = features[i].getGeometry().getCoordinates();
             if(pointInsideCircle(newCoords,center,radius)){
     
                 console.log(features[i]);      //选中要素
             }
         }
  })
}

其中三个参数为要素集合,地图实例,和图层
pointInsideCircle 是判断一个点是否在圆形中的算法

你可能感兴趣的:(openlayers,经验分享,vue.js)