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

实现步骤

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>