Cesium-1.72学习（地球鹰眼图）

最新推荐文章于 2024-09-11 13:05:52 发布

永恒的狼牙

最新推荐文章于 2024-09-11 13:05:52 发布

阅读量938

点赞数

分类专栏： Cesium 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43117449/article/details/108317273

版权

Cesium 专栏收录该内容

8 篇文章 6 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鹰眼图</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
    <style>
        #eye {
            position: absolute;
            width: 20%;
            height: 20%;
            bottom: 50px;
            right: 30px;
            z-index: 999;
            border: solid blue 1px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
    <div id="eye"></div>
</div>
</html>
<script>
    //1.创建双球
    var viewer = new Cesium.Viewer('cesiumContainer',{
        geocoder:false,
        homeButton:false,
        sceneModePicker:false,
        baseLayerPicker:false,
        navigationHelpButton:false,
        animation:false,
        timeline:false,
        fullscreenButton:false
    });
    var viewer1 = new Cesium.Viewer('eye',{
        geocoder:false,
        homeButton:false,
        sceneModePicker:false,
        baseLayerPicker:false,
        navigationHelpButton:false,
        animation:false,
        timeline:false,
        fullscreenButton:false
    });

    //2.设置鹰眼图中球属性
    let control = viewer1.scene.screenSpaceCameraController;
    control.enableRotate = false;
    control.enableTranslate = false;
    control.enableZoom = false;
    control.enableTilt = false;
    control.enableLook = false;
    let syncViewer = function() {
        viewer1.camera.flyTo({
            destination: viewer.camera.position,
            orientation: {
                heading: viewer.camera.heading,
                pitch: viewer.camera.pitch,
                roll: viewer.camera.roll
            },
            duration: 0.0
        });
    };

    //3. 同步
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(0, 0),
        label : {
            text : new Cesium.CallbackProperty(function(){
                syncViewer();
                return "";
            }, true)
        }
    });

</script>