Question

我一直在玩Cesium，并且能够在地球上绘制积分。在示例代码中，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画布，因此CSS（和CSS动画）在渲染中不可用。但是，Cesium包括许多形式的动画，插值等。

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

以下是此类替换的示例，点击底部的Run code snippet：

＆＃13;

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

＆＃13;

html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}

＆＃13;

<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>

＆＃13;

CesiumJS点和CSS关键帧动画

1 个答案: