大趙傳奇

項目中使用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>