三维GIS开发：利用Cesium加载M3D景观模型（附代码）

发布于：2023-01-23 ⋅ 阅读:(629) ⋅ 点赞:(0)

实现步骤

Step 1. 引用开发库：

引用local本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维WebGL的功能；

Step 2. 创建布局：

创建id='GlobeView'的div作为三维视图的容器，并设置其样式；

Step 3. 构造三维场景控件：

  • Example:
//构造三维视图对象（视图容器div的id，三维视图设置参数）
   var webGlobe = new Cesium.WebSceneControl('GlobeView', {});

Step 4. 创建并设置鼠标位置显示控件：

要展示鼠标当前位置的经纬度、高程、视角高度信息，首先需要创建id="coordinate_location"的label标签作为容器；然后构造CesiumZondy.Manager.SceneManager视图功能管理对象，并调用showPosition()方法为三维场景控件设置鼠标位置信息显示控件；

  • Example:
 //构造视图功能管理对象（视图）
   var sceneManager = new CesiumZondy.Manager.SceneManager({
      viewer: webGlobe.viewer
   });
   //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id）
   sceneManager.showPosition('coordinate_location');

Step 5. 加载数据：

构造CesiumZondy.Layer.M3DLayerM3D图层管理对象，调用append()方法，传入M3D缓存三维地图服务的URL地址即可加载浏览数据，同时可传入相关配置参数；

  • Example:
//构造M3D模型层管理对象（视图）
   var m3dLayer = new CesiumZondy.Layer.M3DLayer({
      viewer: webGlobe.viewer
   });
   //加载M3D地图文档（服务地址，配置参数）
   var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {
      //是否自动定位到数据位置
      autoReset: false,
      //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量
      maximumScreenSpaceError: 8
   });

加载数据默认会自动跳转定位到数据所在位置，如果需要自定义设置跳转的位置，可在append()方法中设置autoReset: false参数，取消自动定位，然后调用SceneManager视图功能管理对象的flyToEx()方法跳转视角。

  • Example:
//视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
   sceneManager.flyToEx(114.40298522106733, 30.465568703723072, {
      height: 100.85856618500283,
      heading: -45.4940479913348135,
      pitch: -15,
      roll: 0
   });

关键接口

1.【三维场景控件类】Cesium.WebSceneControl(elementId, options)

参数名 类 型 说 明
elementId Element | String 放置视图的div的id
options Object （可选）附加属性
  • options属性主要参数
参数名 类 型 默认值 说 明
viewerMode String ‘3D’ （可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图
showInfo Boolean false （可选）是否显示默认的属性信息框
animation Boolean true （可选）默认动画控制不显示
baseLayerPicker Boolean true （可选）是否创建图层控制显示小组件
fullscreenButton Boolean true （可选）是否创建全屏控制按钮
vrButton Boolean false （可选）是否创建VR按钮

2.【M3D模型层管理类】CesiumZondy.Layer.M3DLayer

【method】append(url, options)：添加M3D地图文档服务

参数名 类 型 说 明
url String 文档服务地址
options Object 附加属性
  • options属性主要参数
参数名 类 型 默认值 说 明
autoReset Boolean true （可选）是否自动定位
synchronous Boolean true （可选）是否异步请求
loaded Boolean function （可选）回调函数
proxy DefaultProxy defaultProxy （可选）代理
showBoundingVolume Boolean false （可选）是否显示包围盒
maximumScreenSpaceError Number 16 （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量

3.【视图功能管理类】CesiumZondy.Manager.SceneManager

【method】showPosition(elementId, options)：显示经纬度 高程 视角高度

参数名 类 型 说 明
elementId Element | String 要显示的div的id
options Object 附加属性
  • options属性主要参数
参数名 类 型 默认值 说 明
showHpr Boolean false （可选）
showSelectTileInfo Boolean false （可选）显示当前鼠标所在位置拾取到的级别
showViewLevelInfo Boolean false （可选）显示视图级别

【method】flyToEx(lon, lon, options)：跳转到

参数名 类型 说明
lon Number 经度
lon Number 纬度
options Object （可选）附加属性
  • options属性主要参数
参数名 类型 说明
height Number （可选）视角高度
duration Number （可选）持续时间
heading Number （可选）方位角
pitch Number （可选）俯仰角
roll Number （可选）翻滚角

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>M3D-景观模型数据展示</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义M3D图层对象
        var landscapeLayerArr;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});
            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id）
            sceneManager.showPosition('coordinate_location');
            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载天地图
            var tdtLayer = thirdPartyLayer.appendTDTuMap({
                //天地图经纬度数据
                url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                token: "9c157e9585486c02edf817d2ecbc7752",
                //地图类型 'vec'矢量 'img'影像 'ter'地形
                ptype: "img"
            });
            //构造M3D模型层管理对象（视图）
            var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                viewer: webGlobe.viewer
            });
            //加载M3D地图文档（服务地址，配置参数）
            var {
                protocol,
                ip,
                port
            } = window.webclient;
            landscapeLayerArr = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/ZondyModels`, {
                //是否自动定位到数据位置
                autoReset: false,
                //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量
                maximumScreenSpaceError: 8
            });

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(114.40525542642715, 30.4630696482677, {
                height: 300.85856618500283,
                heading: -45.4940479913348135,
                pitch: -15,
                roll: 0
            });
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'></div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>

点击了解更多学习GIS软件开发内容

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布