3. Cesium使用并引用天地图图层

最新推荐文章于 2025-06-17 11:54:52 发布

Lanwarf-前端开发

最新推荐文章于 2025-06-17 11:54:52 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42038997/article/details/130889072

Cesium 专栏收录该内容

23 篇文章

订阅专栏

该代码段展示了如何在Vue应用中集成Cesium，并加载天地图的影像底图和注解图层。通过Cesium的WebMapTileServiceImageryProvider，设置天地图的WMTS服务URL，添加影像和注解的图层。同时，利用props传递cesiumAsset和tiandituTk参数，以及在组件卸载时销毁viewer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Cesium使用

<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup lang="ts" name="cesium">
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as Cesium from 'cesium'

import { cesiumProps } from "./props";

const props = defineProps(cesiumProps)

const viewer = ref()
onMounted(()=>{
  // 服务负载子域
  const subdomains = ['0','1','2','3','4','5','6','7'];
  Cesium.Ion.defaultAccessToken = props.cesiumAsset;

  viewer.value = new Cesium.Viewer('cesiumContainer',{
    shouldAnimate: true,
    animation: false,       //动画
    homeButton:false,       //home键
    geocoder:false,         //地址编码
    baseLayerPicker:false, //图层选择控件
    timeline:false,        //时间轴
    fullscreenButton:false, //全屏显示
    infoBox:false,         //点击要素之后浮窗
    sceneModePicker:false,  //投影方式  三维/二维
    navigationInstructionsInitiallyVisible:false, //导航指令
    navigationHelpButton:false,     //帮助信息
    selectionIndicator:false, // 选择
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //影像底图
      url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img" +
          "&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+props.tiandituTk,
      subdomains: subdomains,
      layer: "tdtImgLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
      show: true
    })
  });
  viewer.value._cesiumWidget._creditContainer.style.display = "none";  // 隐藏cesium ion
  viewer.value.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    //影像注记
    url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w" +
        "&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+props.tiandituTk,
    subdomains: subdomains,
    layer: "tdtCiaLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
  }));

  props.cesiumLoadCB(viewer.value)
})

onBeforeUnmount(()=> {
  viewer.value.destroy();
})

</script>

<style scoped>
#cesiumContainer{
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  /*overflow: hidden;*/
}
</style>

2. 天地图图层

2.1 加载影像底图

 imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //影像底图
      url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img" +
          "&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+props.tiandituTk,
      subdomains: subdomains,
      layer: "tdtImgLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
      show: true
    })

2.2 加载影像底标注

  viewer.value.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    //影像注记
    url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w" +
        "&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+props.tiandituTk,
    subdomains: subdomains,
    layer: "tdtCiaLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
  }));