实现步骤
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软件开发内容