OpenLayers是一个专为Web GIS开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。当OpenLayers遇上Vue，一步一招，完美集成。

安装OpenLayers

npm i openlayers -s

集成使用

全局引入并注册成全局变量

import ol from 'openlayers';
import 'openlayers/css/ol.css';
Vue.prototype.$ol = ol;

在组件中使用

createMap() {
  let ol = this.$ol;
  new ol.Map({
    layers: [
      new ol.layer.Tile({
        opacity: 1,
        source: new ol.source.XYZ({
          projection: "EPSG:4326",
          url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        })
      })
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
      projection: "EPSG:4326"
    }),
    target: "map"
  });
}

在mounted()加载调用。至此完美集成。