ERROR : Cesium.Rectangle.fromCartesianArray(array, ellipsoid, rect);

1. A concise explanation of the problem you’re experiencing.

I’m trying to check if the camera is looking to a new “area” (or rather a new rectangle created by the boundaries of the canvas).

To do so I’ve made a class (because I need it for several different situations) that create a rectangle on the base of the canvas boundaries, and add it to the “main” rectangle of the class, every time that the camera is changed,

Next it check if the cartesian3 in center of the canvas is inside the rectangle.

My problem is that sometimes, when I move the map I get this error:

Cesium.js:23 An error occurred while rendering. Rendering has stopped.


TypeError: Cannot read property ‘x’ of undefined

TypeError: Cannot read property ‘x’ of undefined

at scaleToGeodeticSurface (

at Ellipsoid.scaleToGeodeticSurface (

at Ellipsoid.cartesianToCartographic (

at Function.Rectangle.fromCartesianArray (

at mapCoveredArea.isCovered (http://localhost:8080/alicevr/Map/lib/utils/mapCoveredArea.js:38:38)

at auto (http://localhost:8080/alicevr/Map/lib/cities.js:63:39)

at http://localhost:8080/alicevr/Map/lib/cities.js:47:9

at Event.raiseEvent (

at Camera._updateCameraChanged (

at Scene.initializeFrame (

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

bigArea = new mapCoveredArea();

mediumArea = new mapCoveredArea();

smallArea = new mapCoveredArea(); => {

let range = cameraProperties.range;
if (range > 120000 && !bigArea.isCovered()) {

console.log("************* YOU ARE IN A NEW BIG INEXPLORATED AREA!!")


if (range <= 60000 && !mediumArea.isCovered()) {

console.log("************* YOU ARE IN A MEDIUM INEXPLORATED AREA!!")


if (range <= 30000 && !smallArea.isCovered()) {

console.log("************* YOU ARE IN A SMALL INEXPLORATED AREA!!")



const canvas = viewer.scene.canvas;

const ellipsoid = viewer.scene.mapProjection.ellipsoid;

export class mapCoveredArea {

constructor() {

/// the whole covered area

this.area = new Cesium.Rectangle();

this.isCovered = function () {

let viewCenter = getPointFromCamera();

/// handle error

if (viewCenter === undefined) return null;

let array = [

getPointFromCamera(0, 0),

getPointFromCamera(0, canvas.clientHeight),

getPointFromCamera(canvas.clientWidth, 0),

getPointFromCamera(canvas.clientWidth, canvas.clientHeight)


let viewCenterC = new Cesium.Cartographic();

Cesium.Cartographic.fromCartesian(viewCenter, ellipsoid, viewCenterC);

let isInside = Cesium.Rectangle.contains(this.area, viewCenterC);

// if (isInside) console.log(“same area…”)

// else console.log(“new area!”)

if (!isInside) {

if (this.area.width === 0) {

Cesium.Rectangle.fromCartesianArray(array, ellipsoid, this.area);

} else {

let rect = new Cesium.Rectangle();

Cesium.Rectangle.fromCartesianArray(array, ellipsoid, rect);

/// handle error

if (rect === undefined) return null;

Cesium.Rectangle.union(this.area, rect, this.area);



return isInside;




function getPointFromCamera(xCanvas = null, yCanvas = null) {

const canvas = viewer.scene.canvas;

if (xCanvas === null || yCanvas === null) {

xCanvas = canvas.clientWidth / 2;

yCanvas = canvas.clientHeight / 2;


const ray = Cesium.Cartesian2(

Math.round(xCanvas), Math.round(yCanvas)


const point = viewer.scene.globe.pick(ray, viewer.scene);

return point;


3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

To know if I’m looking at a previous covered area

4. The Cesium version you’re using, your operating system and browser.