entity实体操作

添加点线面实体

在cesium中，添加实体可以操作viewer.entities.add(entity)进行添加

在下面创建了一个点、线、多边形实体，分别用id区分，之后直接通过add方法将三个实体添加到viewer中，并且通过zoomTo方法将相机移动到该实体的中心位置

function drawPoint() {
    const point = {
        id: 'point',
        position: Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0),
        point: {
            pixelSize: 5,
            color: Cesium.Color.BLUE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.RED,
        }
    }

    const line = {
        id: 'line',
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([
                112.4175, 25.655,
                112.4175, 27.655,
                113.4175, 26.655,
            ]),
            width: 20,
            material: Cesium.Color.RED.withAlpha(0.5),
        }
    }

    const polygon = {
        id: 'polygon',
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray([
                114.4175, 31.655,
                125.4175, 31.655,
                125.4175, 36.655,
                116.4175, 36.655,
            ]),
            height: 100,
            // 平面厚度
            extrudedHeight: 10000,
            // material: Cesium.Color.BLUE.withAlpha(0.5),
            // 添加纹理贴图  在当前^1.112.0版本当中repeat不生效，并且绘制的纹理只有图片的一小部分
            material: new Cesium.ImageMaterialProperty({
                image: './src/assets/image/zhihu.png',
                repeat: new Cesium.Cartesian2(10, 10),
            }),
            outline: true,
            outlineColor: Cesium.Color.RED.withAlpha(0.5),
            outlineWidth: 10,
            fill: true,
        }
    }

    viewer.value.entities.add(point)
    viewer.value.entities.add(line)
    viewer.value.entities.add(polygon)

    viewer.value.zoomTo(polygon)
}

实体删除

在cesium中，删除实体可以操作viewer.entities.remove(entity)进行删除

当给实体设置了id属性时，可以使用removeById方法删除，也可以通过remove方法删除，也可以使用removeAll方法删除所有实体

function removePoint() {
    // 通过id删除
    viewer.value.entities.removeById('point')
    // 通过对象删除
    const line = viewer.value.entities.getById('line')
    viewer.value.entities.remove(line)
    // 全部删除
    viewer.value.entities.removeAll()
}

添加billBoard标牌实体

billboard是cesium中一种标牌的实体，可以添加在点、线、面等实体上，可以设置标牌的图片、文字、颜色等属性

function drawBillBoard() {
    const billBoard = {
        position: Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0),
        billboard: {
            image: '/src/assets/logo.png',
            scale: 0.2,
            // sizeInMeters: true, // 设置为true，点的大小将以米为单位
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平相对中心位置
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, 30), // 偏移角度
            rotation: Math.PI / 2, // 旋转角度 相对于PI
            // scaleByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 3), // 近大远小 比例
            // pixelOffsetScaleByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 3), // 近大远小 偏移量
            // translucencyByDistance: new Cesium.NearFarScalar(20000, 1, 8000000, 0), // 近大远小 透明度
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(2000, 800000), // 只在距离内显示
        },
        label: {
            text: 'Hello World',
            scale: 0.5,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.BLUE,
            outlineColor: Cesium.Color.RED,
            showBackground: true,
            // backgroundColor: Cesium.Color.YELLOW,
            // backgroundColor: new Cesium.Color(1, 1, 1, 1),
            // backgroundColor: Cesium.Color.fromBytes(0, 0, 0, 255),
            // backgroundColor: Cesium.Color.fromCartesian4(new Cesium.Cartesian4(1, 1, 1, 1)),
            backgroundColor: Cesium.Color.fromCssColorString('#f40'),
            pixelOffset: new Cesium.Cartesian2(0, 0),
            eyeOffset: new Cesium.Cartesian3(0, 0, -10),
        }
    }
    viewer.value.entities.add(billBoard)
}

添加模型实体

这里可以添加模型实体，可以添加gltf、glb、等模型文件

function addGLBModel() {
    const position = Cesium.Cartesian3.fromDegrees(112.4175, 25.655, 0);
    // 调整模型的旋转弧度  通过Cesium.Math.toRadians进行控制（模型的朝向）
    let hpRoll = new Cesium.HeadingPitchRoll(0, Cesium.Math.toRadians(40), Cesium.Math.toRadians(40));
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    const model = viewer.value.entities.add({
        id: '',
        position: position,
        orientation: orientation,
        model: {
            uri: './src/assets/glb/island.glb',
            // color: Cesium.Color.BLUE,
            // 颜色和模型颜色混合模式 HIGHLIGHT 高亮 MIX 混合 REPLACE 替换
            // colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
            // minimumPixelSize: 128,
            // maximumScale: 20000,
            // 轮廓颜色和大小
            silhouetteColor: Cesium.Color.RED,
            silhouetteSize: 10,
            // 在一个范围内才展示
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 800000),
            // 开启模型的动画
            shouldAnimate: true,
            // 显示阴影 需要在初始化地图时开启场景的阴影效果
            shadows: Cesium.ShadowMode.ENABLED
        }
    })
    viewer.value.zoomTo(model)
}

扩展：阴影展示

在上图可以看到模型的阴影效果，不单单只是在model上加个shadows阴影属性就可以了，还需要在初始化地图时开启场景的阴影效果

viewer.value.shadows = true
viewer.value.scene.globe.enableLighting = true

[ ] 计划 A
[x] 计划 B

entity实体操作 ​

添加点线面实体 ​

实体删除 ​

添加billBoard标牌实体 ​

添加模型实体 ​