Vue + cesium can't load tiles

CesiumJS
1

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:

image
image1167×552 45 KB

image
image1147×529 86.4 KB

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

2

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

1 Like
3

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

4

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

1 Like