CesiumJS Points 和 CSS 关键帧动画

Question

我一直在玩铯，并且已经能够在地球上绘制点。在示例代码中，pdata 数组保存纬度、经度数据。

示例代码：

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
        }
    });
}

我正在尝试为点设置动画（例如显示脉动点）。如何为绘制点添加动画？有什么方法可以在标绘点上添加 CSS 关键帧动画以在渲染的每个点上产生脉冲效果？

Answer 1

Cesium 被渲染为 WebGL canvas，因此 CSS（和 CSS 动画）在渲染中不可用。但是Cesium包含了很多形式的动画，插值等等。

一种选择是使用 SampledProperty 代替 pixelSize 的常量值 5。

这里有一个这样的替换示例，点击底部的 Run code snippet：

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>

CesiumJS Points 和 CSS 关键帧动画

CesiumJS Points and CSS Keyframe animation

javascript

css-animations

cesium