Bootstrap

cesium示例集--7.cesium预警效果,用CallbackProperty实现实体闪烁

在用cesium开发地图项目时,经常会遇到一些地图交互,比如,点击某些信息,地图上相应的点线面等实体需要闪烁或者动态变化,以此达到用户交互。
那么如何让这些实体闪烁呢?这里用到cesium中一个关键的API,就是CallbackProperty,主要功能就是用它来实时更新改变实体的一些属性,比如大小、颜色等,从而达到闪烁效果。

在这里插入图片描述
1.点闪烁

viewer.entities.add({
                name: '点闪烁',
                id: `point_bling`,
                position: Cesium.Cartesian3.fromDegrees(117.456, 33.5633),
                point: {
                    show: true,
                    color: Cesium.Color.RED,
                    pixelSize: new Cesium.CallbackProperty(function () {
                        if (point.flog) {
                            point.x = point.x - 0.5;
                            if (point.x <= 5) {
                                point.flog = false;
                            }
                        } else {
                            point.x =
                                point.x + 0.5;
                            if (point.x >= 30) {
                                point.flog = true;
                            }
                        }
                        return point.x;
                    }, false)
                }
            });

2.线闪烁

viewer.entities.add({
                name: '线闪烁',
                id: `polyline_bling`,
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray([116.306266, 34.081518, 116.266100, 34.025274, 116.318674, 33.845979, 116.326985, 33.668778, 116.299353, 33.551918, 116.187165, 33.436452, 116.131494, 33.233837, 116.195207, 33.008111]),
                    material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () {
                        if (line.flog2) {
                            line.x2 = line.x2 - 0.015;
                            if (line.x2 <= 0.3) {
                                line.flog2 = false;
                            }
                        } else {
                            line.x2 =
                                line.x2 + 0.015;
                            if (line.x2 >= 0.9) {
                                line.flog2 = true;
                            }
                        }
                        return new Cesium.Color(
                            255 / 255,
                            0 / 255,
                            0 / 255,
                            line.x2
                        );
                    }, false)),
                    width: new Cesium.CallbackProperty(function () {
                        if (line.flog) {
                            line.x = line.x - 0.1;
                            if (line.x <= 3) {
                                line.flog = false;
                            }
                        } else {
                            line.x =
                                line.x + 0.1;
                            if (line.x >= 12) {
                                line.flog = true;
                            }
                        }
                        return line.x;
                    }, false)
                }

            });

3.面闪烁

viewer.entities.add({
                name: '面闪烁',
                id: `polygon_bling`,
                polygon: {
                    show: true,
                    hierarchy: {
                        positions: Cesium.Cartesian3.fromDegreesArray([118.181060, 33.813335, 118.507553, 33.823338, 118.740078, 33.291624, 117.957568, 33.312384]),
                    },
                    material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () {
                        if (polygon.flog) {
                            polygon.x = polygon.x - 0.015;
                            if (polygon.x <= 0.3) {
                                polygon.flog = false;
                            }
                        } else {
                            polygon.x =
                                polygon.x + 0.015;
                            if (polygon.x >= 0.9) {
                                polygon.flog = true;
                            }
                        }
                        return new Cesium.Color(
                            255 / 255,
                            0 / 255,
                            0 / 255,
                            polygon.x
                        );
                    }, false))
                }

            });
;