CODEWITHSUNDEEP
javascriptcss-animationscesiumjs
nizantz
nizantz

Reputation: 1621

CesiumJS Points and CSS Keyframe animation

I have been playing around with Cesium and have been able to plot points on a globe. In the sample code the pdata array holds the latitude, longitude data.

Sample Code:

for ( var i = 0; i < pdata.length; i++ ) {
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(pdata[i].longitude, pdata[i].latitude),
        point : {
            pixelSize : 5,
            color : CESIUM.Color.RED,
            outlineWidth: 0
        }
    });
}

Am trying to animate the points (like show pulsating points). How can I add animations to the plotted points? Is there any way I can add a CSS keyframe animation on the plotted points to produce a pulse effect on each point rendered?

Upvotes: 1

Views: 1321

Answers (1)

emackey
emackey

Reputation: 12448

Cesium is rendered to a WebGL canvas, so CSS (and CSS animations) are not available within the render. However, Cesium includes many forms of animations, interpolation, and the like.

One option is to use a SampledProperty in place of the constant value 5 for your pixelSize.

Here's an example of such a replacement, click Run code snippet at the bottom of this:

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
    // These next 6 lines are just to avoid Stack Snippet error messages.
    imageryProvider : Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }),
    baseLayerPicker : false,
    geocoder : false,
    infoBox : false,
    shouldAnimate : true
});

var start = Cesium.JulianDate.fromIso8601('2018-01-01T00:00:00.00Z');
var mid = Cesium.JulianDate.addSeconds(start, 0.5, new Cesium.JulianDate());
var stop = Cesium.JulianDate.addSeconds(start, 1, new Cesium.JulianDate());

var clock = viewer.clock;
clock.startTime = start;
clock.currentTime = start;
clock.stopTime = stop;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;

var pulseProperty = new Cesium.SampledProperty(Number);
pulseProperty.setInterpolationOptions({
    interpolationDegree : 3,
    interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

pulseProperty.addSample(start, 7.0);
pulseProperty.addSample(mid, 15.0);
pulseProperty.addSample(stop, 7.0);

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-95, 40),
    point : {
        pixelSize : pulseProperty,
        color : Cesium.Color.ORANGERED
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-85, 40),
    point : {
        pixelSize : pulseProperty,
        color : Cesium.Color.LIME
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75, 40),
    point : {
        pixelSize : pulseProperty,
        color : Cesium.Color.STEELBLUE
    }
});
html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}
<link href="http://cesiumjs.org/releases/1.31/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.31/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>

Upvotes: 1

Related Questions