openlayers 框选（画图）得到在选框内的要素，并标注出这些要素的名称 Demo (可直接运行)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="selectedFeatures" style="margin: 20px;min-height: 100px;"></div>
  <div id="map"></div>
  <script>
      var beijing = ol.proj.fromLonLat([116.28, 39.54]);
      var map = new ol.Map({
          target: 'map',
          layers: [
          new ol.layer.Tile({  
            source: new ol.source.OSM()
          })  
          ],
          view: new ol.View({
              center: beijing,
              zoom: 4
          })
      });

      //实例化矢量点要素，通过矢量图层添加到地图容器中
      //这样就实现了预先加载图文标注
      var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(beijing),
          name: '北京市',                         //名称属性
          population: 2115                       //人口数（万）
      });
      //设置点要素样式
      iconFeature.setStyle(createLabelStyle(iconFeature));
      //矢量标注的数据源
      var vectorSource = new ol.source.Vector({
          features: [iconFeature]
      });
      //矢量标注图层
      var vectorLayer = new ol.layer.Vector({
          source: vectorSource
      });
      map.addLayer(vectorLayer);

      //矢量标注样式设置函数，设置image为图标ol.style.Icon
      function createLabelStyle(feature){
        //   console.log(feature);
          return new ol.style.Style({
              text: new ol.style.Text({
                  textAlign: 'center',            //位置
                  textBaseline: 'bottom',         //基准线
                  font: 'normal 12px 微软雅黑',    //文字样式
                  text: feature.get('name'),      //文本内容
                  fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                      color: '#000'
                  }),
                  stroke: new ol.style.Stroke({
                      color: '#F00', 
                      width: 2
                  })
              })
          });
      }
    var coordinate1 = [10806361.310845079, 3942927.667062532];        //鼠标单击点的坐标
          var coordinate2 =  [11540156.782382771, 4539747.983913189]      //鼠标单击点的坐标
          var coordinate3 =  [12225032.55581795, 3982063.4255445423]      //鼠标单击点的坐标
          var arr =[coordinate1,coordinate2,coordinate3]
          //新建一个要素ol.Feature
          arr.forEach((ar,index) => {
              var newFeature = new ol.Feature({
                  geometry: new ol.geom.Point(ar),  //几何信息
                  name: '标注点'+index
              });
              newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
              vectorSource.addFeature(newFeature);  
          });
      
var draw = new ol.interaction.Draw({
    source: vectorLayer.getSource(),
    type:"Circle",
    style:new ol.style.Style({
                // 将点设置成圆形样式
                image: new ol.style.Circle({
                    // 点的颜色
                    fill: new ol.style.Fill({
                        color: '#F00'
                    }),
                    // 圆形半径
                    radius: 5
                }),
                // 线样式
                stroke: new ol.style.Stroke({
                    color: '#0F0',
                    lineCap: 'round',       // 设置线的两端为圆头
                    width: 5                
                })
            }),
            geometryFunction: ol.interaction.Draw.createBox() // 使画出来的现状为矩形

});
    map.addInteraction(draw);
draw.on('drawend',function(evt){
    var polygon = evt.feature.getGeometry();
    setTimeout(function(){              //如果不设置延迟，范围内要素选中后自动取消选中，具体原因不知道
        var extent = polygon.getExtent()
        var features = vectorLayer.getSource().getFeaturesInExtent(extent); //先缩小feature的范围
        var str = "";
        for(var i=0;i<features.length;i++){
            var newCoords = features[i].getGeometry().getCoordinates();
             if (features[i].get("name")) {
                str += "<div class=\"selectedItem\" οnclick='showDeviceOnMap(\""+features[i].getId()+"\");'>"+features[i].get("name")+"</div>";
             }   
        }
        document.getElementById('selectedFeatures').innerHTML = str
    },300)
})
  </script>
</body>
</html>
openlayers 框选（画图）得到在选框内的要素，并标注出这些要素的名称 Demo (可直接运行)

推荐阅读
