mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 01:04:17 +00:00
150 lines
7.9 KiB
HTML
150 lines
7.9 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
<script type="text/javascript">
|
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNDljNWFmZC03MzRlLTRiMDMtYWIwMi00Yjk4YWQ4NzQwZGEiLCJpZCI6MjU5LCJpYXQiOjE3NTEzNzkyMzR9.OTqPNs3UGNnT1LYkPTavV80wN8Es_YphpJgQcpdnqWc'
|
|
const viewer = new Cesium.Viewer('map', {});
|
|
// 开启帧率
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
// 清除默认底图
|
|
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
|
|
|
|
// 清除默认地形
|
|
viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
|
|
|
|
// var tiandituMapStyle = {
|
|
// "vec_c": { "name": "矢量底图", "value": "vec_c", "src": "经纬度投影" },
|
|
// "vec_w": { "name": "矢量底图", "value": "vec_w", "src": "球面墨卡托投影" },
|
|
// "cva_c": { "name": "矢量注记", "value": "cva_c", "src": "经纬度投影" },
|
|
// "cva_w": { "name": "矢量注记", "value": "cva_w", "src": "球面墨卡托投影" },
|
|
// "img_c": { "name": "影像底图", "value": "img_c", "src": "经纬度投影" },
|
|
// "img_w": { "name": "影像底图", "value": "img_w", "src": "球面墨卡托投影" },
|
|
// "cia_c": { "name": "影像注记", "value": "cia_c", "src": "经纬度投影" },
|
|
// "cia_w": { "name": "影像注记", "value": "cia_w", "src": "球面墨卡托投影" },
|
|
// "ter_c": { "name": "地形晕渲", "value": "ter_c", "src": "经纬度投影" },
|
|
// "ter_w": { "name": "地形晕渲", "value": "ter_w", "src": "球面墨卡托投影" },
|
|
// "cta_c": { "name": "地形注记", "value": "cta_c", "src": "经纬度投影" },
|
|
// "cta_w": { "name": "地形注记", "value": "cta_w", "src": "球面墨卡托投影" },
|
|
// "ibo_c": { "name": "全球境界", "value": "ibo_c", "src": "经纬度投影" },
|
|
// "ibo_w": { "name": "全球境界", "value": "ibo_w", "src": "球面墨卡托投影" },
|
|
// "eva_c": { "name": "矢量英文注记", "value": "eva_c", "src": "经纬度投影" },
|
|
// "eva_w": { "name": "矢量英文注记", "value": "eva_w", "src": "球面墨卡托投影" },
|
|
// "eia_c": { "name": "影像英文注记", "value": "eia_c", "src": "经纬度投影" },
|
|
// "eia_w": { "name": "影像英文注记", "value": "eia_w", "src": "球面墨卡托投影" },
|
|
// };
|
|
|
|
// const apiList = [
|
|
// "063111d797f8ecb86057cc24eb7adece",
|
|
// "460868332a21df2ab4b23837cf21a4d3",
|
|
// "a5c2f9116f9a6ea67b9451688ab4c684",
|
|
// "59bb81fc93a631c1b0ff76fa0a890d0e",
|
|
// "3c15fa38b35941655479dd7ebef54249",
|
|
// "6af0d1fad7c905bc075a95c134574b0a",
|
|
// "8209981ecfdeb58c92ea53bf28270710",
|
|
// "cd3ddc577e533a44fef6e4c777a7fc1c",
|
|
// "9d4788e2a8d899ae3b51c15a5c78313c",
|
|
// "c3374886fb2fdaa26b2fa90a8b71f213",
|
|
// "7ecb45d5aef7a7aba4630b1bbdb05c04",
|
|
// "91b0de7f1b43f13b80757ecf2034571d",
|
|
// "2b549f8a90167f1288915337d9006a33",
|
|
// "ac1a705aac2454706bf1210e01f526fb",
|
|
// "f23e960273e690092ff44557f7a2caba",
|
|
// "025f0a19d7cc5792595546e2ef96458e",
|
|
// "d1b859ea6240027e759b1302d08ea9b2",
|
|
// "3e63502d19525d4d02d0df69ea944e6c",
|
|
// "126c5c491a565b494402f9472357489f",
|
|
// "97eed3e13bab6875013f6f84f93a7c98",
|
|
// "c1e7bf15c41cc47dc8889ebe2399ced4",
|
|
// "0720b29fb8b21b7a3d7398a666ca9544",
|
|
// "3210472dffc769d8d7b0cb16021b613a",
|
|
// "6e926d184ce6fbb3374bd69fbba8b587",
|
|
// "0c4f098f5fa4e730317c7629fc48901e",
|
|
// "74a3104caec24999d1954d0d531c0e80",
|
|
// "98a17c708ec8e78cdbb620864486c410",
|
|
// "948a54324b87f379959965593282d0c3"
|
|
// ]
|
|
// let apiKey = apiList[Math.floor(Math.random() * apiList.length)];
|
|
let ramdon = parseInt(Math.random() * (3 - 0 + 1) + 0, 10);
|
|
|
|
var token = 'bcc62222fc634ec736589c483de933e6';
|
|
var maxLevel = 18;
|
|
|
|
// ------------------------ wmts方式加载4326经纬度------------------------------------------
|
|
var _layer = 'vec';
|
|
var matrixIds = new Array(maxLevel);
|
|
for (var z = 0; z <= maxLevel; z++) {
|
|
matrixIds[z] = (z + 1).toString();
|
|
}
|
|
var _url = 'http://t{s}.tianditu.gov.cn/' + _layer + '_c/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=' + _layer + '&style={style}&tilerow={TileRow}&tilecol={TileCol}&tilematrixset={TileMatrixSet}&format=tiles&tk=' + token;
|
|
var wmts = new Cesium.WebMapTileServiceImageryProvider({
|
|
url: _url,
|
|
layer: _layer,
|
|
credit: 'opts.credit',
|
|
style: 'default',
|
|
format: 'tiles',
|
|
tileMatrixSetID: 'c',
|
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
|
tileMatrixLabels: matrixIds,
|
|
tilingScheme: new Cesium.GeographicTilingScheme(), //WebMercatorTilingScheme、GeographicTilingScheme
|
|
maximumLevel: maxLevel
|
|
});
|
|
viewer.imageryLayers.addImageryProvider(wmts)
|
|
|
|
|
|
// ------------------------ wmts方式加载带投影的------------------------------------------
|
|
// var _layer = 'img';
|
|
// var _url = 'http://t{s}.tianditu.gov.cn/' + _layer + '_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=' + _layer + '&style={style}&tilerow={TileRow}&tilecol={TileCol}&tilematrixset={TileMatrixSet}&format=tiles&tk=' + token;
|
|
// var matrixIds = new Array(maxLevel);
|
|
// for (var z = 0; z <= maxLevel; z++) {
|
|
// matrixIds[z] = (z).toString();
|
|
// }
|
|
// var wmts = new Cesium.WebMapTileServiceImageryProvider({
|
|
// url: _url,
|
|
// layer: _layer,
|
|
// style: 'default',
|
|
// credit: 'opts.credit',
|
|
// format: 'tiles',
|
|
// tileMatrixSetID: 'w',
|
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
|
// tileMatrixLabels: matrixIds,
|
|
// tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
// maximumLevel: maxLevel
|
|
// });
|
|
// viewer.imageryLayers.addImageryProvider(wmts)
|
|
|
|
// ------------------------ xyz方式加载带投影的------------------------------------------
|
|
// var _layer = 'ter';
|
|
// var _url = 'http://t{s}.tianditu.gov.cn/DataServer?T=' + _layer + '_w&x={x}&y={y}&l={z}&tk=' + token;
|
|
// var xyz = new Cesium.UrlTemplateImageryProvider({
|
|
// url: _url,
|
|
// credit: 'opts.credit',
|
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
|
// tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|
// maximumLevel: maxLevel
|
|
// });
|
|
// viewer.imageryLayers.addImageryProvider(xyz)
|
|
|
|
// ------------------------ xyz方式wmts地址------------------------------------------
|
|
// var xyz = new Cesium.UrlTemplateImageryProvider({
|
|
// url: "https://t" + ramdon + ".tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + token,
|
|
// })
|
|
// viewer.imageryLayers.addImageryProvider(xyz)
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |