Cesium 注册及移除事件

最新推荐文章于 2024-06-06 11:41:31 发布

炉火纯青-旺

最新推荐文章于 2024-06-06 11:41:31 发布

阅读量432

点赞数

分类专栏： cesium 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_34870529/article/details/128951660

版权

cesium 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!-- Cesium 监听鼠标移动事件，动态展示经纬度及视高-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../Build/Cesium/Widgets/widgets.css">
    <script src="../../Build/Cesium/Cesium.js"></script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }

        #cesiumContainer {
            width: 100vw;
            height: 100vh;
        }
        #latlng_show {
            height: 10px;
            position: absolute;
            bottom: 15px;
            right: 60px;
            z-index: 1;
            font-size: 15px;
            display: flex;
            
        }
        #latlng_show div{
            display: flex;  
            color: #fff;
            font-size: 14px;
            margin: 0px 10px;
        }
        #latlng_show div .value{
            display: inline-block;
            min-width: 60px;
        }
        .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div id="latlng_show">
        <div>
            <span>经度：</span>
            <span id="longitude" class="value"></span>
        </div>
        <div>
            <span>纬度：</span>
            <span id="latitude" class="value"></span>
        </div>
        <div>
            <span>视角高：</span>
            <span id="altitude" class="value"></span>km
        </div>
    </div>
    <script type="module">
        Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjMzMTFmMC1lOGUzLTQ0YzktYWFkMi0xZWY0MTQzYWE4ZTIiLCJpZCI6ODYzODIsImlhdCI6MTY0Nzc3Nzk3NX0.mAsYfxhSP95hSfqS4w0AQE3xsLR4M6txJfAqZUrbvEM';
        
        const viewer = window.viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,                 // 动画小组件
            baseLayerPicker: false,           // 底图组件，选择三维数字地球的底图（imagery and terrain）。
            fullscreenButton: false,          // 全屏组件
            vrButton: false,                  // VR模式
            geocoder: false,                  // 地理编码（搜索）组件
            homeButton: false,                // 首页，点击之后将视图跳转到默认视角
            infoBox: false,                   // 信息框
            sceneModePicker: false,           // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
            selectionIndicator: false,        // 是否显示选取指示器组件
            timeline: false,                  // 时间轴
            navigationHelpButton: false,      // 帮助提示，如何操作数字地球。
            navigationInstructionsInitiallyVisible: false,        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
            terrainProvider: Cesium.createWorldTerrain(),
        });
        
        let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        
        // 注册地图鼠标移动事件
        handler.setInputAction(mouseMoveEvent, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // 注册鼠标左键点击事件
        handler.setInputAction(leftMouseClickEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        
        function leftMouseClickEvent (movement) {
            
            const ellipsoid = viewer.scene.globe.ellipsoid;
            
            // 捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
            const cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
            
            // 将笛卡尔三维坐标转为地图坐标（弧度）
            const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
            
            // 将地图坐标（弧度）转为十进制的度数
            const lat_string = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
            const lon_string = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
            const alti_string = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
            
            console.log('leftMouseClickEvent', lon_string, lat_string, alti_string);
        }
        
        function mouseMoveEvent (movement) {
            const { lat_string, lon_string, alti_string } = cartesianToCartographic(movement);
            // console.log(lat_string, lon_string, alti_string);
            
            document.getElementById('longitude').innerHTML = lon_string;
            document.getElementById('latitude').innerHTML = lat_string;
            document.getElementById('altitude').innerHTML = alti_string;
        }
        
        function cartesianToCartographic(movement){
            if(!movement) return null;
            
            const ellipsoid = viewer.scene.globe.ellipsoid;
            
            // 捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
            const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
            
            // 将笛卡尔三维坐标转为地图坐标（弧度）
            const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
            
            // 将地图坐标（弧度）转为十进制的度数
            const lat_string = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
            const lon_string = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
            const alti_string = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
            
            return { lat_string, lon_string, alti_string };
        }
        
        
        setTimeout(() => {
            // 移除鼠标左键点击事件
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            // 移除鼠标移动事件
            handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        }, 5000);
       
  </script>
</body>

</html>