Vue+OpenLayers入门（加载OSM在线地图）

1、初始化Vue项目

此处不再赘述，不会初始化的请移步：如何搭建一个vue项目(完整步骤)
多说一句，完成vue项目的初始化后，可以在App.vue中修改代码如下（为何要这样修改，后面代码中的注释会描述）：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html, body, #app { 
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

2、安装Openlayers库

（示例使用的ol版本是6.7.0）

npm install ol -S
// 或者
yarn add ol -S

3、代码

<template>
  <div class="map-box" id="map-box" ref="mapBox"></div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile} from 'ol/layer';
import OSM from "ol/source/OSM";
export default {
  data() {
    return {
      map: null, // 用来存储map对象
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        layers: [
          new Tile({
            source: new OSM(), // OSM在线瓦片地图
          })
        ],
        view: new View({
          center: [104.06, 30.67], // 成都
          zoom: 10, // 设置初始化时的地图缩放层级
          projection: 'EPSG:4326', // 坐标系
          maxZoom: 18, // 最大缩放层级
          minZoom: 6, // 最小缩放层级
        }),
        target: 'map-box', // 地图dom
      });
    }
  }
}
</script>
<style>
.map-box {
  /* 若不在App.vue中设置html、body的width和height，此时这样写div高度则为0，地图不会显示 */
  width: 100%;
  height: 100%;
}
</style>

若不修改App.vue中的样式，则map-box的样式可以设置如下：

<style>
.map-box {
  width: 100vh;
  height: 100vh;
}
</style>

4、效果图：