<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>模型矩阵</title> <link href="src/Cesium/Widgets/widgets.css" rel="stylesheet" /> <script src="src/Cesium/Cesium.js"></script> <script src="src/dat.gui.min.js"></script> <script src="src/cesium-transform.js"></script> <!--<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>--> <style> * { margin: 0; padding: 0; } html, body, #viewer-container { width: 100%; height: 100%; overflow: hidden; } #btn { position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div id="viewer-container"></div> <script> // init function initPage() { //gltf错误处理 var fixGltf = function (gltf) { if (!gltf.extensionsUsed) { return; } var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl'); var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl'); // 中招了。。 if (v !== -1) { gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl'); gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl'); gltf.extensions = gltf.extensions || {}; gltf.extensions['KHR_techniques_webgl'] = {}; gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs; gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders; gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques; var techniques = gltf.extensions['KHR_techniques_webgl'].techniques; gltf.materials.forEach(function (mat, index) { gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values; gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl']; var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl']; for (var value in vtxfMaterialExtension.values) { var us = techniques[vtxfMaterialExtension.technique].uniforms; for (var key in us) { if (us[key] === value) { vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value]; delete vtxfMaterialExtension.values[value]; break; } } }; }); techniques.forEach(function (t) { for (var attribute in t.attributes) { var name = t.attributes[attribute]; t.attributes[attribute] = t.parameters[name]; }; for (var uniform in t.uniforms) { var name = t.uniforms[uniform]; t.uniforms[uniform] = t.parameters[name]; }; }); } } Object.defineProperties(Cesium.Model.prototype, { _cachedGltf: { set: function (value) { this._vtxf_cachedGltf = value; if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) { fixGltf(this._vtxf_cachedGltf._gltf); } }, get: function () { return this._vtxf_cachedGltf; } } }); //结束gltf错误处理 //天地图开始 // 服务域名 var tdtUrl = 'https://t{s}.tianditu.gov.cn/'; // 服务负载子域 var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']; var tdt_tk = ""; //天地图URL配置 //在线天地图影像服务地址(墨卡托投影) var TDT_IMG_W = "https://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //在线天地图矢量地图服务(墨卡托投影) var TDT_VEC_W = "https://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //在线天地图影像中文标记服务(墨卡托投影) var TDT_CIA_W = "https://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default.jpg&tk=" + tdt_tk; //在线天地图矢量中文标记服务(墨卡托投影) var TDT_CVA_W = "https://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default.jpg&tk=" + tdt_tk; //在线天地图影像服务地址(经纬度) var TDT_IMG_C = "https://t{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //在线天地图矢量地图服务(经纬度) var TDT_VEC_C = "https://t{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //在线天地图影像中文标记服务(经纬度) var TDT_CIA_C = "https://t{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //在线天地图矢量中文标记服务(经纬度) var TDT_CVA_C = "https://t{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + tdt_tk; //天地图结束 // 切换自己的token Cesium.Ion.defaultAccessToken = '..rk-n3tDfpFCaqLvsklRWMI9z5TZhjrv9VfUbMjpWyA'; // 初始化 viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true, vrButton: true, geocoder: false, homeButton: false, sceneModePicker: false, baseLayerPicker: true, navigationHelpButton: false, animation: false, timeline: false, fullscreenButton: true, // 天地图影像服务（经纬度） imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: "tdtImg_c", style: "default", format: "tiles", tileMatrixSetID: "c", subdomains: subdomains, tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"], maximumLevel: 50, show: false }) //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口 //imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb', // layer: 'img', // style: 'default', // tileMatrixSetID: 'w', // format: 'tiles', // maximumLevel: 18 //}) }); //天地图开始 // 天地图影像中文标记服务 //viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileSericeImageryProvider({ // url: TDT_CIA_C, // layer: "tdtImg_c", // style: "default", // format: "tiles", // tileMatrixSetID: "c", // subdomains: subdomains, // tilingScheme: new Cesium.GeographicTilingScheme(), // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"], // maximumLevel: 50, // show: false //})); // 叠加影像服务 var imgMap = new Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdt_tk, 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=' + tdt_tk, 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 url11 = tdtUrl.replace('{s}', subdomains[i]) + 'DEM90M/DataServer?T=elv_c&tk=' + tdt_tk; // terrainUrls.push(url11); //} //var provider = new Cesium.GeoTerrainProvider({ // urls: terrainUrls //}); //viewer.terrainProvider = provider; //天地图结束 // 去掉logo viewer._cesiumWidget._creditContainer.style.display = "none"; // 抗锯齿 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); // tilset地址 const url = 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json' //const url = 'http://127.0.0.1:8080/75343/tileset.json' // 基础参数 let tileModelParam = { url: url, 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 }) } // load window.onload = function () { initPage() } </script> </body> </html>