【超图+CESIUM】【基础API使用示例】47、超图|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)。
	平行光源设置。

使用

  • 效果

  • 完整代码

<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;
        padding: 10px;
      }
      .panel .btn {
        cursor: pointer;
      }
    style>
  head>
  <body>
    <div id="cesium-container" />
    <div class="panel">
      <p class="btn">添加平行光源p>
      <p class="btn">清除平行光源p>
    div>
    <script>
      // 前置引入echarts|echartlayer js脚本
      let viewer, scene, directionalLight_h1, directionalLight_v
      window.onload = function () {
        viewer = new Cesium.Viewer('cesium-container')
        scene = viewer.scene
        loadModelHandler()
        initBindBtnEventHandler()
      }

      // 初始化绑定按钮的点击事件
      function initBindBtnEventHandler() {
        const btns = document.querySelectorAll('.panel .btn')
        btns[0].addEventListener('click', () => {
          activeCurrentClickBtnHandler(0)
          addDirectionLightHandler()
        })
        btns[1].addEventListener('click', () => {
          activeCurrentClickBtnHandler(1)
          removeDirectionLightHandler()
        })
      }

      // 加载模型
      function loadModelHandler() {
        const promise = viewer.scene.open(
          'http://www.supermapol.com/realspace/services/3D-BIMbuilding/rest/realspace'
        )
        Cesium.when(promise, () => {
          setSceneCameraViewHandler()
        })
      }

      // 添加点光源到场景中
      function addDirectionLightHandler() {
        // 以下为水平光源设置
        const position1 = new Cesium.Cartesian3(
          -2180878.0519406004,
          4378948.067730668,
          4092609.6775166253
        )
        const options1 = { // 水平光源
          intensity: 2, // 光源强度
        }
        directionalLight_h1 = new Cesium.DirectionalLight(position1, options1)
        // 以下为垂直光源设置
        const position = new Cesium.Cartesian3(
          -2180765.1825337997,
          4379131.271389126,
          4092630.162654784
        )
        const options = { // 垂直光源
          intensity: 2, // 光源强度
        }
        directionalLight_v = new Cesium.DirectionalLight(position, options)
        scene.addLightSource(directionalLight_v)
        scene.addLightSource(directionalLight_h1)
      }
      // 删除点光源
      function removeDirectionLightHandler() {
        scene.removeLightSource(directionalLight_v)
        scene.removeLightSource(directionalLight_h1)
      }
      // 设置场景指定视角
      function setSceneCameraViewHandler() {
        scene.camera.setView({
          destination: new Cesium.Cartesian3(
            -2180753.065987198,
            4379023.266141494,
            4092583.575045952
          ),
          orientation: {
            heading: 4.0392222751147955,
            pitch: 0.010279641987852584,
            roll: 1.240962888005015e-11,
          },
        })
      }

      // 高亮当前点击的按钮
      function activeCurrentClickBtnHandler(idx) {
        const btns = document.querySelectorAll('.panel .btn')
        Array.from(btns).forEach((btn, index) => {
          btn.style.color = index === idx ? 'red' : '#000'
        })
      }
    script>
  body>
html>

你可能感兴趣的:(超图+CESIUMJS,超图+CESIUM)