【超图+CESIUM】【基础API使用示例】12、超图｜CESIUM - 设置场景视角定位的几种方式

最新推荐文章于 2024-05-15 11:16:50 发布

汪同学丶

最新推荐文章于 2024-05-15 11:16:50 发布

阅读量1.8k

点赞数

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

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

版权

超图+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)。
	设置场景视角定位的几种方式。

使用

内容简介

viewer.scene.camera.setView
viewer.flyTo
viewer.scene.camera.flyTo
viewer.scene.open
效果
完整代码

<!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;
      }
      #fly-to-mode {
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 1;
        box-sizing: border-box;
        padding: 4px;
        border-radius: 2px;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <select id="fly-to-mode">
      <option value="0" selected>请选择一种模式</option>
      <option value="1">直接设置场景视角</option>
      <option value="2">飞到指定的对象（实体entity、图层等）</option>
      <option value="3">飞到指定的视角</option>
      <option value="4">直接定位到当前打开的服务的位置</option>
    </select>
    <script>
      // new Cesium.Cartesian3.fromDegrees 经纬度坐标
      // new Cesium.Cartesian3 投影坐标
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        listenSelectChangeHandler()
      }
      function listenSelectChangeHandler(params) {
        const flyToMode = document.querySelector('#fly-to-mode')
        flyToMode.addEventListener('change', (val) => {
          const currentSelectedMode = flyToMode.value
          switch (currentSelectedMode) {
            case '0': // 不用处理
              break
            case '1': // 直接设置场景视角
              setViewerViewByParamsHandler({
                x: 116.48368313561016,
                y: 39.911532190450295,
                z: 369.08993153401934,
                heading: 4.771817,
                pitch: -0.190922,
                roll: 0.0,
              })
              break
            case '2': // 飞到指定的对象（实体entity、图层等）
              const layer = viewer.imageryLayers.addImageryProvider(
                // 先添加一个layer 用来定位
                new Cesium.SuperMapImageryProvider({
                  url: 'http://{s}/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult',
                  subdomains: ['www.supermapol.com'],
                })
              )
              flyToObjHandler({
                obj: layer,
                duration: 3,
              })
              break
            case '3':
              flyToCameraViewByParams({
                x: 116.43518565219966,
                y: 39.95097107746538,
                z: 2078.0503226706123,
                heading: 2.718565,
                pitch: -0.415366,
                roll: 0.0,
              })
              break
            case '4':
              flyToServiceByOpen()
              break
          }
        })
      }

      // 1、直接设置场景视角 - viewer.scene.camera.setView 适用于初始化场景时直接指定观察视角
      function setViewerViewByParamsHandler({ x, y, z, heading, pitch, roll }) {
        viewer.scene.camera.setView({
          destination: new Cesium.Cartesian3.fromDegrees(x, y, z),
          orientation: {
            heading,
            pitch,
            roll,
          },
        })
      }
      // 2、飞到指定的对象（实体entity、图层等）- viewer.flyTo 适用于后续操作触发视角设置
      function flyToObjHandler({ obj, duration, maximumHeight }) {
        viewer.flyTo(obj, {
          duration: duration || 1, // 飞行的持续时间 s为单位
          maximumHeight: maximumHeight || 10, // 飞行中的最大高度
          // offset: new Cesium.HeadingPitchRange(heading, pitch, range) // 在以目标为中心的局部“东-北-上”参考系中，距离目标的偏移量
        })
        // 第二种方式
        // viewer.zoomTo(obj, {
        //   heading: ,
        //   pitch: ,
        //   roll: 
        // })
      }
      // 3、飞到指定的视角viewer.scene.camera.flyTo 适用于后续操作触发视角设置
      function flyToCameraViewByParams({ x, y, z, heading, pitch, roll }) {
        viewer.scene.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(x, y, z),
          orientation: {
            heading,
            pitch,
            roll,
          },
        })
      }
      // 4、viewer.scene.open 默认会直接定位到当前打开的服务的位置，我们可以在promise异步结束后再手动设置flyto...
      function flyToServiceByOpen() {
        setS3MServiceHandler()
      }
      // 添加由supermap iserver上发布的s3m服务
      function setS3MServiceHandler() {
        viewer.scene.open(
          'http://www.supermapol.com/realspace/services/3D-NewCBD/rest/realspace'
        )
      }
    </script>
  </body>
</html>

汪同学丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【超图+CESIUM】【基础API使用示例】12、超图｜CESIUM - 设置场景视角定位的几种方式

超图+cesiumjs长江视角定位的几种方式viewer.scene.camera.setView、viewer.flyTo、viewer.scene.camera.flyTo、viewer.scene.open
复制链接

扫一扫