Vue + cesium can't load tiles

I’m trying to create a map using Vue + Cesium. The problem is that I can download the tile on initialization but Cesium can’t draw it. I saw in the console’s network that all tile requests returned pictures normally, but cesium was always a blue ball. The console error is:

An error occurred in "IonImageryProvider": Failed to obtain image tile X: 1 Y: 3 Level: 1.

I see other people in the community saying it’s a CORS problem. I use the official default map service, and I also set the proxy in vue.config. Problems remain. Here is my Vue component code:

<template>
  <div>
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
import {
  Viewer,
  UrlTemplateImageryProvider,
} from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
export default {
  name: "CesiumViewer",
  mounted() {
    var viewer = new Viewer("cesiumContainer");
  },
};
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

and the network shows:


I used the same code in React, it’s work. Is there anything I should be aware of in Vue?

Eventually I found the problem. Because mockjs is used in the project, it will override the original xmlhttprequest method through mockxmlhttprequest. But the Blob format in mockxmlhttprequest is processed as a string. Therefore, cesium will throw an exception during Blob processing. After being captured and processed, it appears as

Failed to obtain image tile X: Y: Level: .

Hope to help people who encounter this problem

Thanks for updating your thread with this information. Were you able to resolve this issue?

Yes, I solved it by disabling mockjs in the development environment (it is used to simulate data in the development environment)

1 Like