把Vue与OpenLayers集成使用的方法

准备工作

确认自己电脑是否通过npm正确安装了OpenLayers，没有的话可以

npm i openlayers -s

搞定后开始下一步。

注册全局变量

首先全局引入，然后通过vue的prototype方法定义全局变量。

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

这里的Vue.prototype.$ol实际上是“为Vue对象添加了原型属性”，当这个原型属性被用于引用时，它可以视作“全局变量”，使$ol在每个Vue实例中可用。
Vue.prototype用于需要在多个地方使用，但不想污染全局作用域的情况，常用于方法和变量。
这里的$符号用于约定在Vue所有实例中都可用的属性。这样做可以避免与已被定义的数据、方法、计算属性等产生冲突。

疑惑的话可以参考Vue官方教程的这篇文章

在组件中使用

就是使用

let ol = this.$ol;

后面在methods中正常写OpenLayers就可以了。

methods: {
  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()中调用

mounted() {
  this.createMap();
},

注意调用时要加上this。
mounted的用法详见 https://cn.vuejs.org/v2/api/#mounted 和 https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

至此愉快结束~

把Vue与OpenLayers集成使用的方法

原文：https://www.cnblogs.com/yonniye/p/14296479.html