|
|
@@ -1,450 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="ZTGlobal" style="width: 100%; padding: 1rem 1.1rem 0rem; color: white">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="24">
|
|
|
- <div class="titleHeader">
|
|
|
- <h3>参数设置</h3>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="24">
|
|
|
- <el-row :gutter="10" style="display: flex; align-items: center">
|
|
|
- <el-col :span="24">
|
|
|
- 日 期：
|
|
|
- <el-date-picker size="mini" v-model="form.selDate" type="date" placeholder="选择日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="10" style="display: flex; align-items: center">
|
|
|
- <el-col :span="6"> 日照时间范围: </el-col>
|
|
|
- <el-col :span="18">
|
|
|
- <el-slider size="mini" v-model="datavalue" range :marks="marks" :max="24" @change="datavalueChange">
|
|
|
- </el-slider>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="12">
|
|
|
- 时间间隔:
|
|
|
- <el-input-number style="width: 50%" size="mini" v-model="form.timeInterval"></el-input-number>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- 间距(米):
|
|
|
- <el-input-number style="width: 50%" size="mini" v-model="form.spacing"></el-input-number>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="24">
|
|
|
- <div class="SaveCenter">
|
|
|
- <el-button size="mini" type="primary" @click="statrSunlight">执行日照效果</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="dqSunlight">当前日照</el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-divider></el-divider>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="12">
|
|
|
- 底部高程(米):
|
|
|
- <el-input-number style="width: 50%" size="mini" v-model="form.bottomHeight"></el-input-number>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- 拉伸高度(米):
|
|
|
- <el-input-number style="width: 50%" size="mini" v-model="form.extrudeHeight"></el-input-number>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- <el-row :gutter="10">
|
|
|
- <el-col :span="24">
|
|
|
- 阴影分析时日照时间案范围重合时为时刻阴影，不重合时计算为时间范围内阴影率
|
|
|
- </el-col>
|
|
|
- </el-row> -->
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div class="SaveCenter">
|
|
|
- <el-button size="mini" type="primary" @click="onSubmit">日照时长</el-button>
|
|
|
- <el-button size="mini" @click="resetForm">清除</el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-form ref="form" :model="sunTimesForm" label-width="80px">
|
|
|
- <el-form-item label="经度">
|
|
|
- <el-input v-model="sunTimesForm.longitude" readonly="true"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="纬度">
|
|
|
- <el-input v-model="sunTimesForm.latitude" readonly="true"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="高度">
|
|
|
- <el-input v-model="sunTimesForm.height" readonly="true"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="日照率(%)">
|
|
|
- <el-input readonly="true">{{ (1- sunTimesForm.shadowRadio)*100}}</el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="日照时长(小时)">
|
|
|
- <el-input v-model="sunTimesForm.sunTimes" readonly="true"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-let handlerPolygon = null,
|
|
|
- layers = null,
|
|
|
- shadowQuery = null;
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tooltip: createTooltip(document.body),
|
|
|
- form: {
|
|
|
- timeInterval: 60,
|
|
|
- spacing: 10,
|
|
|
- selDate: new Date(),
|
|
|
- startTime: 10,
|
|
|
- endTime: 14,
|
|
|
- bottomHeight: 0,
|
|
|
- extrudeHeight: 100,
|
|
|
- },
|
|
|
- datavalue: [8, 18],
|
|
|
- positions: [],
|
|
|
- points: [],
|
|
|
- // layers: null,
|
|
|
- // shadowQuery: null,
|
|
|
- marks: {
|
|
|
- 8: "8点",
|
|
|
- 12: {
|
|
|
- style: {
|
|
|
- color: "#1989FA",
|
|
|
- },
|
|
|
- label: this.$createElement("strong", "12点"),
|
|
|
- },
|
|
|
- 20: "20点",
|
|
|
- },
|
|
|
- sunTimesForm: {
|
|
|
- longitude:0.0,
|
|
|
- latitude:0.0,
|
|
|
- height:0.0,
|
|
|
- shadowRadio:0.6,
|
|
|
- sunTimes:(endTime-startTime)*(1-shadowRadio)
|
|
|
-
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- props: {
|
|
|
- info: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
- layerid: {
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- },
|
|
|
- lydata: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
- lyoption: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- if (layers) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (viewer.shadows == false) {
|
|
|
- viewer.shadows = true; //开启场景阴影
|
|
|
- viewer.terrainShadows = true; //地形阴影
|
|
|
- }
|
|
|
- let scene = viewer.scene;
|
|
|
- layers = scene.layers.layerQueue;
|
|
|
- //图层模型设置阴影
|
|
|
- for (let i = 0; i < layers.length; i++) {
|
|
|
- if (layers[i].shadowType !== 2) {
|
|
|
- layers[i].shadowType = 2;
|
|
|
- // layers[i].refresh();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //创建阴影查询对象
|
|
|
- if (!shadowQuery) {
|
|
|
- shadowQuery = new Cesium.ShadowQueryPoints(scene);
|
|
|
- shadowQuery.build();
|
|
|
- }
|
|
|
- let that = this;
|
|
|
- // this.setCurrentTime();
|
|
|
- this.dqSunlight();
|
|
|
- handlerPolygon = new Cesium.DrawHandler(
|
|
|
- viewer,
|
|
|
- Cesium.DrawMode.Polygon,
|
|
|
- 0
|
|
|
- );
|
|
|
- handlerPolygon.activeEvt.addEventListener(function (isActive) {
|
|
|
- if (isActive == true) {
|
|
|
- viewer.enableCursorStyle = false;
|
|
|
- viewer._element.style.cursor = "";
|
|
|
- document.body.classList.add("drawCur");
|
|
|
- } else {
|
|
|
- viewer.enableCursorStyle = true;
|
|
|
- document.body.classList.remove("drawCur");
|
|
|
- }
|
|
|
- });
|
|
|
- handlerPolygon.movingEvt.addEventListener((windowPosition) => {
|
|
|
- that.tooltip.showAt(
|
|
|
- windowPosition,
|
|
|
- "<p>点击鼠标左键开始绘制分析区域</p>"
|
|
|
- );
|
|
|
- });
|
|
|
- handlerPolygon.drawEvt.addEventListener((result) => {
|
|
|
- that.tooltip.setVisible(false);
|
|
|
- let positions = that.positions;
|
|
|
- let points = that.points;
|
|
|
-
|
|
|
- points.length = 0;
|
|
|
- var polygon = result.object;
|
|
|
- if (!polygon) {
|
|
|
- return;
|
|
|
- }
|
|
|
- polygon.show = false;
|
|
|
- handlerPolygon.polyline.show = false;
|
|
|
- positions = [].concat(polygon.positions);
|
|
|
- positions = Cesium.arrayRemoveDuplicates(
|
|
|
- positions,
|
|
|
- Cesium.Cartesian3.equalsEpsilon
|
|
|
- );
|
|
|
- //遍历多边形，取出所有点
|
|
|
- for (var i = 0, len = positions.length; i < len; i++) {
|
|
|
- //转化为经纬度，并加入至临时数组
|
|
|
- var cartographic = Cesium.Cartographic.fromCartesian(
|
|
|
- polygon.positions[i]
|
|
|
- );
|
|
|
- var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
- var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
- points.push(longitude);
|
|
|
- points.push(latitude);
|
|
|
- }
|
|
|
- //设置分析对象的开始结束时间
|
|
|
- var dateValue = that.form.selDate;
|
|
|
- var st = new Date(dateValue);
|
|
|
- st.setHours(Number(that.form.startTime));
|
|
|
- shadowQuery.startTime = Cesium.JulianDate.fromDate(st);
|
|
|
-
|
|
|
- var et = new Date(dateValue);
|
|
|
- et.setHours(Number(that.form.endTime));
|
|
|
- shadowQuery.endTime = Cesium.JulianDate.fromDate(et);
|
|
|
-
|
|
|
- //设置当前时间
|
|
|
- that.setCurrentTime();
|
|
|
-
|
|
|
- shadowQuery.spacing = that.form.spacing;
|
|
|
- shadowQuery.timeInterval = that.form.timeInterval;
|
|
|
-
|
|
|
- //设置分析区域、底部高程和拉伸高度
|
|
|
- var bh = Number(that.form.bottomHeight);
|
|
|
- var eh = Number(that.form.extrudeHeight);
|
|
|
- shadowQuery.qureyRegion({
|
|
|
- position: points,
|
|
|
- bottom: bh,
|
|
|
- extend: eh,
|
|
|
- });
|
|
|
- shadowQuery.build();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- //提交数据
|
|
|
- onSubmit() {
|
|
|
- this.analysis();
|
|
|
- },
|
|
|
- //清空from
|
|
|
- resetForm() {
|
|
|
- this.clear();
|
|
|
- },
|
|
|
- /**
|
|
|
- * 开始分析
|
|
|
- */
|
|
|
- analysis() {
|
|
|
- // this.init();
|
|
|
-
|
|
|
- handlerPolygon = null;
|
|
|
- handlerPolygon = r = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
|
|
- handlerPolygon.setInputAction(function (e) {
|
|
|
- var position1 = scene.pickPosition(e.position);
|
|
|
- var cartographic = Cesium.Cartographic.fromCartesian(position1);
|
|
|
- var shadowRadio = shadowQuery.getShadowRadio(cartographic);
|
|
|
- var longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
- var latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
- var height = cartographic.height;
|
|
|
- if (shadowRadio != -1) {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- clear() {
|
|
|
- if (handlerPolygon) {
|
|
|
- handlerPolygon.deactivate();
|
|
|
- }
|
|
|
- this.tooltip.setVisible(false);
|
|
|
- // common.clearHandlerDrawing();
|
|
|
- // viewer.entities.removeAll();
|
|
|
-
|
|
|
- // let layers = scene.layers.layerQueue;
|
|
|
- // for (var i = 0; i < layers.length; i++) {
|
|
|
- // layers[i].shadowType = 0;
|
|
|
- // }
|
|
|
- if (shadowQuery) {
|
|
|
- shadowQuery.qureyRegion({
|
|
|
- position: [0, 0],
|
|
|
- bottom: 0,
|
|
|
- extend: 0,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- this.positions = [];
|
|
|
- this.points = [];
|
|
|
- },
|
|
|
- //结束时日照阴影
|
|
|
- setCurrentTime() {
|
|
|
- var et = this.form.selDate;
|
|
|
- et.setHours(Number(this.form.endTime));
|
|
|
- viewer.clock.currentTime = Cesium.JulianDate.fromDate(et);
|
|
|
- viewer.clock.multiplier = 1;
|
|
|
- viewer.clock.shouldAnimate = false;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 执行日照动画
|
|
|
- */
|
|
|
- statrSunlight() {
|
|
|
- var dateVal = this.form.selDate;
|
|
|
- var startTime = new Date(dateVal);
|
|
|
- var shour = Number(this.form.startTime);
|
|
|
- var ehour = Number(this.form.endTime);
|
|
|
-
|
|
|
- if (shour > ehour) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var nTimer = 0.0;
|
|
|
- var nIntervId = setInterval(function () {
|
|
|
- if (shour < ehour) {
|
|
|
- startTime.setHours(shour);
|
|
|
- startTime.setMinutes(nTimer);
|
|
|
- viewer.clock.currentTime = Cesium.JulianDate.fromDate(startTime);
|
|
|
- nTimer += 10.0;
|
|
|
- if (nTimer > 60.0) {
|
|
|
- shour += 1.0;
|
|
|
- nTimer = 0.0;
|
|
|
- }
|
|
|
- } else {
|
|
|
- clearInterval(nIntervId);
|
|
|
- }
|
|
|
- }, 20);
|
|
|
- },
|
|
|
- //当前日照效果
|
|
|
- dqSunlight() {
|
|
|
- viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
|
|
|
- viewer.clock.multiplier = 1;
|
|
|
- viewer.clock.shouldAnimate = true;
|
|
|
- },
|
|
|
-
|
|
|
- datavalueChange(val) {
|
|
|
- this.form.startTime = val[0];
|
|
|
- this.form.endTime = val[1];
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- "form.selDate": function (newValue) {
|
|
|
- let st = new Date(newValue);
|
|
|
- st.setHours(this.form.startTime);
|
|
|
- let et = new Date(newValue);
|
|
|
- et.setHours(this.form.endTime);
|
|
|
- shadowQuery.startTime = Cesium.JulianDate.fromDate(st);
|
|
|
- shadowQuery.endTime = Cesium.JulianDate.fromDate(et);
|
|
|
- },
|
|
|
- "form.startTime": function (newValue) {
|
|
|
- let thisdate = new Date(this.form.selDate);
|
|
|
- var st = thisdate;
|
|
|
- st.setHours(Number(newValue));
|
|
|
- shadowQuery.startTime = Cesium.JulianDate.fromDate(st);
|
|
|
- },
|
|
|
- "form.endTime": function (newValue) {
|
|
|
- let thisdate = new Date(this.form.selDate);
|
|
|
- var et = thisdate;
|
|
|
- et.setHours(Number(newValue));
|
|
|
- shadowQuery.endTime = Cesium.JulianDate.fromDate(et);
|
|
|
- },
|
|
|
- "form.timeInterval": function (newValue) {
|
|
|
- shadowQuery.timeInterval = Number(newValue);
|
|
|
- // var bh = Number(this.bottomHeight);
|
|
|
- // var eh = Number(this.extrudeHeight);
|
|
|
- // shadowQuery.qureyRegion({
|
|
|
- // position: this.points,
|
|
|
- // bottom: bh,
|
|
|
- // extend: eh
|
|
|
- // });
|
|
|
- shadowQuery.build();
|
|
|
- },
|
|
|
- "form.spacing": function (newValue) {
|
|
|
- shadowQuery.spacing = Number(newValue);
|
|
|
- // var bh = Number(this.bottomHeight);
|
|
|
- // var eh = Number(this.extrudeHeight);
|
|
|
- // shadowQuery.qureyRegion({
|
|
|
- // position: this.points,
|
|
|
- // bottom: bh,
|
|
|
- // extend: eh
|
|
|
- // });
|
|
|
- shadowQuery.build();
|
|
|
- },
|
|
|
- "form.bottomHeight": function (newValue) {
|
|
|
- var bh = Number(newValue);
|
|
|
- var eh = Number(this.form.extrudeHeight);
|
|
|
- shadowQuery.qureyRegion({
|
|
|
- position: this.points,
|
|
|
- bottom: bh,
|
|
|
- extend: eh,
|
|
|
- });
|
|
|
- shadowQuery.build();
|
|
|
- },
|
|
|
- "form.extrudeHeight": function (newValue) {
|
|
|
- var bh = Number(this.form.bottomHeight);
|
|
|
- var eh = Number(newValue);
|
|
|
- shadowQuery.qureyRegion({
|
|
|
- position: this.points,
|
|
|
- bottom: bh,
|
|
|
- extend: eh,
|
|
|
- });
|
|
|
- shadowQuery.build();
|
|
|
- },
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.clear();
|
|
|
- shadowQuery.destroy();
|
|
|
- handlerPolygon.deactivate();
|
|
|
- handlerPolygon = undefined;
|
|
|
- this.dqSunlight();
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
-@import "@/../../zt.scss";
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.el-card {
|
|
|
- border: 0px solid #02a7f0;
|
|
|
-}
|
|
|
-
|
|
|
-.el-form-item {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.slider_padding {
|
|
|
- padding: 0rem 0.5rem;
|
|
|
-}
|
|
|
-</style>
|
zpf
