Cesium加载地形

news2025/1/13 6:40:18

Cesium的地形来源大致可以分为两种，一种是由Cesium官方提供的数据源，一种是第三方的数据源，官方源依赖于Cesium Assets，如果设置了AccessToken后，就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainProvider.fromIonAssetId，AssetId来自于你自己的Assets库中的id。另外一种则可以通过CesiumTerrainProvider.fromUrl 来实现加载第三方的地形服务。

下面的代码是从上一章节中的代码基础上实现的，集成了下拉选择地形服务的功能。

代码中的各个key，不再移除了，方便诸位复现功能，如果需要正式发布，请自行替换，各个key随时可能到期或被清理。

需要注意的是，对于第三方地形服务部分，我是使用了自己发布的地形服务，如何制作发布，网上有很多教程，一般来说发布后的地址是这样的，末尾以layer.json结束，但是在cesium中使用的时候，需要去掉最后的layer.json，因为Cesium会自动补充。

http://127.0.0.1:9004/tile/terrain/2zxJPMEE/layer.json

我使用的是cesiumlab发布的，还有一个labtoken参数，其实完整的是【…2zxJPMEE/layer.json?labtoken=xx】，这种情况，也是要去掉layer.json后再使用。
还需要注意，在cesium 1.104版本后，地形构造器改为了使用静态方法来获取，而且是异步的，具体的可查看代码中的switchTerrain 方法

<template>
  <div>
    <div
        ref="cesiumContainer"
        id="cesiumContainer"
        class="cesium-container"
        style="width: 100%; height: 100vh;"
    >
      
    </div>
    <!--地形切换 -->
    <div class="layer-switcher">
      <label for="baseMap">选择底图:</label>
      <select id="baseMap" v-model="selectedBaseMap" @change="switchBaseMap">
        <option value="cesium">Cesium 默认</option>
        <option value="tianditu">天地图</option>
        <option value="gaode">高德地图</option>
        <option value="baidu">百度地图</option>
      </select>
    </div>

    <!-- 地形切换 -->
    <div class="terrain-switcher">
      <label for="terrain">选择地形:</label>
      <select id="terrain" v-model="selectedTerrain" @change="switchTerrain">
        <option value="none">无地形</option>
        <option value="cesium">Cesium 官方地形</option>
        <option value="custom">第三方/自定义地形</option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import {
  BingMapsImageryProvider,
  BingMapsStyle,
  Cartesian3,
  Color,
  HeadingPitchRange,
  Ion,
  Viewer,
  EllipsoidTerrainProvider,
  CesiumTerrainProvider
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import CustomBaiduImageryProvider from "../cesium-extensions/BaiduImageryProvider.js";
import { AMapImageryProvider,BaiduImageryProvider,TdtImageryProvider }  from '@cesium-china/cesium-map'
import * as Cesium from "cesium";

const cesiumContainer = ref(null)
const viewer = ref(null)
const selectedBaseMap = ref('cesium')
// 地形下拉框选项
const selectedTerrain = ref('none');

// 定义各个底图的 ImageryProvider
const imageryProviders = reactive({
  cesium: [new BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    key: 'Rrke5RPh9hmJ32QZoFzP~_KI12m_pz_KbnGoZFmxVFg~Ai7_QidoqYPrWY7Kf1-GR8g9tY5C7BtbjAxOYpeoJNL4Hj66qSgWNOEAZSAlJKFC', // Cesium默认使用Bing Maps，需要替换为你的密钥
    mapStyle: BingMapsStyle.AERIAL,
  })],
  tianditu: [new TdtImageryProvider({
    style: 'vec', //style: vec、cva、img、cia、ter 
    key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请
  }),new TdtImageryProvider({
    style: 'cva', //style: vec、cva、img、cia、ter 
    key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请
  })],
  gaode: [new AMapImageryProvider({
    style: 'img', // style: img、elec、cva
    crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
  }),
    new AMapImageryProvider({
    style: 'cva', // style: img、elec、cva
    crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
  })],
  // 使用cesium-map 组件实现
  /*baidu: [new BaiduImageryProvider({
    url:"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
    style: 'normal', // style: img、vec、normal、dark
    crs: 'WGS84' // 使用84坐标系，默认为：BD09
  })],*/
  // 自定义百度地图提供器
  baidu:[new CustomBaiduImageryProvider()]
})


onMounted(() => {
  // 设置 Cesium Ion 访问令牌
  Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNmQ5NDYyNi1lZTdhLTRiYTItODFiZi1mYzNiYWNjNDFjMzgiLCJpZCI6NTk3MTIsImlhdCI6MTY2MDE4MDAyNX0.bDTaHEah0hRjUyJWz0hyxIL0Fg63awPXV26OmQ5MCdM'; // 替换为你的访问令牌

  viewer.value = new Viewer('cesiumContainer', {
    animation: false, // 移除动画控件
    timeline: false, // 移除时间轴控件
    geocoder: false, // 移除地理编码控件
    homeButton: false, // 移除主页按钮
    sceneModePicker: false, // 移除场景模式选择器
    selectionIndicator: false, // 移除选择指示器
    fullscreenButton: false, // 移除全屏按钮
    vrButton: false, // 移除 VR 按钮
    // 默认不设置 terrainProvider，即使用椭球体
    terrainProvider: new EllipsoidTerrainProvider(),// 默认无地形
  });

  // 添加默认实体或其他初始化操作
  const tiananmenEntity = viewer.value.entities.add({
    position: Cartesian3.fromDegrees(116.397128, 39.916527),
    point: { pixelSize: 10, color: Color.RED },
    name: '天安门',
  })
  viewer.value.flyTo(tiananmenEntity,{
    duration: 3, // 飞行时间，单位秒
    offset: new HeadingPitchRange(
        0, // Heading，航向角，0表示正北方向
        Cesium.Math.toRadians(-80), // Pitch，俯仰角，负值表示向下俯视
        405000 // Range，距离目标的距离，增加此值以提高视角高度
    )
  })
});
const switchBaseMap = () => {
  // 移除当前的底图图层
  if (viewer.value && viewer.value.imageryLayers.length > 0) {
    viewer.value.imageryLayers.removeAll()
  }

  let newProviders = imageryProviders[selectedBaseMap.value] || [];
  
  for (let i = 0; i < newProviders.length; i++) {
    viewer.value.imageryLayers.addImageryProvider(newProviders[i])
  }
  
}

// ------------------ 方法：地形切换 -------------------
const switchTerrain = async () => {
  if (!viewer.value) return;

  if (selectedTerrain.value === 'none') {
    viewer.value.terrainProvider = new EllipsoidTerrainProvider();
  } else if (selectedTerrain.value === 'cesium') {
    // 从 Ion assetId 加载官方地形
    viewer.value.terrainProvider = await CesiumTerrainProvider.fromIonAssetId(1, {
      // requestVertexNormals: true,
      // requestWaterMask: true,
    });
  } else if (selectedTerrain.value === 'custom') {
    // 从自定义 URL 加载
    viewer.value.terrainProvider = await CesiumTerrainProvider.fromUrl(
        'http://127.0.0.1:9004/tile/terrain/2zxJPMEE?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo',
        {
          requestVertexNormals: false,
          // requestWaterMask: true,
        }
    )
  }
};

</script>

<style>
.cesium-container {
  width: 100%;
  height: 100%;
  position: relative;
}
/* 隐藏页面底部的 Cesium logo 和数据归属 */
.cesium-viewer .cesium-widget-credits {
  display: none !important; /* 隐藏整个 Cesium 控件 */
}

/* 隐藏 右上角的 Imagery 和 Navigation instructions */
.cesium-viewer .cesium-viewer-toolbar {
  display: none !important; /* 隐藏工具栏 */
}

.layer-switcher {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(42, 42, 42, 0.8);
  padding: 10px;
  border-radius: 4px;
  color: white;
  z-index: 1;
}

.layer-switcher select {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 2px;
  border: none;
}

/* 地形切换器样式，可以放在旁边或者下方 */
.terrain-switcher {
  position: absolute;
  top: 60px;
  left: 10px;
  background: rgba(42, 42, 42, 0.8);
  padding: 10px;
  border-radius: 4px;
  color: white;
  z-index: 10;
}

.terrain-switcher select {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 2px;
  border: none;
}
</style>