Uncaught (in promise) SyntaxError
: Unexpected token '<', "<!doctype "
... is not valid JSON
at JSON
.parse (<anonymous>)
at Resource
.js
:1180
:17
localhost/
:1 Uncaught (in promise) SyntaxError
: Unexpected token '<', "<!doctype "
... is not valid JSON
at JSON
.parse (<anonymous>)
at Resource
.js
:1180
:17
CesiumWidget
.js
:962 An error occurred while rendering
. Rendering has stopped
.
InvalidStateError
: The source image could not be decoded
.
InvalidStateError
: The source image could not be decoded
.
CesiumWidget
.showErrorPanel @
CesiumWidget
.js
:962
localhost/
:1 Uncaught (in promise) Event 如上所示报错修改下面
代码：<template>
<div id="
cesium-container" ref="
cesiumContainer"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as
Cesium from '
cesium';
import '
cesium/Build/
Cesium/Widgets/widgets
.css';
// 使用你自己的有效
Cesium 访问令牌
Cesium.Ion
.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9
.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE';
const
cesiumContainer = ref<HTMLDivElement | null>(null);
let
viewer: Cesium.Viewer | null = null;
onMounted(async () => { // 改为异步函数
if (!
cesiumContainer
.value) return;
try {
// 异步创建世界地形 - 最新版
Cesium 的用法
const worldTerrain = await
Cesium.createWorldTerrainAsync({
requestVertexNormals
: true,
requestWaterMask
: true
});
// 初始化
Cesium地球
viewer = new
Cesium.Viewer(
cesiumContainer
.value, {
animation
: false,
baseLayerPicker
: false,
fullscreenButton
: false,
vrButton
: false,
geocoder
: false,
homeButton
: false,
infoBox
: false,
sceneModePicker
: false,
selectionIndicator
: false,
timeline
: false,
navigationHelpButton
: false,
navigationInstructionsInitiallyVisible
: false,
terrainProvider
: worldTerrain, // 使用异步创建的地形
imageryProvider
: new
Cesium.ArcGisMapServerImageryProvider({
url
: 'https
://services
.arcgisonline
.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
});
// 设置初始视图位置（株洲市）
viewer.camera
.flyTo({
destination
: Cesium.Cartesian3
.fromDegrees(113
.13, 27
.83, 10000000),
orientation
: {
heading
: Cesium.Math
.toRadians(0),
pitch
: Cesium.Math
.toRadians(-90),
roll
: 0
.0
},
duration
: 2
});
// 添加水面效果
addWaterEffect();
// 添加光照效果
addLightingEffect();
} catch (error) {
console
.error('Failed to initialize
Cesium:', error);
}
});
onUnmounted(() => {
if (
viewer) {
viewer.destroy();
viewer = null;
}
});
// 添加水面效果
function addWaterEffect() {
if (
viewer) {
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.dynamicAtmosphereLighting = true;
viewer.scene.globe.dynamicAtmosphereLightingFromSun = true;
}
}
// 添加光照效果
function addLightingEffect() {
if (
viewer) {
viewer.scene.globe.showGroundAtmosphere = true;
viewer.scene.fog
.enabled = true;
viewer.scene.skyAtmosphere
.show = true;
}
}
</script>
<style scoped>
#
cesium-container {
position
: absolute;
top
: 0;
left
: 0;
height
: 100%;
width
: 100%;
margin
: 0;
padding
: 0;
overflow
: hidden;
}
/* 覆盖
Cesium默认的logo */
:deep(
.cesium-
viewer-bottom) {
display
: none !important;
}
</style>
超级会员免费看
订阅专栏 解锁全文
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
