Front/src/components/useFeatureHighlight.js - main - BELEGO/GIS_APPLICATION

Front/src/components/useFeatureHighlight.js
141 строка6 KB
HACKER_LAPTOP
create 3d map
15 сен 2025, 13:55
15 сен 2025, 13:553f1f7d2
import * as Cesium from "cesium";

export function useFeatureHighlight(viewer) {
    const nameOverlay = document.createElement("div");
    viewer.container.appendChild(nameOverlay);
    nameOverlay.className = "backdrop";
    nameOverlay.style.display = "none";
    nameOverlay.style.position = "absolute";
    nameOverlay.style.bottom = "0";
    nameOverlay.style.left = "0";
    nameOverlay.style.pointerEvents = "none";
    nameOverlay.style.padding = "4px";
    nameOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
    nameOverlay.style.color = "white";

    const selected = { feature: undefined, originalColor: new Cesium.Color() };
    const selectedEntity = new Cesium.Entity();
    const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
    );

    function updateNameOverlay(pickedFeature, position) {
        if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = "none";
            return;
        }

        let name = "квадрат"; // текст по умолчанию

        // Если pickedFeature поддерживает getProperty
        if (typeof pickedFeature.getProperty === "function") {
            const bin = pickedFeature.getProperty("BIN");
            if (bin) name = bin;
        }
        // Если pickedFeature — Entity
        else if (pickedFeature.id) {
            const entityName = pickedFeature.id.name;
            if (entityName) name = entityName;
        }

        nameOverlay.style.display = "block";
        nameOverlay.style.bottom = `${viewer.canvas.clientHeight - position.y}px`;
        nameOverlay.style.left = `${position.x}px`;
        nameOverlay.textContent = name;
    }


    function createPickedFeatureDescription(pickedFeature) {
        // Если это 3D Tiles Feature
        if (typeof pickedFeature.getProperty === "function") {
            return `
          <table class="cesium-infoBox-defaultTable"><tbody>
            <tr><th>BIN</th><td>${pickedFeature.getProperty("BIN")}</td></tr>
            <tr><th>DOITT ID</th><td>${pickedFeature.getProperty("DOITT_ID")}</td></tr>
            <tr><th>SOURCE ID</th><td>${pickedFeature.getProperty("SOURCE_ID")}</td></tr>
            <tr><th>Longitude</th><td>${pickedFeature.getProperty("Longitude")}</td></tr>
            <tr><th>Latitude</th><td>${pickedFeature.getProperty("Latitude")}</td></tr>
            <tr><th>Height</th><td>${pickedFeature.getProperty("Height")}</td></tr>
            <tr><th>Terrain Height (Ellipsoid)</th><td>${pickedFeature.getProperty("TerrainHeight")}</td></tr>
          </tbody></table>
        `;
        }

        // Если это Entity
        if (pickedFeature.id) {
            return `<div><b>${pickedFeature.id.name || "Объект"}</b></div>`;
        }

        return "<div>Неизвестный объект</div>";
    }

    // Настройка подсветки
    if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        const silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
        silhouetteBlue.uniforms.length = 0.01;
        silhouetteBlue.selected = [];

        const silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteGreen.uniforms.color = Cesium.Color.LIME;
        silhouetteGreen.uniforms.length = 0.01;
        silhouetteGreen.selected = [];

        viewer.scene.postProcessStages.add(
            Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen])
        );

        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            silhouetteBlue.selected = [];
            const pickedFeature = viewer.scene.pick(movement.endPosition);
            updateNameOverlay(pickedFeature, movement.endPosition);
            if (!Cesium.defined(pickedFeature)) return;
            silhouetteBlue.selected = [pickedFeature];
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
            silhouetteGreen.selected = [];
            const pickedFeature = viewer.scene.pick(movement.position);
            if (!Cesium.defined(pickedFeature)) {
                clickHandler(movement);
                return;
            }
            silhouetteGreen.selected = [pickedFeature];
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description = createPickedFeatureDescription(pickedFeature);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    } else {
        const highlighted = { feature: undefined, originalColor: new Cesium.Color() };

        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            const pickedFeature = viewer.scene.pick(movement.endPosition);
            updateNameOverlay(pickedFeature, movement.endPosition);
            if (!Cesium.defined(pickedFeature)) return;

            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.YELLOW;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
            if (Cesium.defined(selected.feature)) {
                selected.feature.color = selected.originalColor;
                selected.feature = undefined;
            }
            const pickedFeature = viewer.scene.pick(movement.position);
            if (!Cesium.defined(pickedFeature)) {
                clickHandler(movement);
                return;
            }
            selected.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, selected.originalColor);
            pickedFeature.color = Cesium.Color.LIME;
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description = createPickedFeatureDescription(pickedFeature);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
}