1. Cesium使用
<template>
<div>
<div id="cesiumContainer"></div>
</div>
</template>
<script setup lang="ts" name="cesium">
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as Cesium from 'cesium'
import { cesiumProps } from "./props";
const props = defineProps(cesiumProps)
const viewer = ref()
onMounted(()=>{
// 服务负载子域
const subdomains = ['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = props.cesiumAsset;
viewer.value = new Cesium.Viewer('cesiumContainer',{
shouldAnimate: true,
animation: false, //动画
homeButton:false, //home键
geocoder:false, //地址编码
baseLayerPicker:false, //图层选择控件
timeline:false, //时间轴
fullscreenButton:false, //全屏显示
infoBox:false, //点击要素之后浮窗
sceneModePicker:false, //投影方式 三维/二维
navigationInstructionsInitiallyVisible:false, //导航指令
navigationHelpButton:false, //帮助信息
selectionIndicator:false, // 选择
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/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="+props.tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
})
});
viewer.value._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
viewer.value.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/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="+props.tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}));
props.cesiumLoadCB(viewer.value)
})
onBeforeUnmount(()=> {
viewer.value.destroy();
})
</script>
<style scoped>
#cesiumContainer{
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
/*overflow: hidden;*/
}
</style>
2. 天地图图层
2.1 加载影像底图
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/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="+props.tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
})
2.2 加载影像底标注
viewer.value.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/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="+props.tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}));