(Vue)使用cesium添加图片无法正常显示（白屏）

最新推荐文章于 2025-04-13 23:22:36 发布

嘿Dorothy

最新推荐文章于 2025-04-13 23:22:36 发布

阅读量3.2k

点赞数 1

分类专栏： vue JS HTML 文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_42453890/article/details/120988705

版权

vue 同时被 3 个专栏收录

11 篇文章

订阅专栏

8 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

在Cesium中尝试添加图片作为椭圆区域的材质时遇到错误：Failed to load image。检查图片路径和图片本身无误。解决方案是通过import导入图片路径，然后在data中定义变量。更新后的代码中，将图片路径设置为material属性，成功在地图上显示椭圆区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在cesium中添加一张图片控制台报错Failed to load image
在这里插入图片描述
在地图上无法正常显示

检查过路径和图片本身都没有问题，代码如下：

var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(114.77, 30.60),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    material: '../assets/images/test.png'
  }
});
viewer.zoomTo(viewer.entities);

解决方法

将图片路径通过import方法引入，在data中导出

import url from '../assets/images/test.png'

data() {
	 return {
	   imageUrl: url,
	 };
	},

在这里插入图片描述

完整代码

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

<script>
import url from '../assets/images/test.png'
 export default {
    name: 'mapBox',
    data() {
      return {
        imageUrl: url,
      };
    },
    methods: {
      initMap() {
        const Cesium = this.cesium

        var viewer = new Cesium.Viewer('cesiumContainer', {
          geocoder: false, //查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
          homeButton: false, //视角返回初始位置
          // sceneModePicker: false,  //选择视角的模式
          // baseLayerPicker: false,  //图层选择器，选择要显示的地图服务和地形服务
          navigationHelpButton: false, //导航帮助按钮，显示默认的地图控制帮助
          animation: false, //左下角的动画控件的显示
          shouldAnimate: false, //控制模型动画
          timeline: false, //时间线,指示当前时间，并允许用户跳到特定的时间
          fullscreenButton: false, //全屏按钮
        })
        
        var entity = viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(114.77, 30.60),
          ellipse: {
            semiMinorAxis: 250000.0,
            semiMajorAxis: 400000.0,
            material: this.imageUrl
          }
        });
        viewer.zoomTo(viewer.entities);
      },
    mounted() {
      this.initMap();
    }
  }
</script>