草庐IT

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

gis学姐 2024-04-24 原文

实现步骤

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)

参数名类 型说 明
elementIdElement | String放置视图的div的id
optionsObject（可选）附加属性
  • options属性主要参数
参数名类 型默认值说 明
viewerModeString‘3D’（可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图
showInfoBooleanfalse（可选）是否显示默认的属性信息框
animationBooleantrue（可选）默认动画控制不显示
baseLayerPickerBooleantrue（可选）是否创建图层控制显示小组件
fullscreenButtonBooleantrue（可选）是否创建全屏控制按钮
vrButtonBooleanfalse（可选）是否创建VR按钮

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

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

参数名类 型说 明
urlString文档服务地址
optionsObject附加属性
  • options属性主要参数
参数名类 型默认值说 明
autoResetBooleantrue（可选）是否自动定位
synchronousBooleantrue（可选）是否异步请求
loadedBooleanfunction（可选）回调函数
proxyDefaultProxydefaultProxy（可选）代理
showBoundingVolumeBooleanfalse（可选）是否显示包围盒
maximumScreenSpaceErrorNumber16（可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量

 代码：

<!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>
地质CesiumtdxffwebGlobe3djavascript前端

有关三维GIS开发：利用Cesium加载 M3D 地质体模型（附代码）的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  4. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  5. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  9. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  10. [Vuforia]二.3D物体识别 - 2

    之前说过10之后的版本没有3dScan了，所以还是9.8的版本或者之前更早的版本。 3d物体扫描需要先下载扫描的APK进行扫面。首先要在手机上装一个扫描程序，扫描现实中的三维物体，然后上传高通官网，在下载成UnityPackage类型让Unity能够使用这个扫描程序可以从高通官网上进行下载，是一个安卓程序。点到Tools往下滑，找到VuforiaObjectScanner下载后解压数据线连接手机，将apk文件拷入手机安装然后刚才解压文件中的Media文件夹打开，两个PDF图打印第一张A4-ObjectScanningTarget.pdf，主要是用来辅助扫描的。好了，接下来就是扫描三维物体。将瓶

随机推荐