在Vue和Cesium的集成环境中加载天地图的影像底图与注记，可以通过以下步骤实现：
- 创建地图容器：
在Vue组件的模板中，创建一个用于显示地图的div元素，并为其指定一个唯一的ID。例如：
<template>
<div class="map-box" id="cesiumContainer"></div>
</template>
- 初始化Cesium Viewer：
在Vue组件的mounted生命周期钩子中，初始化Cesium Viewer。可以设置一些初始参数，如是否显示位置查找工具、首页位置工具等。例如：
import { ref, onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer', {
// 设置初始参数
});
});
- 加载天地图影像底图与注记：
使用Cesium的WebMapTileServiceImageryProvider类来加载天地图的影像底图和注记。需要替换<your tianditu key url>为你自己在天地图官网申请的key对应的URL。例如：
// 创建天地图图层-影像底图
const tdImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: '<your tianditu key url>',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
layer: 'vec', // 影像底图图层
style: 'default',
format: 'tiles',
tileMatrixSetID: 'GoogleMapsCompatible',
maximumLevel: 18,
});
viewer.imageryLayers.addImageryProvider(tdImageryProvider);
// 创建天地图图层-影像注记（如果需要的话）
const tdAnnoImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
// 类似地设置注记图层的参数
});
viewer.imageryLayers.addImageryProvider(tdAnnoImageryProvider);
- 调整相机位置和视角（可选）：
根据需要，你可以调整相机的位置和视角来更好地展示地图。例如：
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度), // 设置相机位置
orientation: {
heading: Cesium.Math.toRadians(方向角度), // 设置相机方向角度（以弧度为单位）
pitch: Cesium.Math.toRadians(俯仰角度), // 设置相机俯仰角度（以弧度为单位）
roll: 0.0 // 设置相机翻滚角度（以弧度为单位），通常设置为0
}
});
- 添加其他功能和控制（可选）：
你可以根据需要添加其他功能和控制，如缩放控制、平移控制等。Cesium提供了丰富的API和插件来满足这些需求。
- 样式和布局调整：
最后，你可以通过CSS来调整地图容器的样式和布局，以确保地图在页面上正确显示。例如，设置地图容器的高度和宽度为100%。