Hi,
I am trying to control the size of a circle depending on the cursor position. It correctly follows the mouse movements. However there is a variable latency that is not very convenient.
I have also tried to use Entity instead of Primitive, but the result is worst. I have heard about CallbackProperties, but I didn't succeed to set up this function.
Is there any remedy for this issue?
The source code below is a sandcastle demonstration of the issue.
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProviderViewModels : ,
infoBox : true,
selectionIndicator : false,
animation : false
});
var scene = viewer.scene;
var camera = viewer.camera;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var primitive;
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
viewer.entities.add({
position : center,
point : {
pixelSize : 10,
color : Cesium.Color.YELLOW
}
});
handler.setInputAction(
function (movement) {
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if (cartesian) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
cartographic.height= 100000; //meters
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var altitude = cartographic.height;
cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude);
var cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
var cartographic2 = Cesium.Cartographic.fromCartesian(center);
var altitude1 = cartographic1.height;
var altitude2 = cartographic2.height;
var diffAltitude = Math.abs(altitude1 - altitude2);
var currentDistance = new Cesium.Cartesian3();
var totalDistanceInMeters = 0;
var currentCartesian = new Cesium.Cartesian3();
var currentCartographic;
var previousCartesian = new Cesium.Cartesian3();
var mesure = [cartesian, center];
var surfacePositions = Cesium.PolylinePipeline.generateArc({
positions : mesure
});
var surfacePositionsLength = surfacePositions.length;
for (var i = 0; i < surfacePositionsLength; i += 3) {
currentCartesian = Cesium.Cartesian3.fromElements(surfacePositions[i],surfacePositions[i+1],surfacePositions[i+2]);
currentCartographic = Cesium.Cartographic.fromCartesian(currentCartesian);
if (altitude1>=altitude2){
currentCartographic.height = currentCartographic.height + ((diffAltitude/((surfacePositionsLength/3)-1))*(((surfacePositionsLength-3)-i)/3)) + altitude2;
}
if (altitude1<altitude2){
currentCartographic.height = currentCartographic.height + ((diffAltitude/((surfacePositions.length/3)-1))*(i/3)) + altitude1;
}
currentCartesian = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(currentCartographic.longitude), Cesium.Math.toDegrees(currentCartographic.latitude), currentCartographic.height);
if (i>0){
currentDistance.x = Math.abs(currentCartesian.x - previousCartesian.x);
currentDistance.y = Math.abs(currentCartesian.y - previousCartesian.y);
currentDistance.z = Math.abs(currentCartesian.z - previousCartesian.z);
totalDistanceInMeters += Cesium.Cartesian3.magnitude(currentDistance);
}
previousCartesian = currentCartesian;
if(primitive instanceof Cesium.Primitive){
viewer.scene.primitives.remove(primitive);
}
var circleGeometry = new Cesium.CircleGeometry({
center : center,
radius : totalDistanceInMeters,
granularity : 1 * Cesium.Math.RADIANS_PER_DEGREE
});
var redCircleInstance = new Cesium.GeometryInstance({
geometry : circleGeometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE.withAlpha(0.3))
}
});
var appear = new Cesium.PerInstanceColorAppearance({
closed: true
});
primitive = new Cesium.Primitive({
geometryInstances: redCircleInstance,
appearance: appear,
allowPicking: false
});
viewer.scene.primitives.add(primitive);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
Thank you four your time.
Regards,
Gaëtan