三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据

官网demo 地址：

Extent Interaction

在openlayers中可以使用ExtentInteraction添加交互事件，配合shiftKeyOnly实现按住shift键绘制边界区域。 

 const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    const extent = new ExtentInteraction({ condition: shiftKeyOnly });
    map.addInteraction(extent);
    

按住shift绘制矩形，按住shift键点击图形删除。

监听extentchanged事件，记录绘制的矩形数据。

// 监听 extentchanged 事件，获取矩形选择范围
extent.on("extentchanged", (event) => {
    this.extentData = event.extent;
});
 
getData() {
   console.log("结果", th