问题描述

在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>