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

Cesium是默认加载了微软公司的Bing地图，并提供了BingMapslmageryProvider类来加载Bing地图。也就是说，在创建Viewer时，如果不指定lmageryProvider类就默认加载Bing地图。
在示例中详细介绍如何通过lmageryProvider类加载天地图，并使用Cesium的WebMapTileServiceImageryProvider类来调用天地图底图服务。（调用天地图底图服务需要在天地图官网免费申请key）。

1.创建地图容器

<template><!-- vue+cesium加载天地图 --><div class="map-box" id="cesiumContainer"></div>
</template>
<script setup>import {ref,onMounted} from 'vue'import * as Cesium from 'cesium'onMounted(() => {// 默认加载微软公司Bing地图const viewer = new Cesium.Viewer('cesiumContainer', {geocoder: true, // 是否显示位置查找工具（true表示是，false表示否）homeButton: true, // 是否显示首页位置工具sceneModePicker: true, //是否显示视角模式切换工具baseLayerPicker: false, //是否显示默认图层选择工具navigationHelpButton: false, //是否显示导航帮助工具animation: true, //是否显示动画工具timeline: false, //是否显示时间轴工具fullscreenButton: true, //是否显示全屏按钮工具})// ...});
</script>
<style scoped>.map-box {height: 100%;width: 100%;}
</style>

2.叠加天地图影像底图与矢量注记关键代码

// 创建天地图图层-影像底图
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,
});
// 创建天地图图层-影像注记
const tdImageryProviderAnno = new Cesium.WebMapTileServiceImageryProvider({url: "<your tianditu key url>",subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'cva',style: 'default',format: 'tiles',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 18,
});// 将天地图图层添加到Cesium Viewer中
viewer.imageryLayers.addImageryProvider(tdImageryProvider);
viewer.imageryLayers.addImageryProvider(tdImageryProviderAnno);