<template>
|
<div class="settings-panel">
|
<el-form :model="form" label-width="80px" class="terrain-settings">
|
<el-form-item label="渲染大小">
|
<el-select v-model="form.renderSize" placeholder="请选择">
|
<el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="配置选项">
|
<el-switch v-model="form.lightShadow" active-text="光源阴影"></el-switch>
|
<el-switch v-model="form.softShadow" active-text="软阴影"></el-switch>
|
</el-form-item>
|
<el-button type="primary" @click="analyzeShadows">阴影分析</el-button>
|
</el-form>
|
</div>
|
</template>
|
<script setup>
|
import { reactive, watch } from "vue";
|
import mapUtils from "@/utils/tools.js";
|
|
// 定义表单数据
|
const form = reactive({
|
renderSize: '1024px X 1024px', // 默认渲染大小
|
lightShadow: true, // 默认开启光源阴影
|
softShadow: true, // 默认关闭软阴影
|
});
|
|
// 渲染大小选项
|
const sizeOptions = [
|
{ value: '2048px X 2048px', label: '2048px X 2048px' },
|
{ value: '1024px X 1024px', label: '1024px X 1024px' },
|
{ value: '512px X 512px', label: '512px X 512px' },
|
{ value: '256px X 256px', label: '256px X 256px' },
|
];
|
|
// 阴影分析按钮点击事件
|
const analyzeShadows = () => {
|
let currentTime = earthCtrl.viewer.clock.currentTime.clone();
|
let startTime = earthCtrl.viewer.clock.startTime.clone();
|
let stopTime = earthCtrl.viewer.clock.stopTime.clone();
|
let multiplier = earthCtrl.viewer.clock.multiplier;
|
console.log('阴影分析');
|
mapUtils.AnalysisSunshine()
|
};
|
|
</script>
|
<style lang="less" scoped>
|
.settings-panel {
|
padding: 20px;
|
width: 350px;
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
}
|
|
.terrain-settings {
|
.el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.el-select,
|
.el-switch {
|
margin-right: 10px;
|
}
|
|
.el-button {
|
width: 100%;
|
margin-top: 10px;
|
}
|
}
|
</style>
|
