详细cesium Entity添加实体

GIS瞧葩菜

于 2024-09-25 11:23:47 发布

阅读量306

点赞数 4

本文链接：https://blog.csdn.net/this__valve/article/details/142518243

版权

cesium 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

webgl

16 篇文章 0 订阅

订阅专栏

先看官网的apiEntity - Cesium Documentation

这些都是属性。

看官网的代码创建实体 – Cesium

const viewer = new Cesium.Viewer("cesiumContainer");

const wyoming = viewer.entities.add({
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,
      -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429,
      -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429,
      -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073,
    ]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

viewer.zoomTo(wyoming);

const redEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  name: "Red ellipse on surface",
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});

const blueEllipse = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
  name: "Blue translucent, rotated, and extruded ellipse with outline",
  ellipse: {
    semiMinorAxis: 150000.0,
    semiMajorAxis: 300000.0,
    extrudedHeight: 200000.0,
    rotation: Cesium.Math.toRadians(45),
    material: Cesium.Color.BLUE.withAlpha(0.5),
    outline: true,
  },
});

也可以

// 初始化 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer');

// 添加一个点实体
const pointEntity = viewer.entities.add({
    name: 'My Point',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), // 经度和纬度
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
    },
    label: {
        text: 'Hello, Cesium!',
        font: '14px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
});

// 如果需要聚焦到这个实体
viewer.zoomTo(pointEntity);

之前的练习。

// 实体 entity
    // const point = new Cesium.Entity({
    //     position:Cesium.Cartesian3.fromDegrees(109.4776560,36.6517925),
    //     point:{
    //         pixelSize:20,
    //         color:Cesium.Color.BLUE,
    //     }
    // })
    // // 添加到地图里
    // viewer.entities.add(point)
    // viewer.zoomTo(point)//地图跳转

    // 写法二
    //    const point2= viewer.entities.add({
    //         id:'point',
    //         position:Cesium.Cartesian3.fromDegrees(140,30),
    //         point:{
    //             pixelSize:20,
    //             color:Cesium.Color.BLUE
    //         }
    //     })
    //     console.log("point",point2);
    
    // 图片坐标
    // const billboard=viewer.entities.add({
    //     position:Cesium.Cartesian3.fromDegrees(-75,60,10),
    //     billboard:{
    //         image:'../../public/img/position.png',
    //         scale:0.1,
    //         color:Cesium.Color.BLUE
    //     }
    // })
    // 文字
    // const label =viewer.entities.add({
    //     position:Cesium.Cartesian3.fromDegrees(-75,40,10),
    //     label:{
    //         text:"cesium",
    //         fillColor:Cesium.Color.YELLOWGREEN,//变量
    //         showBackground:true,
    //         backgroundColor:new Cesium.Color(255,0,0),//实例化类

    //     }
    // })
    // 线
    // const polyline=viewer.entities.add({
    //     polyline:{
    //         positions:Cesium.Cartesian3.fromDegreesArray([-75,41,-75,40.5,-75.5,40.5]),
    //         width:10,
    //         material:Cesium.Color.YELLOWGREEN,
    //     }
    // })
    // viewer.zoomTo(polyline)

对于添加实体的封装。

addPointEntity(lngLatHeight, option = {}) {
    if (lngLatHeight.length < 3) {
        throw new Error('lngLatHeight must contain [lng, lat, height]');
    }

    let newOption = Object.assign({}, option);
    let positionTemp = Cesium.Cartesian3.fromDegrees(lngLatHeight[0], lngLatHeight[1], lngLatHeight[2]);
    newOption.color = new Cesium.Color.fromCssColorString(option.color || '#FF0000').withAlpha(option.alpha || 1.0);

    if (option.outlineColor) {
        newOption.outlineColor = new Cesium.Color.fromCssColorString(option.outlineColor);
    }

    let pointConfig = {
        position: positionTemp,
        point: {
            ...newOption
        }
    };

    if (newOption.id) {
        pointConfig.id = newOption.id;
    }

    return this.viewer.entities.add(pointConfig);
}