<!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>