demo:
<template>
<div id="cesiumContainer" style="width: 100vw; height: 100vh"></div>
</template>
<script setup>
// 设置 Cesium 访问 token（可选，用于 Bing 影像等）
const defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsxxxx1M2MyLTQ2OGEtOWY2Ny1jYWY3YTQwZWMwYmYiLCJpZCI6MTE3NDpYXQiOjE2NzYwOTYzNzd9.eSlnFruvV5Kk0xnGjFjJ3xAtYGvnKcKIEspCtinBmBY";
Cesium.Ion.defaultAccessToken = defaultAccessToken // 可留空或申请免费 token
import { onMounted, onUnmounted } from 'vue'
let viewer = null
const TDU_Key = '4b6b5fbxxxxx64e8d005fd09dae6'
const baseUrl = "http://t{s}.tianditu.com";
// 天地图矢量
let tiandiVec = new Cesium.UrlTemplateImageryProvider({
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"], // 实现子域（Subdomain）负载均衡，提升瓦片加载速度
url: baseUrl + "/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDU_Key,
minimumLevel: 1, //最小层级 设置可加载的最小瓦片层级
maximumLevel: 18, //最大层级 设置可加载的最大瓦片层级
});
// 天地图标注
let tiandiCva = new Cesium.UrlTemplateImageryProvider({
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
url: baseUrl + "/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + TDU_Key,
minimumLevel: 1, //最小层级
maximumLevel: 18, //最大层级
});
onMounted(() => {
// 初始化 Viewer
viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 隐藏默认组件
baseLayerPicker: false, // 隐藏默认组件
fullscreenButton: false, // 隐藏默认组件
geocoder: false,// 隐藏默认组件-位置搜索组件
homeButton: false,// 隐藏默认组件
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
sceneMode: Cesium.SceneMode.SCENE2D,
imageryProvider: false, // 禁用了默认的bing 地图
});
viewer.scene.backgroundColor = Cesium.Color.WHITE
viewer.imageryLayers.addImageryProvider(tiandiVec);
viewer.imageryLayers.addImageryProvider(tiandiCva);
// 设置缩放限制（对应天地图 level 3 ~ level 16）
const MIN_HEIGHT = 8000000; // 最小高度（最大缩小程度）→ 对应低 zoom level
const MAX_HEIGHT = 1000; // 最大高度（最大放大程度）→ 对应高 zoom level
// 监听相机变化
viewer.camera.changed.addEventListener(() => {
const height = viewer.camera.positionCartographic.height;
console.log('height',height)
if (height < MAX_HEIGHT) {
// 防止过度放大（高度太低）
viewer.camera.setView({
destination: Cesium.Cartesian3.fromRadians(
viewer.camera.positionCartographic.longitude,
viewer.camera.positionCartographic.latitude,
MAX_HEIGHT
)
});
} else if (height > MIN_HEIGHT) {
// 防止过度缩小（高度太高）
viewer.camera.setView({
destination: Cesium.Cartesian3.fromRadians(
viewer.camera.positionCartographic.longitude,
viewer.camera.positionCartographic.latitude,
MIN_HEIGHT
)
});
}
});
// 设置相机位置，确保视角定位到中国范围内
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1000000), // 经度，纬度，高度（米）- 这里以北京为例
orientation: {
heading: 0.0,
pitch: -1.5, // 在2D模式下，这个角度有助于正确显示
roll: 0.0
}
});
})
onUnmounted(() => {
if (viewer) {
viewer.destroy()
}
})
</script>
<style>
/* 确保容器有尺寸 */
#cesiumContainer {
width: 100%;
height: 100%;
}
.cesium-viewer {
width: 100%;
height: 100%;
}
</style>
地图加载地址:
export const TDU_Key = "4b6b5fb266xxx005fd09dae6"; // 天地图key
//在线天地图影像服务地址(墨卡托投影)
export const TDT_IMG_W =
"http://{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=" +
TDU_Key;
//在线天地图矢量地图服务(墨卡托投影)
export const TDT_VEC_W =
"http://{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=" +
TDU_Key;
//在线天地图影像中文标记服务(墨卡托投影)
export const TDT_CIA_W =
"http://{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=" +
TDU_Key;
//在线天地图矢量中文标记服务(墨卡托投影)
export const TDT_CVA_W =
"http://{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=" +
TDU_Key;
export function getProviderViewModels() {
const baseUrl = "http://t{s}.tianditu.com";
//天地图矢量
let tiandiVec = new Cesium.UrlTemplateImageryProvider({
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
url: baseUrl + "/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDU_Key,
minimumLevel: 0, //最小层级
maximumLevel: 18, //最大层级
});
//天地图影像
let tiandiImg = new Cesium.UrlTemplateImageryProvider({
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
url: baseUrl + "/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDU_Key,
minimumLevel: 0, //最小层级
maximumLevel: 18, //最大层级
});
//天地图标注
let tiandiCva = new Cesium.UrlTemplateImageryProvider({
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
url: baseUrl + "/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + TDU_Key,
minimumLevel: 0, //最小层级
maximumLevel: 18, //最大层级
});
let tiandiVecModel = new Cesium.ProviderViewModel({
name: "天地图",
category: "国内地图资源",
iconUrl: Cesium.buildModuleUrl(
"./Images/ImageryProviders/openStreetMap.png"
),
tooltip: "WMTS 地图服务",
creationFunction: function () {
return [tiandiVec, tiandiCva];
},
});
let tiandiImgModel = new Cesium.ProviderViewModel({
name: "天地图影像",
category: "国内地图资源",
iconUrl: Cesium.buildModuleUrl(
"./Images/ImageryProviders/esriWorldImagery.png"
),
tooltip: "WMTS 影像服务",
creationFunction: function () {
return [tiandiImg, tiandiCva];
},
});
return [tiandiVecModel, tiandiImgModel];
}
