openlayers和cesium實現地圖二三維切換


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

cesium在vue上實現需要很多步驟,我之前寫過一篇總結,是基於vuecli2.0實現的。按步驟一步步實現,問題不大。如果你是用vuecli3搭建的項目,這里有篇文章介紹用vuecli3實現引用cesium。如果要實現二三維地圖切換,難點是地圖引擎的轉換,有個插件已經幫忙實現了這個工作:ol-cesium。

 

場景需求

好了,我來捋捋場景,搞清楚需求:

1、openlayers加載地圖

2、cesium加載三維地圖

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

4、在vue框架上實現以上功能

實現步驟

一、用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>

二、用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>

三、實現二、三維地圖切換

安裝olcs插件

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

npmi --save olcs
實現二、三維切換
import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap 是openlayers綁定的地圖對象
ol3d.setEnabled(true);

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

四、注意要點

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

現在切換到三維后,效果是有了,平面變三維地球,問題是之前的那個專題圖也看不見了!原因就是切換到三維后,二維地圖被覆蓋了。 解決辦法就是,切換到三維后,再用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源創計划”,歡迎正在閱讀的你也加入,一起分享。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM