vue3cesium加载天地图

原创已于 2024-02-20 15:42:43 修改 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

于 2024-02-20 14:46:07 首次发布

cesium 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过Cesium库集成天地图和Esri服务，展示了如何加载和管理不同地图提供者，以及设置地图样式和交互选项。

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

// 引入服务(推荐)
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
// 或者
npm i cesium-tdt --save
// 安装完将项目的根目录/node_modules/cesium-tdt/src/路径下的lib文件夹拷贝到自身项目的src下
// 引入
import './lib'

// 全部代码

<template>
  <main>
    <div style="width: 90vw;height: 90vh;" id="cesium"></div>
  </main>
</template>

<script setup>
import * as Cesium from 'cesium'
import {onMounted} from "vue";

// 服务负载子域
const subdomains=['0','1','2','3','4','5','6','7'];
// 天地图密钥
const tiandituTk='key';
// 加载地图
const esri=new Cesium.ArcGisMapServerImageryProvider({
  url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
// // 加载天地图
const tianditu=new Cesium.WebMapTileServiceImageryProvider({
  //影像底图
  url:"http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
      "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
      "&style=default&format=tiles&tk=" +tiandituTk,
  layer: "tdtImg_c",
  style: "default",
  format: "tiles",
  tileMatrixSetID: "c",
  subdomains: subdomains,
  tilingScheme: new Cesium.GeographicTilingScheme(),
  tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
  maximumLevel: 50,
  show: false
})
const init =async () => {
  // cesium密钥
  Cesium.Ion.defaultAccessToken = 'key'
  window.viewer = new Cesium.Viewer('cesium', {
    baseLayerPicker: false, // 加载新地图时就地图隐藏,否则会影响新地图的加载
    // imageryProvider:esri, // 加载地图
    imageryProvider:tianditu, // 加载天地图
    animation: true, // 动画小组件
    timeline: false, // 时间轴
    fullscreenButton: false, // 全屏
    vrButton: false, // va模式
    geocoder: true, //是否显示地名查找控件
    homeButton: false, // 首页按钮
    infoBox: false, // 禁用沙箱，解决控制台报错
    sceneModePicker: false, // 2D3D模式切换
    scene3DOnly: true, // 3D场景
    selectionIndicator: false, // 选取指示器
    navigationHelpButton: false, // 帮助提示
    navigationInstructionsInitiallyVisible: false, // 导航说明
    // 加载3D地形数据
    terrainProvider: new Cesium.CesiumTerrainProvider({
      url: new Cesium.IonResource.fromAssetId(1),
      requestWaterMask: true, // 水面
      requestVertexNormals: true, // 山脉
    }),


  })
  window.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 420; // 最小距离
  // window.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 300; // 最大距离

  // 加载其他地图
  window.viewer.scene.primitives.add(
      await new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188)
      })
  );

  window.viewer.scene.postProcessStages.fxaa.enabled = false;
  window.viewer._cesiumWidget._creditContainer.style.display = 'none'
  window.viewer.scene.globe.enableLighting = false;

  window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    //影像注记
    url: "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default&format=tiles&tk=" +tiandituTk,
    layer: "tdtImg_c",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "c",
    subdomains: subdomains,
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
    maximumLevel: 50,
    show: false
  }));

  // 亮度设置
  let stages = window.viewer.scene.postProcessStages;
  window.viewer.scene.brightness =  viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
  window.viewer.scene.brightness.enabled = true;
  window.viewer.scene.brightness.uniforms.brightness = Number(1);
}


onMounted(()=>{
  init()
})
</script>

<style scoped></style>