項目中使用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>
浙公網安備 33010602011771號