Cesium点击显示经纬度以视角高度

最新推荐文章于 2024-09-26 18:14:18 发布

tfjy1997

最新推荐文章于 2024-09-26 18:14:18 发布

阅读量1.4k

点赞数

分类专栏：项目 cesium.js

本文链接：https://blog.csdn.net/wgf1997/article/details/103084873

版权

cesium.js 同时被 2 个专栏收录

10 篇文章 14 订阅

订阅专栏

项目

8 篇文章 0 订阅

订阅专栏

代码

<!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">
  <link rel="stylesheet" href="../js/Cesium-1.63.1/Build/Cesium/Widgets/widgets.css">
  <script src="../js/Cesium-1.63.1/Build/Cesium/Cesium.js"></script>
  <title>点击显示经纬度</title>
</head>
<body>
  <div id="abc"></div>

  <script>
    let viewer = new Cesium.Viewer("abc")
    var uid = 1;
      // 得到当前三维场景
      var sence = viewer.scene;

      // 得到当前三维场景的椭球体，即地球
      var ellipsoid = sence.globe.ellipsoid;
      var longitudeString = null;
      var latitudeString = null;
      var height = null;
      var cartesian = null;

      // 定义当前场景的画布元素的事件处理
      var handler = new Cesium.ScreenSpaceEventHandler(sence.canvas);
      // 设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
      handler.setInputAction(function(movement) {
        // 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
        cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        // 将笛卡尔坐标转换为地理坐标
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        // 将弧度转换为度的十进制表示
        longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        // 获取相机的高度
        height = Math.ceil(viewer.camera.positionCartographic.height);

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

      // 设置鼠标滚动事件的处理函数，这里负责监听高度值的变化
      handler.setInputAction(function () {
        height = Math.ceil(viewer.camera.positionCartographic.height);
      }, Cesium.ScreenSpaceEventType.WHEEL)

      handler.setInputAction(function (movement) {
        // 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
        // cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        height = Math.ceil(viewer.camera.positionCartographic.height);
        var a = viewer.entities.add({
          id: 'billboard' + uid,
          position: cartesian,
          label: {
            text: '(' + longitudeString + ', ' + latitudeString + ", " + height + ')',
            font: '20px monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 2,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, 0) // +左下 ， -右上 ， （x,y）
          }
        });
        uid++;
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  </script>
</body>
</html>