cesium move鼠标在三维地球移动获取经度、纬度、视角高、海拔三维坐标转二维

最新推荐文章于 2024-01-12 11:24:43 发布

tianmeng1999

最新推荐文章于 2024-01-12 11:24:43 发布

阅读量1.4k

点赞数 2

分类专栏： cesium

本文链接：https://blog.csdn.net/weixin_42448623/article/details/101023184

版权

cesium 专栏收录该内容

28 篇文章 15 订阅

订阅专栏

获取 AccessToken

思路

监听鼠标在三维界面的移动

三维坐标转二维

//  三维坐标
function getLocation(pos){
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartographic = ellipsoid.cartesianToCartographic(pos);
    var lat = Cesium.Math.toDegrees(cartographic.latitude);
    var lng = Cesium.Math.toDegrees(cartographic.longitude);
    var alt = cartographic.height;
    // console.log("经纬度:",lat,lng,alt)
    return {x:lat,y:lng}
}

代码

获取相机高度

viewer.camera.positionCartographic.height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium move 测试</title>
    <script src="Cesium/Cesium.js" ></script>
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <style>
        html,body,#cesiumdiv{
            width:100%;
            height:100%;
            margin:0;
        }
        #latlng_show{
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 30px;
            left: 0;
            z-index: 1;
            font-size: 15px;
            line-height: 20px;
            text-align: right;
            display: flex;
            justify-content: flex-end;
            color:white;
            
        }
        #latlng_show>div{
            margin-right: 15px;
        }
    </style>
    <!-- <script src="./js/GifImageProperty.js"></script> -->

</head>
<body>
    <div id="cesiumdiv" >
        <div id="latlng_show">
            <div>经度：<span id="log_show">0</span></div>
            <div>纬度：<span id="lat_show">0</span></div>
            <div>视角高：<span id="alt_show">0</span>km</div>
            <div>海拔：<span id="elevation_show">0</span></div>
        </div>
    </div>
    <script>
        Cesium.Ion.defaultAccessToken = '你的秘钥';
       
        //创建地球
        var viewer = new Cesium.Viewer("cesiumdiv",{
            animation:true,
            timetimeline:true,  
            terrainExaggeration:3.0,
            terrainProvider:new Cesium.createWorldTerrain({ //加载全球地形
                requestVertexNormals:true, //有水面效果
                requestWaterMask:true, //光照效果
            }),
            scene3DOnly:true,
        })

        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印       
        viewer.scene.globe.depthTestAgainstTerrain = false;// 打开深度检测，那么在地形以下的对象不可见
        

        var log_show = document.getElementById("log_show");
        var lat_show = document.getElementById("lat_show");
        var alt_show = document.getElementById("alt_show");
        var elevation_show = document.getElementById("elevation_show");

        var ellipsoid = viewer.scene.globe.ellipsoid;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(move){
            //苗卡尔 二维平面坐标 转 苗卡尔椭球体的三维坐标 返回球体表面的点 
            var cartesian = viewer.camera.pickEllipsoid(move.endPosition,ellipsoid);
            if(cartesian){
                // 苗卡尔椭球体的三维坐标 转 地图坐标（弧度）
                var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                // 地图坐标（弧度） 转 十进制度数 toFixed保留小数点后几位
                var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);//经度
                var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);//纬度
                var alt_String = (viewer.camera.positionCartographic.height/1000).toFixed(2);//视角高
                var elec_String = viewer.scene.globe.getHeight(cartographic).toFixed(4);//海拔

                log_show.innerHTML = log_String;
                lat_show.innerHTML = lat_String;
                alt_show.innerHTML = alt_String;
                elevation_show.innerHTML = elec_String;
            }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE)


    </script>
    
</body>
</html>

效果

在这里插入图片描述

tianmeng1999

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
cesium move鼠标在三维地球移动获取经度、纬度、视角高、海拔三维坐标转二维

获取 AccessToken思路监听鼠标在三维界面的移动代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫