vue中map对象共享方式（mapbox-gl、Cesium）

在vue中集成mapbox-gl或者Cesium的开发中，未将mapbox-gl和Cesium封装vue组件，简便期间，直接将mapbox-gl中的实例化map对象进行整个工程共享，将Cesium中初始化的viewer进行共享，达到每个vue组件可以直接访问，从而实现操控地图。
使用这种方式时，工程中就一个地图，不同的功能进行数据切换、对象加载，特别是在Cesium中，地图每次加载还是需要一定时间的，对于不需要显示地图的场景，将地图盖住就可以。当然，对于一些开发中的代码解耦，这样的操作可能不太合适了。
以Cesium的开发为示例，简单写一下实现的方式：
vue中使用的是 状态管理，官方参考实现网址：
https://cn.vuejs.org/v2/guide/state-management.html
关键代码：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
      
mainmap: null 
};

const getters = {
      
getmap(state) {
      
return state.mainmap;
}
};

const mutations = {
     
setmap(state, map) {
      
state.mainmap = map;
}
};

const actions = {
     
setnewmap(context, map) {
      
context.commit('setMap', map)
}
}};

const store = new Vuex.Store({
     
state,
getters,
mutations,
actions
});
export default store;

Cesium的viewer初始化时，赋值：

var viewer = new Cesium.Viewer(this.$refs.cesiumContainer);
this.$store.commit("setmap", viewer);

其他的业务界面使用时：

let viewer = this.$store.getters.getmap;

mapbox-gl也是同样进行设置。
使用此方式的时候，要注意代码的执行顺序，假如要在地图初始化执行一些操作，一定得要等到store中存储完数据以后。

更多文章，请关注公众号查看！