【超图+CESIUM】【基础API使用示例】17、超图|CESIUM - 手动设置场景的二三维展示

前言

	缺少前置学习使用资料,请自行查阅:[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)。
	手动设置场景的二三维展示,也可通过设置sceneModePicker:true的方式显示右上角的自带控件。

使用

  • 效果
    【超图+CESIUM】【基础API使用示例】17、超图|CESIUM - 手动设置场景的二三维展示
    【超图+CESIUM】【基础API使用示例】17、超图|CESIUM - 手动设置场景的二三维展示

  • 完整代码

<!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%;
      }
      .panel {
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 1;
        background-color: #fff;
      }
      .panel .btn {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="cesium-container" />
    <div class="panel">
      <p class="btn">三维场景</p>
      <p class="btn">平面场景</p>
    </div>
    <script>
      // 注意:四种模式自行测试
      // Cesium.SceneMode.COLUMBUS_VIEW : 哥伦布视图模式。一个 2.5D 透视图,其中地图平放,其上方绘制了非零高度的对象。
      // Cesium.SceneMode.MORPHING : 在模式之间变形,例如,3D 到 2D。
      // Cesium.SceneMode.SCENE2D : 二维模式。使用正交投影自上而下查看地图。
      // Cesium.SceneMode.SCENE3D : 3D模式。地球的传统 3D 透视图。
      let viewer = null
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container', {
          sceneModePicker: false, // 右上角模式切换控件
          navigation: false,
        })
        // setS3MServiceHandler()
        changeSceneModeHandler()
      }

      // 点击切换场景模式
      function changeSceneModeHandler() {
        const btns = document.querySelectorAll('.panel .btn')
        btns[0].style.color = 'red'
        btns[0].addEventListener('click', () => {
          btns[0].style.color = 'red'
          btns[1].style.color = '#000'
          viewer.scene.mode = Cesium.SceneMode.SCENE3D //三维场景
        })
        btns[1].addEventListener('click', () => {
          btns[1].style.color = 'red'
          btns[0].style.color = '#000'
          viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW //平面场景
        })
      }
      // 添加由supermap iserver上发布的s3m服务
      function setS3MServiceHandler() {
        viewer.scene.open(
          'http://www.supermapol.com/realspace/services/3D-NewCBD/rest/realspace'
        )
      }
    </script>
  </body>
</html>

上一篇:图片上传后进行查看


下一篇:[已读]响应式web设计实践