cesium鼠标移入移出实体显示提示框

疆~

已于 2023-07-24 09:39:17 修改

阅读量1.1k

点赞数

分类专栏： Cesium 文章标签：前端

于 2022-12-21 22:29:42 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/128402885

版权

Cesium 专栏收录该内容

29 篇文章 64 订阅

订阅专栏

效果图：

实现代码：

<template>
    <div id="cesiumContainer"></div>
</template>
    
<script setup>
import * as Cesium from "cesium";
import { onMounted, reactive } from "vue";

onMounted(() => {
    const viewer = new Cesium.Viewer("cesiumContainer", {
        infoBox: false, // 禁用沙箱，解决控制台报错
        selectionIndicator: false, //选择指示器
    });
    viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权
    viewer.entities.add({
        name: "测试点",
        position: Cesium.Cartesian3.fromDegrees(-75.0, 50.0), //经纬度转世界坐标
        point: {
            show: true,
            color: Cesium.Color.GREEN,
            pixelSize: 20,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3,
        },
    })
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    var labelEntity = viewer.entities.add({
        label: {
            show: false,
            showBackground: true,
            font: '14px monospace',
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            pixelOffset: new Cesium.Cartesian2(15, 0)
        }
    });
    // 鼠标移入labelEntity提示框
    handler.setInputAction((e) => {

        var foundPosition = false;

        var pickedObject = viewer.scene.pick(e.endPosition);
        if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id !== '') {
            var cartesian = viewer.scene.pickPosition(e.endPosition);

            if (Cesium.defined(cartesian)) {
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                labelEntity.position = cartesian;
                labelEntity.label.show = true;
                labelEntity.label.text =
                    '名称: ' + pickedObject.id._name;

                labelEntity.label.eyeOffset = new Cesium.Cartesian3(0.0, 0.0, -cartographic.height * (viewer.scene.mode === Cesium.SceneMode.SCENE2D ? 1.5 : 1.0));

                foundPosition = true;
            }
        }

        if (!foundPosition) {
            labelEntity.label.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


});
</script>
    
<style scoped>
#cesiumContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>