<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
npm i cesium-tdt --save
import './lib'
<template>
<main>
<div style="width: 90vw;height: 90vh;" id="cesium"></div>
</main>
</template>
<script setup>
import * as Cesium from 'cesium'
import {onMounted} from "vue";
const subdomains=['0','1','2','3','4','5','6','7'];
const tiandituTk='key';
const esri=new Cesium.ArcGisMapServerImageryProvider({
url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
const tianditu=new Cesium.WebMapTileServiceImageryProvider({
url:"http://{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=" +tiandituTk,
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
})
const init =async () => {
Cesium.Ion.defaultAccessToken = 'key'
window.viewer = new Cesium.Viewer('cesium', {
baseLayerPicker: false,
imageryProvider:tianditu,
animation: true,
timeline: false,
fullscreenButton: false,
vrButton: false,
geocoder: true,
homeButton: false,
infoBox: false,
sceneModePicker: false,
scene3DOnly: true,
selectionIndicator: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
terrainProvider: new Cesium.CesiumTerrainProvider({
url: new Cesium.IonResource.fromAssetId(1),
requestWaterMask: true,
requestVertexNormals: true,
}),
})
window.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 420;
window.viewer.scene.primitives.add(
await new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(96188)
})
);
window.viewer.scene.postProcessStages.fxaa.enabled = false;
window.viewer._cesiumWidget._creditContainer.style.display = 'none'
window.viewer.scene.globe.enableLighting = false;
window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://{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=" +tiandituTk,
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
}));
let stages = window.viewer.scene.postProcessStages;
window.viewer.scene.brightness = viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
window.viewer.scene.brightness.enabled = true;
window.viewer.scene.brightness.uniforms.brightness = Number(1);
}
onMounted(()=>{
init()
})
</script>
<style scoped></style>