Vue2中怎么引入使用Open Layers

1、通过 npm install ol 进行下载openlayers,下载的版本为ol的最新版本。

npm install ol

也可以使用npm install ol@版本号下载指定版本，npm view ol versions查看所有版本

npm install ol@10.2

2、下载好之后在main.js中引入css样式

import 'ol/ol.css'

3、在要显示地图的页面引入 ol 的API配置项

<template>
  <div class="box">
    <div id="map"></div>
  </div>
</template>
<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import { defaults as defaultControls } from 'ol/control'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',   // 地图实例
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
              wrapX: false   // 是否重复显示地图
            })
          })
        ], // 将图层加载到地图
        view: new View({
          center: fromLonLat([113.59, 35.25]),
          zoom: 7.5
        }),  // 地图中心点和默认大小
        controls: defaultControls({
          zoom: false
        }),   // 移除放大缩小控件
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}
</style>