• Cesium获取经度 ,纬度,高度


    实例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取坐标转经纬度</title>
        <!--引入Cesium框架和部件css-->
        <script src="../ThirdParty/Cesium/Cesium.js"></script>
        <link rel="stylesheet" href="../ThirdParty/Cesium/Widgets/widgets.css">
    </head>
    <body>
    
    <!-- Cesium 容器 -->
    <div id="cesiumContainer" style="100%;height:100%"></div>
    <span id="mes" style="position: absolute;top:20px;left: 20px;z-index: 2;color: white;"></span>
    
    
    <!-- 应用代码 -->
    <script >
        //资源访问key,可以换成你的
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';
        //创建容器
        var  viewer=new Cesium.Viewer('cesiumContainer',{
        })
    
        //获取事件触发所在的  html Canvas容器
        var canvas=viewer.scene.canvas;
    
        //获取事件句柄
        var handler=new Cesium.ScreenSpaceEventHandler(canvas);
    
        //处理事件函数
        handler.setInputAction(function(movement){
    
            //拾取笛卡尔坐标
            var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体
            var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭圆上的结束点笛卡尔坐标点
            //转化笛卡尔坐标 为经纬度
            var mesDom=document.getElementById('mes');
            if(cartesian){
                var cartographic=ellipsoid.cartesianToCartographic(cartesian);//笛卡尔坐标转制图坐标
                var coordinate="经度:"+Cesium.Math.toDegrees(cartographic.longitude).toFixed(2)+",纬度:"+Cesium.Math.toDegrees(cartographic.latitude).toFixed(2)+
                        "相机高度:"+Math.ceil(viewer.camera.positionCartographic.height);
    
                mesDom.innerHTML=coordinate;
                mesDom.style.display="block";
            }else{
                mesDom.style.display="none";
            }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);//监听的是鼠标滑动事件
    
    
    </script>
    
    </body>
    </html>
    

    说明

    • 步骤:

      1. 加事件
      2. 事件处理中,获取椭球体笛卡尔坐标
      3. 笛卡尔坐标转制图坐标
      4. 获取html Dom元素,显示信息
    • 详细

      • 加事件 在Cesium中先new事件句柄,然后设置处理输入动作函数action,第二个参数是枚举,实际值为数字
         var handler=new Cesium.ScreenSpaceEventHandler(canvas)
         handler.setInputAction(处理函数:匿名函数/自定义函数的名,事件类型:Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        
      • 事件处理 在处理函数中写,事件处理代码获取坐标
          //拾取笛卡尔坐标
          var ellipsoid=viewer.scene.globe.ellipsoid;//全局椭球体
          var cartesian=viewer.scene.camera.pickEllipsoid(movement.endPosition,ellipsoid)//拾取鼠标在椭球体上的结束点笛卡尔坐标点 pickEllipsoid 拾取椭球体
        
      • 转坐标为经纬度,使用Cesium的Math toDegrees转度数
        转度数: Cesium.Math.toDegrees()
        经度:cartesian.longitude
        纬度:cartesian.latitude
        高度:使用的是相机所在位置的高度 viewer.camera.positionCartographic.height
        
      • 显示 使用JS dom API 如果获取到则显示,获取不到则不显示
          var dom=document.getElementById("id")
          dom.style.innerHTML=字符串值 
        
  • 相关阅读:
    AS3包类大全新手必学
    31天重构学习笔记27. 去除上帝类
    31天重构学习笔记26. 避免双重否定
    31天重构学习笔记29. 去除中间人对象
    与继承相关的一些重构(二)
    31天重构学习笔记28. 为布尔方法命名
    与继承相关的一些重构(一)
    31天重构学习笔记25. 引入契约式设计
    必会重构技巧(一):封装集合
    31天重构学习笔记30. 尽快返回
  • 原文地址:https://www.cnblogs.com/telwanggs/p/11289455.html
Copyright © 2020-2023  润新知