Skip to content

加载Cesium显示不出地球 #347

@TodayCG

Description

@TodayCG

https://play.vuejs.org 中尝试使用Cesium,加载失败,并且也尝试了importmap导入,同样的效果:
Image

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  setTimeout(() => {
    // 动态加载Cesium
    const link = document.createElement('link')
    link.href = "https://cesium.com/downloads/cesiumjs/releases/1.130/Build/Cesium/Widgets/widgets.css"
    link.rel = "stylesheet"
    document.head.appendChild(link)

    const script = document.createElement('script')
    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.130/Build/Cesium/Cesium.js'
    script.onload = () => {
      const Cesium = (window as any).Cesium
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMGY5NzY2NC03MjQ2LTRiMjItOTBiMC1hN2EwOWVjNTY1MDMiLCJpZCI6MzE1NjAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1ODIyOTh9._ZB_Xkxp7-tGrhsZQ9e2ILHQWUS22XuBpl5qIdlesY8'

      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrain: Cesium.Terrain.fromWorldTerrain()
      })

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400)
      })
    }
    document.head.appendChild(script)
  }, 3000)
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>

在本地新建Vue工程,粘贴如上代码,是可以正常运行:

Image

不知什么问题导致

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions