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

引入OpenLayers 6和Vue 3：

import { createApp } 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 { defaults as defaultControls } from 'ol/control'
import { createMap } from 'ol/vm'
import 'ol/ol.css'

创建地图和图层：

export default {
  name: 'MapComponent',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    // 创建地图
    this.map = new Map({
      target: 'map',
      controls: defaultControls(),
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    })

    // 创建瓦片图层
    const tileLayer = new TileLayer({
      source: new OSM()
    })

    // 加载图层到地图
    this.map.addLayer(tileLayer)
  }
}

在模板中添加地图容器：

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

加载地图：

createApp(MapComponent).mount('#app')