vue3 openlayer 矩形选框

在Vue 3中结合OpenLayers实现矩形选框的方法与上述相似。下面是一个简单的示例：

首先，确保你已经安装了OpenLayers库。你可以使用npm或yarn命令进行安装：

npm install ol
# 或者
yarn add ol

接下来，创建一个Vue组件，比如`Map.vue`，并在其中引入OpenLayers和Vue：

<template>
  <div>
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import DragBox from 'ol/interaction/DragBox';

export default {
  name: 'Map',
  setup() {
    onMounted(() => {
      const map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });

      const dragBox = new DragBox({
        condition: ol.events.condition.platformModifierKeyOnly
      });

      map.addInteraction(dragBox);

      dragBox.on('boxend', () => {
        const extent = dragBox.getGeometry().getExtent();
        console.log(extent);
      });
    });

    return {};
  }
};
</script>

<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

在上述代码中，我们使用Vue的`onMounted`钩子来在组件挂载后创建地图和交互。在模板中，我们使用`ref`属性引用`div`元素作为地图容器。

通过引入相关的OpenLayers模块，我们创建了一个地图对象，并添加了一个OSM图层。然后，我们创建了一个`DragBox`交互对象，并将其添加到地图上。

最后，我们监听了`boxend`事件，并在事件处理程序中获取所选矩形的范围，并打印到控制台。

请注意，以上代码只是一个简单的示例，你可能需要根据实际需求进行修改和完善。

希望这可以帮助到你！如果你还有其他问题，请随时提问。