zoukankan      html  css  js  c++  java
  • 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源创计划”,欢迎正在阅读的你也加入,一起分享。

  • 相关阅读:
    linux驱动开发学习一:创建一个字符设备
    如何高效的对有序数组去重
    找到缺失的第一个正整数
    .NET不可变集合已经正式发布
    中国人唯一不认可的成功——就是家庭的和睦,人生的平淡【转】
    自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
    ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
    自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
    ServiceStack 介绍
    一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
  • 原文地址:https://www.cnblogs.com/javalinux/p/15302808.html
Copyright © 2011-2022 走看看