基于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源创计划”，欢迎正在阅读的你也加入，一块儿分享。