【超图+CESIUM】【基础API使用示例】49、超图｜CESIUM -自定义按钮操作视角上下左右东西南北移动｜修改覆盖罗盘的上下左右东西南北的视角移动

汪同学丶

已于 2022-10-28 16:08:13 修改

阅读量1.3k

点赞数

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

于 2022-10-27 11:30:48 首次发布

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

版权

超图+CESIUMJS 专栏收录该内容

52 篇文章

订阅专栏

前言

缺少前置学习使用资料，请自行查阅：[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%;
    }
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .east, .north, .west, .south {
      padding: 10px;
      background-color: #fff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="east">east</div>
    <div class="north">north</div>
    <div class="west">west</div>
    <div class="south">south</div>
  </div>
  <div id="cesium-container" />
  <script>
    let viewer
    window.onload = function () {
      viewer = new Cesium.Viewer('cesium-container', {
        navigation: false
      })

      const east = document.querySelector('.east')
      const north = document.querySelector('.north')
      const south = document.querySelector('.south')
      const west = document.querySelector('.west')
      /*
      * 需要上下左右平移的幅度
      * 如果需要在不同的视角高度下动态设置平移的幅度，则可动态获取高度然后根据需求计算出幅度值
      * 获取视角高度的方法：viewer.camera.positionCartographic.height
      */
      const moveRate = 100000
      east.onclick = function () {
        viewer.camera.moveRight(moveRate)
      }
      north.onclick = function () {
        viewer.camera.moveUp(moveRate)
      }
      south.onclick = function () {
        viewer.camera.moveDown(moveRate)
      }
      west.onclick = function () {
        viewer.camera.moveLeft(moveRate)
      }
    }
  </script>
</body>

</html>

二、存在问题，请忽略 - 覆盖罗盘本身的上下左右的视角移动

代码实现

<!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%;
    }
  </style>
</head>

<body>
  <div id="cesium-container" />
  <script>
    let viewer
    window.onload = function () {
      viewer = new Cesium.Viewer('cesium-container', {
        navigation: true
      })

      const e = document.querySelector('.arrows_e_active')
      const n = document.querySelector('.arrows_n_active')
      const s = document.querySelector('.arrows_s_active')
      const w = document.querySelector('.arrows_w_active')
      /*
      * 需要上下左右平移的幅度
      * 如果需要在不同的视角高度下动态设置平移的幅度，则可动态获取高度然后根据需求计算出幅度值
      * 获取视角高度的方法：viewer.camera.positionCartographic.height
      */
      const moveRate = 1000000
      e.onclick = function () {
        viewer.camera.moveRight(moveRate)
      }
      n.onclick = function () {
        viewer.camera.moveUp(moveRate)
      }
      s.onclick = function () {
        viewer.camera.moveDown(moveRate)
      }
      w.onclick = function () {
        viewer.camera.moveLeft(moveRate)
      }
    }
  </script>
</body>

</html>