Cesium 3dtiles点击高亮

<script  setup  lang="ts">
import CesiumBox from '@/components/CesiumBox/index.vue'
import * as Cesium from 'cesium';
import { onMounted, ref } from 'vue';
const addData = () => {
    if (!window.viewer) return;
    const viewer = window.viewer as Cesium.Viewer;
    const tiles = new Cesium.Cesium3DTileset({
        //url: Cesium.IonResource.fromAssetId(44611),
        url: "/3dtiles/01/tileset.json",

    });
    tiles.readyPromise.then((tileset) => {
        const transparentStyle = new Cesium.Cesium3DTileStyle({
            color: "color('white', 0.3)",
            show: true
        });

        //查看属性信息
        const properties = tileset.properties;
        if (Cesium.defined(properties)) {
            for (var name in properties) {
                console.log(properties[name]);
            }
        }
        //使用特定于每个特征的属性来确定颜色值
        const heightStyle = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ["${Height} >= 100", "rgba(45, 0, 75, 0.5)"],
                    ["${Height} >= 75", "rgb(102, 71, 151)"],
                    ["${Height} >= 50", "rgb(170, 162, 204)"],
                    ["${Height} >= 35", "rgb(224, 226, 238)"],
                    ["${Height} >= 25", "rgb(252, 230, 200)"],
                    ["${Height} >= 10", "rgb(248, 176, 87)"],
                    ["${Height} >= 5", "rgb(198, 106, 11)"],
                    ["true", "rgb(127, 59, 8)"]
                ]
            }
        });
        viewer.scene.primitives.add(tileset);
        //包围球  获取Cesium3DTileset的包裹求  参数包括中心点和半径
        const boundingSphere = tileset.boundingSphere;
        //根据包围球算出经纬度
        const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        //将地球表面的经纬度转换为世界坐标
        const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        //移动物体高度1000后的经纬度坐标
        const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0);
        //起始点到终点的差值，移动了多少，往那个方向移动
        const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        //根据差值转为平移矩阵赋值到模型矩阵
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

        tileset.style = heightStyle;
        viewer.zoomTo(tileset)
    })


    //高亮显示代码
    const previousPickedEntity = ref<any>({
        feature: undefined,
        originalColor: undefined
    })

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);


        /*viewer.screenSpaceEventHandler*/handler.setInputAction(function (movement) {

        const pickingEntity = viewer.scene.pick(movement.position);
        //判断选择是否为Cesium3DTileFeature

        if (pickingEntity instanceof Cesium.Cesium3DTileFeature) {
            //获取3dtiles的属性
            var propertyNames = pickingEntity.getPropertyNames();
            var length = propertyNames.length;
            for (var i = 0; i < length; ++i) {
                var propertyName = propertyNames[i];
                console.log(propertyName + ': ' + pickingEntity.getProperty(propertyName));
            }
            //判断以前是否选择要素
            if (pickingEntity != previousPickedEntity.value.feature) {
                if (previousPickedEntity.value.feature != undefined) {
                    //还原前选择要素的本颜色
                    previousPickedEntity.value.feature.color = previousPickedEntity.value.originalColor;
                    //将当前选择要素及其颜色添加到previousPickedEntity
                    previousPickedEntity.value.feature = pickingEntity;
                    previousPickedEntity.value.originalColor = pickingEntity.color;
                }
                //将当前选择要素及其颜色添加到previousPickedEntity
                previousPickedEntity.value.feature = pickingEntity;
                previousPickedEntity.value.originalColor = pickingEntity.color;
            }
            //将模型变为黄色高亮
            pickingEntity.color = Cesium.Color.YELLOW;
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
onMounted(() => {
    addData();
})
</script>
<template>
    <CesiumBox />
</template>