Expected width to be greater than 0, actual value was 0

CesiumJS
1

Hello, after my project has been running for some time now, a DeveloperError will occur: “Expected width to be greater than 0, actual value was 0” reported an error. Currently, the computer is Windows 11, Google Chrome version 135.0.7049.115 (official version) (64-bit). I’ll also post the code. The vue framework is being used. I hope this question can be answered. Thank you.

<script setup>
  import { onUnmounted, ref, onMounted, reactive, nextTick } from "vue";
  import * as Cesium from "cesium";
  import { ElCheckbox } from 'element-plus';
  import 'ol/ol.css'
  import { Map, View } from 'ol'
  import TileLayer from 'ol/layer/Tile'
  import XYZ from "ol/source/XYZ";
  import olcsCamera from "olcs/Camera";
  const state = reactive({
    isShow3D: false,
    element2D: {},
    element3D: {},
    camera: {},
  });
  const switchTo = () => {
    state.element2D.style.visibility = state.isShow3D
      ? "hidden"
      : "visible";
    state.element3D.style.visibility = state.isShow3D
      ? "visible"
      : "hidden";
  }
  let cesiumViewer
  const initmap = () => {
    Cesium.Ion.defaultAccessToken = ''
    cesiumViewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      animation: false,
      // creditContainer:"credit",
      timeline: false,
      maximumScreenSpaceError: 32,
      skipLevelOfDetail: true,
      immediatelyLoadDesiredLevelOfDetail: true,
      contextOptions: {
        requestWebgl1: true,
      },
      fullscreenButton: false
    });
    const olViewer = new Map({
      target: "olContainer",
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "",
          }),
        }),
      ],
      view: new View({
        projection: "EPSG:4326",
        center: [0, 0],
        zoom: 15
      })
    });
    state.element2D = document.getElementById("olContainer");
    state.element3D = document.getElementById("cesiumContainer");
    state.camera = new olcsCamera(
      cesiumViewer.scene,
      olViewer
    );
    state.element3D.style.visibility = "hidden";
  }
  onMounted(() => {

    initmap()
  })
</script>
<template>
  <div class="main">
    <el-checkbox v-model="state.isShow3D" label=" Three-dimensional Earth " size="large" @change="switchTo"
      style="position: absolute; z-index: 99; color: white;" /><br />
    <div id="olContainer"></div>
    <div id="cesiumContainer"></div>
  </div>
</template>
<style lang="less" scoped>
  .main {
    height: 100vh;
    width: 100vw;

    #cesiumContainer {
      position: absolute;
      height: 100vh;
      width: 100vw;
    }

    #olContainer {
      position: absolute;
      height: 100vh;
      width: 100vw;
    }
  }
</style>
2

image
image841×271 13.5 KB

3

It can be difficult to analyze the exact reasons for this error. First of all, because the error itself is pretty generic, and can have many reasons. But more importantly, because the exact behavior of the underlying framework (like ‘vue’) may be important. Without a complete setup, people will not be able to reproduce the error. And it would require a deep and thorough understanding of the vue framework itself to even make guesses about the reason in this specific case.

A first (very basic and naive) debugging step: When you insert some log message like

...
console.log("I'm now creating a new viewer instance!");
cesiumViewer = new Cesium.Viewer("cesiumContainer", {
...

before creating the viewer, will this be printed multiple times? If it is, then that’s an obvious reason (there should usually only be one viewer instance).

If this is only printed once then… it could be more difficult to find the reason for the error. (The stack trace in the second post indicates that it is running out of memory, but it’s not clear where exactly this memory is leaked…)

4

Hi @xhg160,

Be very careful not to put Cesium objects, like Cesium.scene in the reactive state! This has caused some issues which have been hard to identify in the past. Avoid it completely or use Vue’s shallowRef or markRaw functions.