|
| 1 | +<!DOCTYPE html> |
| 2 | +<html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <title>M3D-景观模型数据展示</title> |
| 6 | + <!--引用第三方的jQuery脚本库--> |
| 7 | + <script include="jquery" src="./static/libs/include-lib-local.js"></script> |
| 8 | + <!--引用Cesium脚本库文件--> |
| 9 | + <script src="./static/libs/include-cesium-local.js"></script> |
| 10 | + <!--引用示例页面样式表--> |
| 11 | + <link rel="stylesheet" href="./static/demo/cesium/style.css" /> |
| 12 | + <script> |
| 13 | + //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误 |
| 14 | + 'use strict'; |
| 15 | + |
| 16 | + //定义三维场景控件对象 |
| 17 | + var webGlobe; |
| 18 | + //定义M3D图层对象 |
| 19 | + var tileset; |
| 20 | + |
| 21 | + //加载三维场景 |
| 22 | + function init() { |
| 23 | + //构造三维视图对象（视图容器div的id，三维视图设置参数） |
| 24 | + webGlobe = new Cesium.WebSceneControl('GlobeView', {}); |
| 25 | + //构造视图功能管理对象（视图） |
| 26 | + var sceneManager = new CesiumZondy.Manager.SceneManager({ |
| 27 | + viewer: webGlobe.viewer |
| 28 | + }); |
| 29 | + //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id） |
| 30 | + sceneManager.showPosition('coordinate_location'); |
| 31 | + //构造第三方图层对象 |
| 32 | + var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ |
| 33 | + viewer: webGlobe.viewer |
| 34 | + }); |
| 35 | + //加载天地图 |
| 36 | + var tdtLayer = thirdPartyLayer.appendTDTuMap({ |
| 37 | + //天地图经纬度数据 |
| 38 | + url: 'http://t3.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', |
| 39 | + //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效） |
| 40 | + token: '9c157e9585486c02edf817d2ecbc7752', |
| 41 | + //地图类型 'vec'矢量 'img'影像 'ter'地形 |
| 42 | + ptype: 'img' |
| 43 | + }); |
| 44 | + |
| 45 | + //加载M3D地图文档（服务地址，配置参数） |
| 46 | + var { protocol, ip, port } = window.webclient; |
| 47 | + ip = 'localhost'; |
| 48 | + port = 7777; |
| 49 | + /* tileset = new Cesium.MapGISM3DSet({ |
| 50 | + url: `${protocol}://${ip}:${port}/福田地质体_挖后效果.mcj`, // |
| 51 | + igserver: false |
| 52 | + }); */ |
| 53 | + tileset = new Cesium.Cesium3DTileset({ |
| 54 | + url: `${protocol}://${ip}:${port}/福田地质体_挖后效果.mcj`, // |
| 55 | + igserver: false |
| 56 | + }); |
| 57 | + |
| 58 | + // webGlobe.viewer.scene.primitives.add(tileset); |
| 59 | + |
| 60 | + tileset.readyPromise.then(function (primitives) { |
| 61 | + console.log('file m3d', primitives); |
| 62 | + webGlobe.viewer.zoomTo(primitives, new Cesium.HeadingPitchRange(0.0, -0.5, primitives.boundingSphere.radius * 2.0)); |
| 63 | + }); |
| 64 | + } |
| 65 | + </script> |
| 66 | + </head> |
| 67 | + |
| 68 | + <body onload="init()"> |
| 69 | + <!--三维场景容器--> |
| 70 | + <div id="GlobeView"></div> |
| 71 | + <!--位置信息容器--> |
| 72 | + <div id="coordinateDiv" class="coordinateClass"> |
| 73 | + <label id="coordinate_location"></label> |
| 74 | + </div> |
| 75 | + </body> |
| 76 | +</html> |
0 commit comments