cesium兩種方式鼠標移入移出實體顯示提示框

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);

第二種方式

採用自定義提示框

// 鼠標移入自定義彈出框
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);

自定義提示框採用此人的