這里介紹如何在普通2d的gis項目里實現(xiàn)地圖的二、三維切換。二維地圖引擎市面上比較多，比較有代表性的像openlayers、leaflet等。三維地圖目前比較流行的開源方案有cesium，它本身是基于webGL實現(xiàn)的地圖引擎。 

場景需求

好了，我來捋捋場景，搞清楚需求：

1、openlayers加載地圖

2、cesium加載三維地圖

3、實現(xiàn)二、三維地圖切換

4、在vue框架上實現(xiàn)以上功能

實現(xiàn)步驟

一、用openlayers加載地圖

此處略過，雖然簡單，但是對于沒有接觸過gis的前端同學(xué)還是有入門門檻的。那既然是要實現(xiàn)以上需求，應(yīng)該就是要做gis項目的人。既然是做gis項目的，那這個ol加載地圖就不應(yīng)該是難點，官網(wǎng)有很多示例，所以此處略過。

還是給一個示例代碼：

二、用cesium加載三維地圖

cesium加載三維地圖對于gis行業(yè)的同學(xué)來說也是個麻煩事，更別說要在vue框架上實現(xiàn)了。

以vuecli3為例，引用cesium其實只用幾步：

安裝vue-cli-plugin-cesium插件

// npm
npm install --save-dev vue-cli-plugin-cesium

// yarn
yarn add vue-cli-plugin-cesium

直接在vue組件中使用

安裝好了就可以直接new出來用，因為它已經(jīng)綁定了vue實例；

三、實現(xiàn)二、三維地圖切換

安裝olcs插件

這是一個用于實現(xiàn)openlayers與cesium切換的插件，詳細(xì)文檔移步官網(wǎng)

npm i --save olcs

實現(xiàn)二、三維切換

import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap 是openlayers綁定的地圖對象
ol3d.setEnabled(true);

需要注意的就是上面代碼中的ol2dMap是openlayers綁定的地圖對象，這個業(yè)內(nèi)同學(xué)都懂。結(jié)合前面的ol示例，就是那個olmap對象。

四、注意要點

如果有這樣的需求：本來是二維地圖有個矢量地圖，比如一個什么專題圖；然后切換到了三維地圖，我仍然要能在三維地圖上看到那個專題圖。

現(xiàn)在切換到三維后，效果是有了，平面變?nèi)S地球，問題是之前的那個專題圖也看不見了！原因就是切換到三維后，二維地圖被覆蓋了。解決辦法就是，切換到三維后，再用cesium引擎加載平面專題圖；

cesium加載平面地圖

var ol3dLayers = ol3d.getCesiumScene().imageryLayers;
        // eslint-disable-next-line no-undef
        ol3dLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
          url: 'http://**************/arcgis/rest/services/**/******/MapServer'
        }))

上面的示例地圖是一個aricgis動態(tài)服務(wù)；

最后上圖，來看下效果：