vue3 openlayer的引入、创建图层、加载地图

在 Vue3 中使用 OpenLayers 可以按照以下步骤进行：

1. 安装 OpenLayers：

  npm install ol

2. 在 Vue3 中引入 OpenLayers：

在 Vue3 的组件中，可以通过 import 语句引入 OpenLayers：

  import { Map, View } from 'ol'
  import TileLayer from 'ol/layer/Tile'
  import OSM from 'ol/source/OSM'

3. 创建地图：

在 Vue3 的组件中，创建一个 map 实例：

  export default {
    data() {
      return {
        map: null
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      initMap() {
        this.map = new Map({
          target: 'map',
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ],
          view: new View({
            center: [0, 0],
            zoom: 2
          })
        })
      }
    }
  }

在上面的代码中，我们创建了一个地图，并将其渲染到 id 为 map 的 div 中。我们使用了 OpenStreetMap 的图层，并设置了地图的初始中心点和缩放级别。

4. 加载地图：

在 Vue3 的组件中，可以通过在模板中添加一个 div 元素来加载地图：

  <template>
    <div id="map"></div>
  </template>

这样，当组件渲染时，地图就会被加载并显示在页面上了。