实现步骤
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(':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)
options属性主要参数
2.【M3D模型层管理类】CesiumZondy.Layer.M3DLayer
【method】append(url, options)：添加M3D地图文档服务
options属性主要参数
3.【视图功能管理类】CesiumZondy.Manager.SceneManager
【method】showPosition(elementId, options)：显示经纬度 高程 视角高度
options属性主要参数
【method】flyToEx(lon, lon, options)：跳转到
options属性主要参数
代码：
<!DOCTYPE html><html xmlns="/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: '/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软件开发内容
