openlayers和cesium实现地图二三维切换 | 您所在的位置:网站首页 › openlayers3教程 › 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加载地图就不应该是难点,官网有很多示例,所以此处略过。 还是给一个示例代码: 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, }),}); 二、用cesium加载三维地图cesium加载三维地图对于gis行业的同学来说也是个麻烦事,更别说要在vue框架上实现了。 以vuecli3为例,引用cesium其实只用几步: 安装vue-cli-plugin-cesium插件 // npmnpm install--save-dev vue-cli-plugin-cesium// yarnyarn add vue-cli-plugin-cesium 直接在vue组件中使用安装好了就可以直接new出来用,因为它已经绑定了vue实例; export default { name: "", mounted(){ var viewer = new Cesium.Viewer("cesiumContainer") } } 三、实现二、三维地图切换 安装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
|
CopyRight 2018-2019 实验室设备网 版权所有 |