C1 ——cesium加载天地图瓦片

记录找的时候不好找
javascript 复制代码
<template>
  <div id="cesiumContainer"> </div>
</template>

<script>
export default {
  name: 'CesiumViewer',
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer =null;
    }
  },
  methods: {
    initViewer() {
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false,
        timeline: false,
        baseLayerPicker: false,
        geocoder: false,
        imageryProvider: false, // 禁用默认底图
        terrainProvider: undefined, // 禁用默认的 ion 地形层（若不需要地形可加）
      });
      this.viewer = viewer;
      viewer._cesiumWidget._creditContainer.style.display = "none";
      viewer.imageryLayers.addImageryProvider(
        new Cesium.TileMapServiceImageryProvider({
          url: "../../src/lib/Cesium/Assets/Textures/NaturalEarthII", // 本地瓦片路径模板
          fileExtension: "jpg", // 瓦片图片格式
          maximumLevel: 2, // 瓦片最大级别
          minimumLevel: 0, // 瓦片最小级别
        })
      );

      this.addTiandituLayer();
      // 设置初始视角到中国
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 15000000.0)
      });



    },


    addTiandituLayer() {
      try {
        const tiandituToken = "b3d91562aff4a392aeaec0fe2661a66e000";
        // 方式一UTL
        const imgProvider = new Cesium.UrlTemplateImageryProvider({
          url: `https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tiandituToken}`,
          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
          maximumLevel: 18,
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
        });

        const ciaProvider = new Cesium.UrlTemplateImageryProvider({
          url: `https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${tiandituToken}`,
          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
          maximumLevel: 18,
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
        });

        // 方式二WMTS
        // const imgProvider = new Cesium.WebMapTileServiceImageryProvider({
        //       url: `https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${tiandituToken}`,
        //       subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        //       layer: 'img',
        //       style: 'default',
        //       format: 'tiles',
        //       tileMatrixSetID: 'w',
        //       maximumLevel: 18
        //     });

        //     // 注记图层
        //     const ciaProvider = new Cesium.WebMapTileServiceImageryProvider({
        //       url: `https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=${tiandituToken}`,
        //       subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        //       layer: 'cia',
        //       style: 'default',
        //       format: 'tiles',
        //       tileMatrixSetID: 'w',
        //       maximumLevel: 18
        //     });


        // 添加到地图
        this.viewer.imageryLayers.addImageryProvider(imgProvider);
        this.viewer.imageryLayers.addImageryProvider(ciaProvider);

        console.log('天地图图层添加成功');

      } catch (error) {
        console.error('添加天地图图层失败:', error);
      }
    }

  }
}
</script>

<style scoped>
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>