qe-shadow-analysis

这个组件主要用于三维中添加日照分析,支持场景日照效果的开启、暂停、清除。日照分析是指根据指定某个时间段进行动态模拟建筑物的光照方向以及产生的光照阴影，直观的表现建筑物某个时间段的光照效果。

---

实例

隐藏代码

<template>
  <div class="container">
    <div class="bar" style="position: absolute;top: 338px;right: 432px;">
      <el-button type="primary" size="mini" @click="add()">
        开启
      </el-button>
      <el-button type="info" size="mini" @click="pause()">
        暂停
      </el-button>
      <el-button type="danger" size="mini" @click="clear()">
        清除
      </el-button>
    </div>
    <qe-viewer
      :imagery-type="'AMap'"
      :default-view="defaultView"
      :location-bar="false"
      :viewer-mode="'3D'"
    >
      <qe-primitive-layer :visible="true" :name="'倾斜摄影图层'">
        <qe-tileset
          v-for="(url, index) in testJson"
          :key="index"
          :url="url"
          :is-zoom-to="true"
          :tileset-options="tilesetOptions"
          @ready="handleTileset"
        />
      </qe-primitive-layer>
      <qe-shadow-analysis @ready="handlerShadow" />
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer,QeShadowAnalysis,QePrimitiveLayer,QeTileset } from  '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
  components: {
    QeViewer,
    QeTileset,
    QePrimitiveLayer,
    QeShadowAnalysis
  },
  data() {
    return {
      testJson: ['http://221.226.186.58:8025/qearth-tileset/tileset.json'],
      defaultView: [122.06502636, 40.7235578, 1672, 357.62, -10.82, 359.99],
      tilesetOptions: {
        maximumMemoryUsage: 32,
        maximumScreenSpaceError: 16,
        baseScreenSpaceError: 1024,
        skipLevelOfDetail: true,
        dynamicScreenSpaceError: true,
        cullWithChildrenBounds: true,
        cullRequestsWhileMoving: true,
        preloadWhenHidden: true,
        preloadFlightDestinations: true,
        preferLeaves: true,
        loadSiblings: false
      }
    }
  },
  watch: {

  },
  created() {

  },
  methods: {
    handlerShadow(shadow) {
      this.shadow = shadow
    },
    handleTileset(tileset) {
      tileset.setHeight(0)
    },
    add() {
      this.shadow && this.shadow.play()
    },
    clear() {
      this.shadow && this.shadow.stop()
    },
    pause() {
      this.shadow && this.shadow.pause()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 450px;
 
}
.bar {
  padding: 20px 15px 20px 12px;
  border: 2px solid #008aff70;
  .el-form {
    ::v-deep .el-form-item__label {
      color: #fff;
      font-size: 14px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 130px;
      color: #fff;
      border-radius: 2px;
      background-color: transparent;
    }
    ::v-deep .el-form-item {
    margin-bottom: 10px;
}

  }
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 2;
  background-color: rgba(23, 49, 71, 0.8);
}
</style>

Methods

   //1.日照开启
    shadow.play()
    /**
     * @param {*} options||{}  play可加参数控制日照
     * @param {String} options.date 模拟日期（默认'2022-08-05'）
     * @param {String} options.startTime 开始时间（24小时制，默认'10'）
     * @param {String} options.stopTime 结束时间（24小时制，默认'18'）
     * @param {String} [options.clockRange = 'LOOP_STOP']   'LOOP_STOP' 当达到时钟stopTime时，会将当前前进到间隔的另一端。当时间向后移动时，时钟不会超过开始时间,'UNBOUNDED' 将始终将时钟沿其当前方向前进, 'CLAMPED' 将始终将时钟沿其当前方向前进。
     * @param {String} [options.clockStep = 'SYSTEM_CLOCK_MULTIPLIER'] 'SYSTEM_CLOCK_MULTIPLIER' 将当前时间提前一次调用以来经过的系统时间   量乘以时钟multiplier,'TICK_DEPENDENT'将当前时间前进一个固定步长，由multiplier指定的秒数, 'SYSTEM_CLOCK' 将时钟设置为当前系统时间;忽略所有其他设置。
   * @param {Number} options.multiplier 步长或者乘量
     */
   //2.日照清除
    shadow.stop()
    //3.日照暂停/取消暂停
    shadow.pause()

Events

覆盖物事件的使用请参照上面ShadowAnalysis 实例

---

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象