zoukankan html css js c++ java

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=字符串值

本文由创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/20 20:18

查看全文

相关阅读:
jsp文件中charset和pageEncoding的区别
 如果jsp表单元素的值为空，如何避免null出现在页面上？
C# 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。
正则表达式
 事件委托与键盘事件
 事件对象的兼容性
 作用域解析题
 事件冒泡与事件铺获的解析
 浏览器内核
 js中级总结

原文地址：https://www.cnblogs.com/telwanggs/p/11289455.html

Cesium获取经度 ，纬度，高度

实例代码

说明

Cesium获取经度，纬度，高度