Cesium数据可视化-仓储调度系统可视化部分

目的

仓储调度系统需要一个可视化展示物资运输实况的界面，需要配合GPS设备发送的位置信息，实时绘制物资运输情况和仓储仓库。因此，使用Cesium可视化该数据。

说明

这只是开发过程中的原型系统。效果是点会沿着线路进行移动，体现物质运输设备所在的位置、运货量等信息。

原理简介

点，线，图片的绘制就不细说了。

动态点绘制是利用Entity的position属性可以制定某时间点的出现位置，形成动画效果。

核心代码如下：

/**
         * 计算 property
         * @param source
         * @returns {SampledPositionProperty|*}
         */
        function computeFlight(source) {
            // 取样位置 相当于一个集合
            var property = new Cesium.SampledPositionProperty();
            property.setInterpolationOptions({
                interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
                interpolationDegree: 2
            });
            for (var i = 0; i < source.length; i++) {
                var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
                var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }


// 动态点
            viewer.entities.add({
                position: property,
                name: "复兴号",
                description: "运载量：100t",
                path: {
                    show: true,
                    leadTime: 0,
                    trailTime: 10,
                    width: 5,
                    resolution: 5,
                    material: new Cesium.PolylineOutlineMaterialProperty({
                        color: Cesium.Color.fromAlpha(Cesium.Color.RED, 1),
                        outlineWidth: 1,
                        outlineColor: Cesium.Color.red
                    })
                },
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                        start: Cesium.JulianDate.addSeconds(start, data[j][0].time, new Cesium.JulianDate),
                        stop: Cesium.JulianDate.addSeconds(start, data[j][data[j].length - 1].time, new Cesium.JulianDate),
                        isStartIncluded: true,
                        isStopIncluded: false,
                        data: Cesium.Cartesian3.fromDegrees(110, 39)
                    })]
                )
            });

具体详情读源码即可。

源码

仓储调度系统可视化部分