1. A concise explanation of the problem you’re experiencing.
I’m drawing some routes from gpx files.
I should update the visibility of my routes on the base of the camera distance from them.
Unfortunately the polyline “distanceDisplayCondition” property does not work on mobile.
So, I think to “manually” lerp the opacity of these polylines from 0 (far) to 1 (near).
To do so I think I should get the “map changed” event the most reliable as possible (every single little change),
to next update the opacity of my polylines.
But I can’t understand how to use the ‘percentageChanged’ property on ‘camera changed’ event
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
viewer.camera.changed.addEventListener(() => {
// now I should update all my polylines opacity on the base of camera distance from them
});
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
To show polylines (track routes) only at a some camera distance, with a lerp to make it smoother
4. The Cesium version you’re using, your operating system and browser.
1.62
omar
October 27, 2019, 10:34pm
2
You can set the percent changed to a low value, like 0.01, to trigger camera updates on small changes like in this Sandcastle example: https://sandcastle.cesium.com/index.html?src=Multiple%20Synced%20Views.html&label=All
Thank-you Omar,
Is there a way to trigger at different percentage for the same camera?
omar
November 4, 2019, 7:50pm
4
I think for that you’d set the percentage change to the lowest one you need, and keep track of the camera difference yourself for the ones that require a higher change. You can see how CesiumJS computes the percentage change here:
var position = camera.position;
var lastPosition = camera._changedPosition;
var frustum = camera.frustum;
var lastFrustum = camera._changedFrustum;
var x0 = position.x + frustum.left;
var x1 = position.x + frustum.right;
var x2 = lastPosition.x + lastFrustum.left;
var x3 = lastPosition.x + lastFrustum.right;
var y0 = position.y + frustum.bottom;
var y1 = position.y + frustum.top;
var y2 = lastPosition.y + lastFrustum.bottom;
var y3 = lastPosition.y + lastFrustum.top;
var leftX = Math.max(x0, x2);
var rightX = Math.min(x1, x3);
var bottomY = Math.max(y0, y2);
var topY = Math.min(y1, y3);
show original