FuJianModelPlatform/RuoYi-Vue3/src/supermap-cesium-module/components/special-effects/volumetric-cloud/volumetric-cloud.vue

<template>
  <div id="volumetric-cloud-panel" class="sm-panel" v-drag>
    <div class="sm-function-module-sub-section" style="margin:0" v-stopdrag>
      <div class="sm-half-L">
        <label style="width:100%">
          <input type="checkbox" v-model="show" />
          体积云
        </label>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">云层高度(m)</label>
        <el-slider
          v-model="minHeight"
          :min="500"
          :max="20000"
          :step="100"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">云层厚度(m)</label>
        <el-slider
          v-model="maxHeight"
          :min="2000"
          :max="30000"
          :step="100"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">密度</label>
        <el-slider
          v-model="density"
          :min="0"
          :max="3"
          :step="0.01"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">云量</label>
        <el-slider
          v-model="coverage"
          :min="0"
          :max="1"
          :step="0.01"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">太阳强度</label>
        <el-slider
          v-model="sunIntensity"
          :min="0"
          :max="100"
          :step="1"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">云亮度</label>
        <el-slider
          v-model="cloudExposure"
          :min="0.1"
          :max="10"
          :step="0.1"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
      <div class="sm-half-L">
        <label style="width:35%">天空光</label>
        <el-slider
          v-model="skyLight"
          :min="0"
          :max="3"
          :step="0.01"
          input-size="mini"
          :debounce="300"
          tooltip-class="tooltip-class"
          style="width:63%"
        ></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import volumetricCloud from "./volumetric-cloud.js";
export default {
  name: "Sm3dVolumetricCloud",
  props: {
    // 是否显示体积云
    show: { type: Boolean },
    // 云层最低高度（米）
    minHeight: { type: Number },
    // 云层最高高度（米）
    maxHeight: { type: Number },
    // 密度系数
    density: { type: Number },
    // 云量（覆盖度）
    coverage: { type: Number },
    // 太阳强度
    sunIntensity: { type: Number },
    // 云亮度
    cloudExposure: { type: Number },
    // 天空光强度
    skyLight: { type: Number }
  },
  setup(props) {
    let {
      show,
      minHeight,
      maxHeight,
      density,
      coverage,
      sunIntensity,
      cloudExposure,
      skyLight
    } = volumetricCloud(props);

    return {
      show,
      minHeight,
      maxHeight,
      density,
      coverage,
      sunIntensity,
      cloudExposure,
      skyLight
    };
  }
};
</script>