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中存储完数据以后。