cesium两种方式鼠标移入移出实体显示提示框

时间:2024-03-22 20:14:49

cesium两种方式鼠标移入移出实体显示提示框

第一种方式

采用cesium的label作为提示框

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(function(movement) {

    var foundPosition = false;

    if (scene.mode !== Cesium.SceneMode.MORPHING) {
        var pickedObject = scene.pick(movement.endPosition);
        if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id !== '') {
            var cartesian = viewer.scene.pickPosition(movement.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 * (scene.mode === Cesium.SceneMode.SCENE2D ? 1.5 : 1.0));

                foundPosition = true;
            }
        }
    }

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

cesium两种方式鼠标移入移出实体显示提示框

第二种方式

采用自定义提示框

// 鼠标移入自定义弹出框
handler.setInputAction(function(movement) {
    if (scene.mode !== Cesium.SceneMode.MORPHING) {
        var pickedObject = scene.pick(movement.endPosition);
        if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id !== '') {
            TooltipDiv.showAt(movement.endPosition, "地区:" + pickedObject.id._name );
        } else {
            TooltipDiv.setVisible(false);
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

cesium两种方式鼠标移入移出实体显示提示框

自定义提示框采用此人