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.
undefined
TypeError: Cannot read property ‘x’ of undefined
TypeError: Cannot read property ‘x’ of undefined
at scaleToGeodeticSurface (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:15285)
at Ellipsoid.scaleToGeodeticSurface (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:23300)
at Ellipsoid.cartesianToCartographic (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:22668)
at Function.Rectangle.fromCartesianArray (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:59075)
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 (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:88835)
at Camera._updateCameraChanged (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:2243579)
at Scene.initializeFrame (https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js:23:3029932)
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();
viewer.camera.changed.addEventListener(() => {
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 = viewer.camera.getPickRay(new 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.
1.66