在vue中集成mapbox-gl或者Cesium的開發(fā)中，未將mapbox-gl和Cesium封裝vue組件，簡(jiǎn)便期間，直接將mapbox-gl中的實(shí)例化map對(duì)象進(jìn)行整個(gè)工程共享，將Cesium中初始化的viewer進(jìn)行共享，達(dá)到每個(gè)vue組件可以直接訪問，從而實(shí)現(xiàn)操控地圖。

使用這種方式時(shí)，工程中就一個(gè)地圖，不同的功能進(jìn)行數(shù)據(jù)切換、對(duì)象加載，特別是在Cesium中，地圖每次加載還是需要一定時(shí)間的，對(duì)于不需要顯示地圖的場(chǎng)景，將地圖蓋住就可以。當(dāng)然，對(duì)于一些開發(fā)中的代碼解耦，這樣的操作可能不太合適了。

以Cesium的開發(fā)為示例，簡(jiǎn)單寫一下實(shí)現(xiàn)的方式：

vue中使用的是?狀態(tài)管理，官方參考實(shí)現(xiàn)網(wǎng)址：

https://cn.vuejs.org/v2/guide/state-management.html

關(guān)鍵代碼：

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初始化時(shí)，賦值：

var?viewer =?new?Cesium.Viewer(this.$refs.cesiumContainer);

this.$store.commit("setmap", viewer);

其他的業(yè)務(wù)界面使用時(shí)：

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

mapbox-gl也是同樣進(jìn)行設(shè)置。
使用此方式的時(shí)候，要注意代碼的執(zhí)行順序，假如要在地圖初始化執(zhí)行一些操作，一定得要等到store中存儲(chǔ)完數(shù)據(jù)以后。