vue create vue-ol

cd vue-ol

npm install ol --save

<template>
  <div class="vm">
    <div id="map"></div>
  </div>
</template>
<script>
/*
【1】
import 'ol/ol.css'
引入所需的css，这项是必须的。
【2】
import { Map, View } from 'ol'
引入 Map 和 View。这项也是必须的。
Map是一个地图容器，是最最最核心的部分。Map可以加载各类地图与功能控件，也用于渲染、表现动态地图。每一个地图都是一个Map对象。
View是地图视图，控制地图缩放等基础交互，以及地图投影坐标系、地图中心、分辨率、旋转角度等。
【3】
import Tile from 'ol/layer/Tile'
Tile翻译成中文就是“瓦片”。这项是必须的。
Tile用来承放所需的底图。
【4】
import OSM from 'ol/source/OSM'
OSM是ol提供的一个底图，可以作为练习使用。正式开发不能用OSM，因为OSM的中国边界有点问题。
*/
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
export default {
  name: 'FirstMap',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {
      // 地图实例
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [ // 图层
          new Tile({
            source: new OSM() // 图层数据源
          })
        ],
        view: new View({ // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [114.064839, 22.548857], // 深圳坐标
          minZoom:10, // 地图缩放最小级别
          zoom: 12 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }
  },
  mounted () {
    // 在此生命周期阶段，调用 initMap 完成地图渲染
    this.initMap();
  }
}
</script>