【超图+CESIUM】【基础API使用示例】13、超图｜CESIUM - 通过点击获取当前场景的视角和当前点击的位置的坐标

最新推荐文章于 2024-04-25 13:17:09 发布

汪同学丶

最新推荐文章于 2024-04-25 13:17:09 发布

阅读量815

点赞数

分类专栏：超图+CESIUMJS 文章标签：超图+CESIUMJS

本文链接：https://blog.csdn.net/weixin_44402694/article/details/123129593

版权

超图+CESIUMJS 专栏收录该内容

52 篇文章 45 订阅

订阅专栏

前言

	缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)
	以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。
	通过点击获取当前场景的视角和当前点击的位置的坐标。

使用

效果
完整代码

<!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>获取场景当前的视角参数</title>
    <link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="./public/Build/Cesium/Cesium.js"
    ></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #cesium-container {
        width: 100%;
        height: 100%;
      }
      .cesium-viewer-navigationContainer {
        display: none;
      }
      .panel {
        width: 300px;
        position: fixed;
        left: 10px;
        right: 10px;
        z-index: 1;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
      }
      .panel span {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <div class="panel">
      <div class="current-clicked-position">
        <h2>当前点击的位置(点击场景触发)</h2>
        <p>经度 <span></span></p>
        <p>纬度 <span></span></p>
        <p>高度 <span></span></p>
      </div>
      <div class="scene-camera-params">
        <h2>当前场景视角参数</h2>
        <p>x <span></span></p>
        <p>y <span></span></p>
        <p>z <span></span></p>
        <p>heading <span></span></p>
        <p>pitch <span></span></p>
        <p>roll <span></span></p>
      </div>
    </div>
    <script>
      // new Cesium.Cartesian3.fromDegrees 经纬度坐标
      // new Cesium.Cartesian3 投影坐标
      let viewer = null, scene = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        scene = viewer.scene
        getSceneCurrentCameraParamsHandler()
      }
      // 获取场景当前的视角参数|获取当前点击的位置
      function getSceneCurrentCameraParamsHandler() {
        const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas) // event事件处理程序
        handler.setInputAction((e) => {
          const { longitude, latitude, height } = getCurrentClickedPosHandler(e)
          addPointAtCurrentClickedPosHandler(longitude, latitude, height)
          getCameraParamsHandler()
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      // 获取当前点击的位置的经纬度高度
      function getCurrentClickedPosHandler(e) {
        //获取点击位置笛卡尔坐标
        const position = scene.pickPosition(e.position)
        //将笛卡尔坐标转化为经纬度坐标
        const cartographic = Cesium.Cartographic.fromCartesian(position)
        const longitude = Cesium.Math.toDegrees(cartographic.longitude)
        const latitude = Cesium.Math.toDegrees(cartographic.latitude)
        let height = cartographic.height
        if (height < 0) {
          height = 0
        }
        const ps = document.querySelectorAll('.current-clicked-position p')
        const lon = ps[0].querySelector('span') // 经度
        lon.innerHTML = longitude
        const lat = ps[1].querySelector('span') // 纬度
        lat.innerHTML = latitude
        const hei = ps[2].querySelector('span') // 高度
        hei.innerHTML = height
        return {
          longitude,
          latitude,
          height,
        }
      }
      // 在当前点击的位置删除之前添加的点位并进行当前点位的添加
      function addPointAtCurrentClickedPosHandler(longitude, latitude, height) {
        //首先移除之前添加的点
        viewer.entities.removeAll()
        //在点击位置添加对应点
        viewer.entities.add(
          new Cesium.Entity({
            point: new Cesium.PointGraphics({
              color: new Cesium.Color(1, 1, 0),
              pixelSize: 5,
              outlineColor: new Cesium.Color(0, 1, 1),
            }),
            position: Cesium.Cartesian3.fromDegrees(
              longitude,
              latitude,
              height + 1
            ),
          })
        )
      }
      // 获取当前场景的视角参数 - 笛卡尔坐标的xyz
      function getCameraParamsHandler() {
        const { position, heading, pitch, roll } = scene.camera
        const { x, y, z } = position
        const ps = document.querySelectorAll('.scene-camera-params p')
        const xSpan = ps[0].querySelector('span') // x
        xSpan.innerHTML = x
        const ySpan = ps[1].querySelector('span') // y
        ySpan.innerHTML = y
        const zSpan = ps[2].querySelector('span') // z
        zSpan.innerHTML = z
        const headingSpan = ps[3].querySelector('span') // heading
        headingSpan.innerHTML = heading
        const pitchSpan = ps[4].querySelector('span') // pitch
        pitchSpan.innerHTML = pitch
        const rollSpan = ps[5].querySelector('span') // roll
        rollSpan.innerHTML = roll
      }
    </script>
  </body>
</html>