vue3使用cesium(一)：标记点

vue3使用cesium添加、删除、点击标记点

1.添加标记点

    
    let marker = viewer.entities.add({
            clickType: 'marker',
            position: Cesium.Cartesian3.fromDegrees(经度，纬度，高度),
            billboard: {
                image: 标记点marker,
                width: 35, 
                height: 35
            },
            properties: {
                //自定义数据
            },
            label: {
                //文字标签
                text: 标签名称,
                font: '14px',
                fillColor: Cesium.Color.BLUE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                showBackground: true,
                backgroundColor: new Cesium.Color(1, 1, 1, 0.5),
                backgroundPadding: new Cesium.Cartesian2(7, 5),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
                pixelOffset: new Cesium.Cartesian2(0, -20), //偏移量
            },
            name: '', // 自带infoBox的title
            description: '' // 自定义官方描述信息
        })

2.删除标记点

viewer.entities.remove(marker)

3.标记点点击

   viewer.screenSpaceEventHandler.setInputAction((movement) => {
        //点击事件
        let target = viewer.scene.pick(movement.position);
        if (Cesium.defined(target)) {
            // 其他点击逻辑
            if (target.id) {
                // 点击标注
                if (target?.id?.clickType === 'marker') { 
                    // ...处理点击逻辑
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

示例：