官方文档:OpenLayers - Welcome
我接触的是地图作为一个插件使用npm下载后在项目中使用的。
1.在地图中首先封装并暴露出一个方法挂载到Vue上
import WhrdMap from './whrd-map/WhrdMap.vue'
import { optConfig } from './whrd-map/option.config'
WhrdMap.install = function (Vue, opts = {}) {
optConfig.request = opts.request || window.axios
Vue.component(WhrdMap.name, WhrdMap)
Vue.prototype.$mapEventHub = Vue.prototype.$mapEventHub || new Vue()
}
export default WhrdMap
2.在项目中安装插件后在使用的文件中触发地图暴露出来的方法,以及需要赋的值
this.$mapEventHub.$emit("setzoom-popup",15)
3.在地图的页面进行订阅
this.doSubscribe("setzoom-popup", this.setZoomAndonEvent);
4.定义订阅的方法触发
doSubscribe(message, callback) {
// 订阅
this.$mapEventHub.$on(message, callback);
// 取消订阅 - 回收处理
this.$once("hook:beforeDestroy", () => {
this.$mapEventHub.$off(message, callback);
});
},
5.定义一个方法这里就是ol内置的方法 对地图进行操作
setZoomAndonEvent(zoom) {
this.showZoom = zoom;
let map = this.getMap();
let mapView = (map && map.getView()) || null;
if (mapView) {
mapView.on("change:resolution", this.resolutionChange);
}
},