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

3.示例效果图