<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>模型矩阵</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="renderer" content="webkit"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <script src="../sanwei/static/cesium/Cesium.js"></script> <script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script> <script src="src/dat.gui.min.js"></script> <script src="src/cesium-transform.js"></script> <link href="../sanwei/static/cesium/Widgets/widgets.css" rel="stylesheet" /> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #cesiumContainer { width: 100%; height: 100%; } #cesiumContainer .cesium-viewer-bottom { display: none; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var token = ''; // 服务域名 var tdtUrl = 'https://t{s}.tianditu.gov.cn/'; // 服务负载子域 var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']; // cesium 初始化 var viewer = new Cesium.Map('cesiumContainer', { shouldAnimate: true, selectionIndicator: true, infoBox: true }); // 抗锯齿 viewer.scene.postProcessStages.fxaa.enabled = false; // 水雾特效 viewer.scene.globe.showGroundAtmosphere = true; // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度 viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20); // 取消默认的双击事件 viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); // 叠加影像服务 var imgMap = new Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new Cesium.WebMercatorTilingScheme(), maximumLevel: 18 }); viewer.imageryLayers.addImageryProvider(imgMap); // 叠加国界服务 var iboMap = new Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new Cesium.WebMercatorTilingScheme(), maximumLevel: 10 }); viewer.imageryLayers.addImageryProvider(iboMap); // 叠加地形服务 var terrainUrls = new Array(); for (var i = 0; i < subdomains.length; i++) { var url = tdtUrl.replace('{s}', subdomains[i]) + 'DEM90M/DataServer?T=elv_c&tk=' + token; terrainUrls.push(url); } var provider = new Cesium.GeoTerrainProvider({ urls: terrainUrls }); viewer.terrainProvider = provider; var titleurl = "http://36.133.46.163:8081/production/tileset.json"; // 将三维球定位到中国 viewer.camera.flyTo({ // destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000), destination: Cesium.Cartesian3.fromDegrees(113.79891698, 34.790739139999999, 17850000), orientation: { heading: Cesium.Math.toRadians(348.4202942851978), pitch: Cesium.Math.toRadians(-89.74026687972041), roll: Cesium.Math.toRadians(0) }, complete: function callback() { // 定位完成之后的回调函数 viewer.camera.flyTo({ duration: 8, destination: Cesium.Cartesian3.fromDegrees(113.79891698, 34.790739139999999, 5000.0), orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90.0), roll: Cesium.Math.toRadians(0.0) }, complete: function callback() { // 叠加倾斜模型 var tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ //url: 'http://47.92.159.240:9025/oblique/build/dayanta/tileset.json', url: titleurl, maximumScreenSpaceError: 2, maximumNumberOfLoadedTiles: 100000, }) ); //////////////////////////////////////////////////////////// //控制模型的位置 tileset.readyPromise.then(function (palaceTileset) { //alert(1); //添加到场景 viewer.scene.primitives.add(palaceTileset); var longitude = 113.79891698; //模型需要改变的经度 var latitude = 34.790739139999999; //模型需要改变的纬度 //var heightOffset = 20.0; //模型需要改变的高度 var heightOffset = 0.0; //模型需要改变的高度 //获取3Dtlies的bounds范围 var boundingSphere = palaceTileset.boundingSphere; //获取3Dtlies的范围中心点的弧度 var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); //定义3Dtlies改变之后中心点的弧度 var offsetvalue = Cesium.Cartographic.fromDegrees(longitude, latitude, heightOffset) //模型本身的位置 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); //模型改变的位置 var offset = Cesium.Cartesian3.fromRadians(offsetvalue.longitude, offsetvalue.latitude, heightOffset); //定义模型的改变状态 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); //修改模型的位置 palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0)); }); ///////////////////////////////////////////////////////////// } }); //结束 } }); // 基础参数 let tileModelParam = { url: titleurl, scale: 1.0, //longitude: 116.29393709916772, //latitude: 39.935457593075405, longitude: 113.79891698, latitude: 34.790739139999999, height: 0.0, rx: 0, ry: 0, rz: 0, alphaEnble: false, alpha: 1.0 } // 调用调整面板 TilesetMatrixPanel(viewer, { tileModelParam: tileModelParam }) // 叠加三维地名服务 var wtfs = new Cesium.GeoWTFS({ viewer, //三维地名服务，使用wtfs服务 subdomains: subdomains, metadata: { boundBox: { minX: -180, minY: -90, maxX: 180, maxY: 90 }, minLevel: 1, maxLevel: 20 }, aotuCollide: true, //是否开启避让 collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左 serverFirstStyle: true, //服务端样式优先 labelGraphics: { font: "28px sans-serif", fontSize: 28, fillColor: Cesium.Color.WHITE, scale: 0.5, outlineColor: Cesium.Color.BLACK, outlineWidth: 5, style: Cesium.LabelStyle.FILL_AND_OUTLINE, showBackground: false, backgroundColor: Cesium.Color.RED, backgroundPadding: new Cesium.Cartesian2(10, 10), horizontalOrigin: Cesium.HorizontalOrigin.MIDDLE, verticalOrigin: Cesium.VerticalOrigin.TOP, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: new Cesium.Cartesian2(0, 8) }, billboardGraphics: { horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.CENTER, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: Cesium.Cartesian2.ZERO, alignedAxis: Cesium.Cartesian3.ZERO, color: Cesium.Color.WHITE, rotation: 0, scale: 1, 18, height: 18 } }); //三维地名服务，使用wtfs服务 wtfs.getTileUrl = function () { return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk=' + token; } // 三维图标服务 wtfs.getIcoUrl = function () { return tdtUrl + 'mapservice/GetIcon?id={id}&tk=' + token; } wtfs.initTDT([{ "x": 6, "y": 1, "level": 2, "boundBox": { "minX": 90, "minY": 0, "maxX": 135, "maxY": 45 } }, { "x": 7, "y": 1, "level": 2, "boundBox": { "minX": 135, "minY": 0, "maxX": 180, "maxY": 45 } }, { "x": 6, "y": 0, "level": 2, "boundBox": { "minX": 90, "minY": 45, "maxX": 135, "maxY": 90 } }, { "x": 7, "y": 0, "level": 2, "boundBox": { "minX": 135, "minY": 45, "maxX": 180, "maxY": 90 } }, { "x": 5, "y": 1, "level": 2, "boundBox": { "minX": 45, "minY": 0, "maxX": 90, "maxY": 45 } }, { "x": 4, "y": 1, "level": 2, "boundBox": { "minX": 0, "minY": 0, "maxX": 45, "maxY": 45 } }, { "x": 5, "y": 0, "level": 2, "boundBox": { "minX": 45, "minY": 45, "maxX": 90, "maxY": 90 } }, { "x": 4, "y": 0, "level": 2, "boundBox": { "minX": 0, "minY": 45, "maxX": 45, "maxY": 90 } }, { "x": 6, "y": 2, "level": 2, "boundBox": { "minX": 90, "minY": -45, "maxX": 135, "maxY": 0 } }, { "x": 6, "y": 3, "level": 2, "boundBox": { "minX": 90, "minY": -90, "maxX": 135, "maxY": -45 } }, { "x": 7, "y": 2, "level": 2, "boundBox": { "minX": 135, "minY": -45, "maxX": 180, "maxY": 0 } }, { "x": 5, "y": 2, "level": 2, "boundBox": { "minX": 45, "minY": -45, "maxX": 90, "maxY": 0 } }, { "x": 4, "y": 2, "level": 2, "boundBox": { "minX": 0, "minY": -45, "maxX": 45, "maxY": 0 } }, { "x": 3, "y": 1, "level": 2, "boundBox": { "minX": -45, "minY": 0, "maxX": 0, "maxY": 45 } }, { "x": 3, "y": 0, "level": 2, "boundBox": { "minX": -45, "minY": 45, "maxX": 0, "maxY": 90 } }, { "x": 2, "y": 0, "level": 2, "boundBox": { "minX": -90, "minY": 45, "maxX": -45, "maxY": 90 } }, { "x": 0, "y": 1, "level": 2, "boundBox": { "minX": -180, "minY": 0, "maxX": -135, "maxY": 45 } }, { "x": 1, "y": 0, "level": 2, "boundBox": { "minX": -135, "minY": 45, "maxX": -90, "maxY": 90 } }, { "x": 0, "y": 0, "level": 2, "boundBox": { "minX": -180, "minY": 45, "maxX": -135, "maxY": 90 } }]); </script> </body> </html>