基於openlayers、cesium實現2、三維地圖切換

本文介紹如何在普通2d的gis項目裏實現地圖的2、三維切換。二維地圖引擎市面上比較多，比較有表明性的像openlayers、leaflet等。三維地圖目前比較流行的開源方案有cesium，它自己是基於webGL實現的地圖引擎。css

cesium在vue上實現須要不少步驟，我以前寫過一篇總結，是基於vuecli2.0實現的。按步驟一步步實現，問題不大。若是你是用vuecli3搭建的項目，這裏有篇文章介紹用vuecli3實現引用cesium。若是要實現二三維地圖切換，難點是地圖引擎的轉換，有個插件已經幫忙實現了這個工做：ol-cesium。html

場景需求

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

一、openlayers加載地圖vue

二、cesium加載三維地圖web

三、實現2、三維地圖切換vue-cli

四、在vue框架上實現以上功能npm

實現步驟

1、用openlayers加載地圖

此處略過，雖然簡單，可是對於沒有接觸過gis的前端同窗仍是有入門門檻的。那既然是要實現以上需求，應該就是要作gis項目的人。既然是作gis項目的，那這個ol加載地圖就不該該是難點，官網有不少示例，因此此處略過。微信

仍是給一個示例代碼：框架

<template>
	<div id = "map">
        
    </div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

var olmap = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }) ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
</script>

2、用cesium加載三維地圖

cesium加載三維地圖對於gis行業的同窗來講也是個麻煩事，更別說要在vue框架上實現了。編輯器

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

安裝vue-cli-plugin-cesium插件

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

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

直接在vue組件中使用

安裝好了就能夠直接new出來用，由於它已經綁定了vue實例；

<template>
	<div id= "cesiumContainer">
    </div>
</template>
<script>
	export default {
      name: "",
      mounted(){
         var viewer = new Cesium.Viewer("cesiumContainer")
      }
    }
</script>

3、實現2、三維地圖切換

安裝olcs插件

這是一個用於實現openlayers與cesium切換的插件，詳細文檔移步官網

npm i --save olcs

實現2、三維切換

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

須要注意的就是上面代碼中的ol2dMap是openlayers綁定的地圖對象，這個業內同窗都懂。結合前面的ol示例，就是那個olmap對象。

4、注意要點

若是有這樣的需求：原本是二維地圖有個矢量地圖，好比一個什麼專題圖；而後切換到了三維地圖，我仍然要能在三維地圖上看到那個專題圖。

如今切換到三維後，效果是有了，平面變三維地球，問題是以前的那個專題圖也看不見了！緣由就是切換到三維後，二維地圖被覆蓋了。 解決辦法就是，切換到三維後，再用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動態服務；

最後上圖，來看下效果：

參考資料：

https://blog.csdn.net/u010001043/article/details/74279380

https://cesium.com/docs/cesiumjs-ref-doc/ArcGisMapServerImageryProvider.html

https://mp.weixin.qq.com/s/3Of_xKhUOxiwFhJoZ0U-Mg

本文分享自微信公衆號 - 字節逆旅（wvivw_007）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。