三维GIS开发：利用Cesium加载 M3D 地质体模型（附代码）

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

实现步骤

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

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

Step 3. 构造三维场景控件：
实例化Cesium.WebSceneControl对象，完成此步骤后可在三维场景中加载三维球控件；

Example:

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

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

Example:

//构造M3D模型层管理对象（视图）
  var m3dLayer = new CesiumZondy.Layer.M3DLayer({
    viewer: webGlobe.viewer,
  })
  //加载M3D地图文档（服务地址，配置参数）
  var obliqueLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {})

关键接口

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 （可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量

 代码：

<!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;
        //定义图层类
        var geobodyLayerArr;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

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

            //是否显示场景球
            webGlobe.viewer.scene.globe.show = false;
            //大气显示
            webGlobe.viewer.scene.skyAtmosphere.show = false;
            //透明度
            webGlobe.viewer.scene.globe.enableTransparent = true;
            webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 0.001);
            //开启地形深度检测
            webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;

            // 亮度设置
            var stages = webGlobe.viewer.scene.postProcessStages;
            webGlobe.viewer.scene.brightness = webGlobe.viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
            webGlobe.viewer.scene.brightness.enabled = true;
            webGlobe.viewer.scene.brightness.uniforms.brightness = Number(1.3);

            // 修改场景时间
            var utc = Cesium.JulianDate.fromDate(new Date("2020/7/04 24:00:00"));
            webGlobe.viewer.clock.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate());

            //构造M3D模型层管理对象（视图）
            var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                viewer: webGlobe.viewer
            });
            //加载M3D地图文档（服务地址，配置参数）
            var { protocol, ip, port } = window.webclient;
            geobodyLayerArr = m3dLayer.append(
                `${protocol}://${ip}:${port}/igs/rest/g3d/钻孔分层点_Sur_000_Ent`,
                {
                    autoReset: true,
                    loaded: function (layer) {
                        var boundingSphere = layer.boundingSphere;

                        var cartographic = Cesium.Cartographic.fromCartesian(
                            layer.boundingSphere.center
                        );
                        var surface = Cesium.Cartesian3.fromRadians(
                            cartographic.longitude,
                            cartographic.latitude,
                            0.0
                        );
                        var offset = Cesium.Cartesian3.fromRadians(
                            cartographic.longitude,
                            cartographic.latitude,
                            -12
                        );
                        var translation = Cesium.Cartesian3.subtract(
                            offset,
                            surface,
                            new Cesium.Cartesian3()
                        );
                        layer.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                    },
                }
            );

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(112.94845170512113, 30.004246325952618, {
                height: 2600,
                heading: 67,
                pitch: -30,
                roll: 0
            });

            initPick();
        }

        function initPick() {
            let handler = new Cesium.ScreenSpaceEventHandler(
                webGlobe.viewer.scene.canvas
            );
            handler.setInputAction(
                handleClick.bind(this),
                Cesium.ScreenSpaceEventType.LEFT_DOWN
            );
        }

        function handleClick(screenPosition) {
            const viewer = webGlobe.viewer;
            const scene = webGlobe.viewer.scene;
            const { position } = screenPosition;

            var pickedFeature = viewer.scene.pick(position);
            console.warn("screenPosition", pickedFeature);
        }
    </script>
</head>

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

</html>
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

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

热门文章

最新发布