Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等

cesium加载entities实体，包括文字标注,图标(扩撒动画效果),线，面(闪烁动画效果)，图片，围栏，立体区域，渐变色圆柱，扇形图

依赖_赖

9677人浏览 · 2022-04-12 15:52:43

依赖_赖 · 2022-04-12 15:52:43 发布

加载图标和文字标注

addPoints(data) {
    if (data && data.length > 0) {
        let datasource = map_common_addDatasouce("point");
        datasource.entities.removeAll();
        data.forEach(item => {
            datasource.entities.add({
                position: Cesium.Cartesian3.fromDegrees(item.coordinate[0], item.coordinate[1], item.coordinate[2]),//图标位置
                billboard: {
                    image: `/images/marker.png`,//图标地址
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    pixelOffset: new Cesium.Cartesian2(-6, 6),
                    scale: 0.8,
                },
                label: {
                    scale: 1,
                    font: "bolder 16px sans-serif",
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    text: item.name,//图标名称
                    fillColor: Cesium.Color.fromCssColorString("#ffffff"),
                    pixelOffset: new Cesium.Cartesian2(0, -60)
                },
                properties: new Cesium.PropertyBag({
                    type: "point",
                    details: item
                })
            });
        })
    }
}

数据格式：

let data = [
      {
        id: '1',
        name: '摄像头1',
        coordinate: [116.5237896183484, 40.23425089061218, 1]
      },
      {
        id: '2',
        name: '摄像头2',
        coordinate: [116.52442547004496, 40.234225534772044, 1]
      },
      {
        id: '3',
        name: '摄像头3',
        coordinate: [116.52386941878123, 40.233503276564576, 1]
      }
    ];

加载报警点动画效果

  addWarnings(data) {
    let datasource = map_common_addDatasouce("warning");
    datasource.entities.removeAll();
    let x = 1;
    let flog = true;
    datasource.entities.add({
      position: Cesium.Cartesian3.fromDegrees(data.coordinate[0], data.coordinate[1], data.coordinate[2]),
      //通过动态改变缩放大小实现闪烁动画1
      billboard: {
        image: `/images/bg.png`,
        pixelOffset: new Cesium.Cartesian2(0, -50),
        scale: new Cesium.CallbackProperty(function () {
          if (flog) {
            x = x - 0.03;
            if (x <= 0.2) {
              flog = false;
            }
          } else {
            x = x + 0.03;
            if (x >= 0.8) {
              flog = true;
            }
          }
          return x;
        }, false)
      },
      properties: new Cesium.PropertyBag({
        type: "warning",
        details: data
      })
    });
    datasource.entities.add({
        position: Cesium.Cartesian3.fromDegrees(data.location[0], data.location[1], data.location[2]),
        billboard: {
            image: `/images/marker.png`,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        }
    })
  }

数据格式：

let data = {
    id: '1',
    name: '报警点1',
    coordinate: [116.52329742014058, 40.234779669561995, 1]
  }

图片资源：
在这里插入图片描述

实现效果：

加载线

addLine(data) {
    if (data && data.rangerArr && data.rangerArr.length > 0) {
        let datasource = map_common_addDatasouce("line");
        datasource.entities.removeAll();
        let positions = Array.prototype.concat.apply(
            [],
            data.rangerArr
        );
        datasource.entities.add(
            new Cesium.Entity({
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                    width: 5.0,
                    //纯色
                    /* material: Cesium.Color.fromCssColorString("#73f9f0").withAlpha(
                        1.0
                    ),*/
                    //发光效果
                    material: new Cesium.PolylineGlowMaterialProperty({
                         color: Cesium.Color.fromCssColorString("#fff"),
                         glowPower: 0.1
                    })
                },
                properties: new Cesium.PropertyBag({
                    type: "line",
                    details: data
                })
            })
        );
    }
}

数据格式：

let data = {
      id: '1',
      name: '边界',
      rangerArr: [[116.52320712206836, 40.23406811024757, 5], [116.52321177601786, 40.23347668875855, 5], [116.52452838827061, 40.23347827970169, 5], [116.52453120516144, 40.23515431118559, 5], [116.52321855758989, 40.23407917327679, 5], [116.52320712206836, 40.23406811024757, 5]]
};

实现效果：
在这里插入图片描述

加载尾迹线（superMap）

/**
 * 加载成都市道路
 */
let datasouce = map_common_addDatasouce('line');
let datasouce_1 = map_common_addDatasouce('line_1');
jsonParse("./json/home/成都市.json").then((val) => {
    val.forEach((t) => {
      if (t.properties.GB === 430501) {//加载部分道路
        let coor = t.geometry.coordinates;
        coor = coor.filter((t) => {
          return t.push(5);
        });
        coor = Array.prototype.concat.apply([], coor);
        datasouce.entities.add({
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(coor),
            material: Cesium.Color.CYAN
          },
        });
        datasouce_1.entities.add({
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(coor),
            width: 2,
            material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质
              color: Cesium.Color.CYAN,
              trailLength: 0.2,
              period: 0.5
            })
          },
        });
      }
    });
  });

实现效果：
在这里插入图片描述

加载面

addPoly(data) {
    if (data && data.rangerArr && data.rangerArr.length > 0) {
        let datasource = map_common_addDatasouce("poly");
        datasource.entities.removeAll();
        let positions = Array.prototype.concat.apply(
            [],
            data.rangerArr
        );
        let x = 1;
        let flog = true
        datasource.entities.add(
            new Cesium.Entity({
                polygon: {
                	height: 2000,
                    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                    //纯色
                    /*material: Cesium.Color.fromCssColorString('73f9f0').withAlpha(1),*/
                    //图片
                    /*material: new Cesium.ImageMaterialProperty({
                            image: "/images/home/北京市.png",
                      }),*/
                    //通过动态改变透明度实现闪烁动画
           			material: new Cesium.ColorMaterialProperty(
                        new Cesium.CallbackProperty(function () {
                            if (flog) {
                                x = x - 0.03;
                                if (x <= 0.2) {
                                    flog = false;
                                }
                            } else {
                                x = x +  0.03;
                                if (x >= 0.8) {
                                    flog = true;
                                }
                            }
                            return Cesium.Color.RED.withAlpha(x);
                        }, false)),
                	clampToS3M: true, //面贴3dTiles模型,若为gltf模型，该参数不生效，则结合extrudedHeight和height属性拉成体    
                    outline: true,
                    outlineColor: Cesium.Color.fromCssColorString("#a2ffba"),
                    outlineWidth: 1.0,//范围面数据设置outline为true时，宽度只能显示1px
                    //控制显隐高度范围
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                            100000,
                            1000000.0
                        ),
                },
                properties: new Cesium.PropertyBag({
                    type: "poly",
                    details: data
                })
            })
        );
    }
}

数据格式：

let data = {
      id: '1',
      name: '范围',
      rangerArr: [[116.52320712206836, 40.23406811024757, 5], [116.52321177601786, 40.23347668875855, 5], [116.52452838827061, 40.23347827970169, 5], [116.52453120516144, 40.23515431118559, 5], [116.52321855758989, 40.23407917327679, 5], [116.52320712206836, 40.23406811024757, 5]]
};

实现效果：
在这里插入图片描述

加载背景图

loadCircle() {
    let datasource = map_common_addDatasouce("circleImage");
    datasource.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
            93.97039653185051, 29.950970087104018, 4000
        ),
        ellipse: {
            height: 3000,
            semiMajorAxis: 220000,
            semiMinorAxis: 220000,
            material: new Cesium.ImageMaterialProperty({
                image: "/images/map/circle.png",
                transparent: true,
                color: new Cesium.Color(0.4, 0.4, 0.4, 0.8),
            }),
            stRotation: 0 //旋转角度
        },
    });
}

实现效果：
在这里插入图片描述

加载面+围栏实现立体分层效果

/**
 * 加载北京市区域
 */
function mapView_BeiJing() {
    jsonParse("/json/home/北京市.json").then((val) => {
        if (val && val.length > 0) {
            let datasource = map_common_addDatasouce(datasourceName.BEIJING_DATASOURCE);
            val.forEach((el) => {
                let positions = Array.prototype.concat.apply(
                    [],
                    el.geometry.coordinates[0]
                );

                datasource.entities.add({
                    polygon: {
                        hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
                        height: 4000,
                        material: new Cesium.ImageMaterialProperty({
                            image: "/imgs/home/北京市.png",
                        }),
                        outline: false
                    }
                });
                let positions2 = el.geometry.coordinates[0].map(item => {
                    item.push(initHeight);
                    return item
                })
                let positions3 = Array.prototype.concat.apply(
                    [],
                    positions2
                );
                datasource.entities.add({
                    wall: {
                        positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions3),
                        material: new Cesium.ImageMaterialProperty({
                            image: "/imgs/home/组.png",
                            repeat: new Cesium.Cartesian2(1.0, 1),
                            transparent: true,
                        }),
                        outline: false
                    },
                });
            });
        }
    });
}

图片资源：
在这里插入图片描述
实现效果：

在这里插入图片描述

加载渐变色圆柱

/**
 * 颜色渐变
 */
getColorRamp(elevationRamp, isVertical = true) {
    let ramp = document.createElement('canvas');
    ramp.width = isVertical ? 1 : 100;
    ramp.height = isVertical ? 100 : 1;
    let ctx = ramp.getContext('2d');

    let values = elevationRamp;
    let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
    grd.addColorStop(values[0], '#0084FF');
    grd.addColorStop(values[1], '#00FCFF');
    grd.addColorStop(values[2], '#00FF7E');
    ctx.globalAlpha = 0.3;
    ctx.fillStyle = grd;
    if (isVertical)
        ctx.fillRect(0, 0, 1, 100);
    else
        ctx.fillRect(0, 0, 100, 1);

    return ramp;
}
addCylinder(data) {
    if (data && data.length > 0) {
        let datasource = map_common_addDatasouce("point");
        datasource.entities.removeAll();
        data.forEach(item => {
        		let center = item.coordinates;
                let radius = 1;//半径
                let options = {steps: 64, units: 'kilometers', properties: {foo: 'bar'}};
                //引入turf构建范围面    
                //import circle from '@turf/circle';
                let circleData = circle(center, radius, options);
                let height = item.rainValue;//高度
                let wallPositions = circleData.geometry.coordinates[0].map(item => {
                    return [...item, height]
                });
                let positions = Array.prototype.concat.apply(
                    [],
                    wallPositions
                );
                //通过围墙实现渐变填充
                datasource.entities.add({
                    wall: {
                        positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                        material: new Cesium.ImageMaterialProperty({
                            image: getColorRamp([0.1, 0.5, 1.0], true, "county_border_line"),
                            repeat: new Cesium.Cartesian2(1.0, 1),
                            transparent: false,
                        }),
                        minimumHeights: wallPositions.map(() => 10500),
                        outline: false,
                    }
                });
                //填充纯色围墙
                datasource.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(item.coordinates[0], item.coordinates[1], 10500),
                    cylinder: {
                        length: height - 10500,
                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                        topRadius: 990,
                        bottomRadius: 990,
                        material: Cesium.Color.fromCssColorString('#0077AF'),
                        outline: false
                    }
                })
        })
    }
}

数据格式：

let data = [
      {
        id: '1',
        name: '雨量柱1',
        coordinate: [116.5237896183484, 40.23425089061218],
        rainValue: 14000
      },
      {
        id: '2',
        name: '雨量柱2',
        coordinate: [116.52442547004496, 40.234225534772044],
        rainValue: 11000
      },
      {
        id: '3',
        name: '雨量柱3',
        coordinate: [116.52386941878123, 40.233503276564576],
        rainValue: 8000
      }
    ];

实现效果：
在这里插入图片描述

加载扇形图

/**
 * 加载扇形
 */
export function drawBasePoint(viewer, data) {
    let datasource = map_common_addDatasouce(viewer, "point");
    datasource.entities.removeAll();
    data.forEach(item => {
        let color = "";
        if (item.color === 1) {
            color = "#00BFFF";
        } else {
            if (item.type == "4G") {
                color = "#008000";
            } else if (item.type == "5G") {
                color = "#000099";
            }
        }
        datasource.entities.add({
            name : '扇形',
            position : Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0),
            orientation : Cesium.Transforms.headingPitchRollQuaternion(
                Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0),
                //Cesium.Math.toRadians(item.aoa) item.aoa是扇形的朝向
                new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(item.aoa), 0, 0.0)
            ),
            ellipsoid : {
                radii : new Cesium.Cartesian3(50.0, 50.0, 50.0),  // 扇形半径
                innerRadii : new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径
                minimumClock : Cesium.Math.toRadians(-40), // 左右偏角
                maximumClock : Cesium.Math.toRadians(10),
                minimumCone : Cesium.Math.toRadians(75),// 上下偏角  可以都设置为90
                maximumCone : Cesium.Math.toRadians(90),
                material : Cesium.Color.fromCssColorString(color).withAlpha(0.2),
                outline : true,
                outlineColor: Cesium.Color.fromCssColorString(color)
            }
        });
    })
}

数据格式：

data = [
        {
          aoa: 50,
          cell_id: undefined,
          cell_name: undefined,
          color: null,
          lat: 30.62841,
          lng: 104.06939,
          name: "D-ZRH-1",
          type: "5G"
        },
        {
          aoa: 130,
          cell_id: undefined,
          cell_name: undefined,
          color: null,
          lat: 30.62841,
          lng: 104.06939,
          name: "D-ZRH-2",
          type: "5G",
        },
        {
          aoa: 270,
          cell_id: undefined,
          cell_name: undefined,
          color: null,
          lat: 30.62841,
          lng: 104.06939,
          name: "D-ZRH-3",
          type: "5G"
        }
      ]

实现效果：

在这里插入图片描述
以上map_common_addDatasouce， jsonParse方法参考https://blog.csdn.net/weixin_39150852/article/details/119676613

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

华为开发者空间

cover

GaussDB技术解读——GaussDB架构介绍（四）

华为开发者空间

cover

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

所有评论(0)

查看更多评论

依赖_赖

@weixin_39150852

已为社区贡献3条内容