【超图+CESIUM】【基础API使用示例】45、超图|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, pointLight
      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)
          addPointLightHandler()
        })
        btns[1].addEventListener('click', () => {
          activeCurrentClickBtnHandler(1)
          removePointLightHandler()
        })
      }

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

      // 添加点光源到场景中
      function addPointLightHandler() {
        const position = new Cesium.Cartesian3(
          -2180734.470505298,
          4379055.704271189,
          4092558.53920364
        )
        const options = {
          color: new Cesium.Color(1, 1, 1, 1), // 光源颜色
          cutoffDistance: 10, // 扩散距离
          decay: 1, // 衰减因子
          intensity: 20, // 光源强度
        }
        pointLight = new Cesium.PointLight(position, options)
        scene.addLightSource(pointLight)
      }
      // 删除点光源
      function removePointLightHandler() {
        scene.removeLightSource(pointLight)
      }
      // 设置场景指定视角
      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)