使用超图SuperMap iClient3D for Cesium 2025

项目中使用vue3 + cesium开发，要切换使用超图iserver发布的电子地图、高德在线影像、百度在线影像，天地图在线影像，arcgis server发布的地图服务，

先使用cesium 1.125版本加载了百度，高德，天地图，进行了纠偏，但在集成超图iserver发布的电子地图时遇到问题，不出来，或者也只有地球上的杂乱的图片。

据查，原生cesium加载 超图服务，只可以是标准wmts, rest地图服务，对于超图本身服务不可以。

所以，换超图的cesium,也就是： 这里

SuperMap iClient3D for Cesium 2025

官方入门用法：https://support.supermap.com/DataWarehouse/WebDocHelp/iServer/webgl/web/introduction/3DforWebGL.html

最终效果：

步骤：

1、下载的开发包中找到Cesium 文件夹，解压到项目public 目录中，并在index.html 中添加css,  cesium.js 如：

<link href="./public/Cesium/Widgets/widgets.css" rel="stylesheet">
<script type="text/javascript" src="./public/Cesium/Cesium.js"></script>

2、demo.vue代码：

<template>
  <div id="cesiumContainer" style="height:800px;width:1200px"></div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';

onMounted(() => {
  Cesium.Credential.CREDENTIAL = new Cesium.Credential(
      "8ab730c8903************360601d402ad",
      "token");
  var viewer = new Cesium.Viewer('cesiumContainer');

  var labelImagery = new Cesium.TiandituImageryProvider({
    mapStyle: Cesium.TiandituMapsStyle.CIA_C,//天地图全球中文注记服务
    token: '1f74***********0d47c' //由天地图官网申请的密钥
  });
  viewer.imageryLayers.addImageryProvider(labelImagery);

  let imageryLayers =viewer.imageryLayers;
  
  //超图的电子地图
  let provider_mec =new Cesium.SuperMapImageryProvider({
    url :"http://10.5*****55:8885/gtis/map/rest/4fb14828a07f4888b11c7446a57430df/rest/maps/dianziditu_zhuji"});

  let imagery_mec =imageryLayers.addImageryProvider(provider_mec);
  viewer.zoomTo(imagery_mec);

  // viewer.entities.add({
  //   name: "柱子",
  //   position: Cesium.Cartesian3.fromDegrees(116.391305, 39.905530),
  //   cylinder: {
  //     length: 100,          // 高度（单位：米）
  //     topRadius: 0.1,       // 顶部半径（直径 0.2 米 → 半径 0.1 米）
  //     bottomRadius: 0.1,    // 底部半径
  //     material: Cesium.Color.WHITE,
  //     outline: true,        // 显示边框（可选）
  //     outlineColor: Cesium.Color.BLACK, // 边框颜色（可选）
  //   }
  // });
  // viewer.zoomTo(viewer.entities);

});


</script>



<style scoped>
#map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

:deep(.cesium-viewer-bottom) {
  display: none;
}
</style>