openlayers——vue全局引入openlayers

全局引入

安装相关依赖

npm install ol

在main.js中

import Vue from 'vue'
import App from './App.vue'
import * as ol from 'ol'

Vue.prototype.$openLayers = ol

new Vue({
  render: h => h(App)
}).$mount('#app')

在其他的任何vue组件中都可以通过this.$openLayer 来使用 openlayers 的 API

export default {
  mounted() {
    var map = new this.$openLayers.Map({
      target: 'map',
      layers: [
        new this.$openLayers.layer.Tile({
          source: new this.$openLayers.source.OSM()
        })
      ],
      view: new this.$openLayers.View({
        center: this.$openLayers.proj.fromLonLat([30, 20]),
        zoom: 4
      })
    });
  }
}