vue+cesium之加载天地图影像底图与注记

在Vue和Cesium的集成环境中加载天地图的影像底图与注记，可以通过以下步骤实现：

1. 创建地图容器：

在Vue组件的模板中，创建一个用于显示地图的div元素，并为其指定一个唯一的ID。例如：

<template>
  <div class="map-box" id="cesiumContainer"></div>
</template>

2. 初始化Cesium Viewer：

在Vue组件的mounted生命周期钩子中，初始化Cesium Viewer。可以设置一些初始参数，如是否显示位置查找工具、首页位置工具等。例如：

import { ref, onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 设置初始参数
  });
});

3. 加载天地图影像底图与注记：

使用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);

4. 调整相机位置和视角（可选）：

根据需要，你可以调整相机的位置和视角来更好地展示地图。例如：

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度), // 设置相机位置
  orientation: {
    heading: Cesium.Math.toRadians(方向角度), // 设置相机方向角度（以弧度为单位）
    pitch: Cesium.Math.toRadians(俯仰角度), // 设置相机俯仰角度（以弧度为单位）
    roll: 0.0 // 设置相机翻滚角度（以弧度为单位），通常设置为0
  }
});

5. 添加其他功能和控制（可选）：

你可以根据需要添加其他功能和控制，如缩放控制、平移控制等。Cesium提供了丰富的API和插件来满足这些需求。

6. 样式和布局调整：

最后，你可以通过CSS来调整地图容器的样式和布局，以确保地图在页面上正确显示。例如，设置地图容器的高度和宽度为100%。