【Cesium】日照分析（完整示例）

---

前言

通过Cesium，实现倾斜摄影模型在24小时日照下影子的变化。

原理

具体实现日照分析的方法如下:首先，在Cesium中加载需要进行日照分析的地图数据，例如卫星影像或数字高程模型等。然后，通过Cesium的API接口，获取需要进行日照分析的点的经纬度坐标及时间信息。接着，根据点的位置和时间信息，利用天文计算公式计算出该点在该时刻的太阳高度角和方位角等参数。最后，根据太阳高度角和方位角等参数，判断该点当前是否被太阳照射，从而计算出日照时数和日出、日落等指标。

---

一、播放按钮

<div id="menu">
    <p>
      <button @click="setvisible('play')">播放</button>
    </p>
    <p>
      <button @click="setvisible('stop')">暂停</button>
    </p>
  </div>

二、加载倾斜摄影

let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url: 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json' // '../Source/3DTiles/building/tileset.json'
}))
tileset.readyPromise.then(function(tileset) {
  viewer.scene.primitives.add(tileset)
  viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0))
}).otherwise(function(error) {
  console.log(error)
})

三、开始和停止

根据场景的数据和时间参数，利用Cesium内置的工具计算出每个时段内地表的日照情况。这一计算过程需要借助Cesium的模拟光线功能，模拟太阳光在地表的投射情况。

stratPlay() {
  if (viewer.clock.shouldAnimate = !0, stopTime) {
    viewer.clock.currentTime = stopTime
  } else {
    var e = '2019-06-18',
      t = new Date(e),
      i = '10',
      a = '18',
      r = new Date(new Date(t).setHours(Number(i))),
      o = new Date(new Date(t).setHours(Number(a)))
    viewer.scene.globe.enableLighting = !0,
      viewer.shadows = !0,
      viewer.clock.startTime = Cesium.JulianDate.fromDate(r),
      viewer.clock.currentTime = Cesium.JulianDate.fromDate(r),
      viewer.clock.stopTime = Cesium.JulianDate.fromDate(o),
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP,
      viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
      viewer.clock.multiplier = 1600
  }
},
stopPlay() {
  this.stopTime = viewer.clock.currentTime
  viewer.clock.shouldAnimate = !1
},

四、完整示例

<template>
  <div id="cesiumContainer"></div>
  <div id="menu">
    <p>
      <button @click="setvisible('play')">播放</button>
    </p>
    <p>
      <button @click="setvisible('stop')">暂停</button>
    </p>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        stopTime: null
      }
    },
    mounted() {
      window.viewer = viewer = new Cesium.Viewer('cesiumContainer', {
        // 是否显示全屏控件
        fullscreenButton: false,
        // 是否显示图层选择控件
        baseLayerPicker: false,
        // 是否显示选择指示器（选择实体，模型等时的绿色小框）
        selectionIndicator: false,
        // 是否显示信息框
        infoBox: false,
        // 是否显示动画控件
        animation: false,
        // 是否显示Home控件
        homeButton: false,
        // 是否显示搜索地名控件
        geocoder: false,
        // 是否显示时间线控件
        timeline: false,
        // 是否显示场景模式转换控件
        sceneModePicker: false,
        // 是否显示导航控件
        navigationHelpButton: false,
        // vr模式
        vrButton: false,
        // 加载cesium本地图层
        imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl('./Assets/Textures/NaturalEarthII')
        })
      })

let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url: 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json' // '../Source/3DTiles/building/tileset.json'
}))
tileset.readyPromise.then(function(tileset) {
  viewer.scene.primitives.add(tileset)
  viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0))
}).otherwise(function(error) {
  console.log(error)
})

    },
    methods: {
stratPlay() {
  if (viewer.clock.shouldAnimate = !0, stopTime) {
    viewer.clock.currentTime = stopTime
  } else {
    var e = '2019-06-18',
      t = new Date(e),
      i = '10',
      a = '18',
      r = new Date(new Date(t).setHours(Number(i))),
      o = new Date(new Date(t).setHours(Number(a)))
    viewer.scene.globe.enableLighting = !0,
      viewer.shadows = !0,
      viewer.clock.startTime = Cesium.JulianDate.fromDate(r),
      viewer.clock.currentTime = Cesium.JulianDate.fromDate(r),
      viewer.clock.stopTime = Cesium.JulianDate.fromDate(o),
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP,
      viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
      viewer.clock.multiplier = 1600
  }
},
stopPlay() {
  this.stopTime = viewer.clock.currentTime
  viewer.clock.shouldAnimate = !1
},

      setvisible(value) {
        switch (value) {
          case 'play':
            this.stratPlay()
            break
          case 'stop':
            this.stopPlay()
            break
        }
      }
    }
  }
</script>

<style>
  html,
  body,
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #menu {
    position: absolute;
    top: 80px;
    left: 10px;
    z-index: 999;
  }
</style>

---

#总结

最后将计算结果以可视化的形式呈现出来，例如在地图上绘制出不同颜色的区域表示日照强度。