<template>
|
<Popup ref="pop" :title="form.title" left="calc(100% - 330px)">
|
<div class="contourInfo">
|
<el-form ref="form" :model="form" label-width="105px">
|
<el-form-item class="surfaceHeight" label="地表渲染:">
|
<el-radio-group v-model="form.renderType" @change="radioChange">
|
<el-radio :label="0">无</el-radio>
|
<el-radio :label="1">高程</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="form.renderType">
|
<el-form-item class="renderColor" label="渲染颜色:">
|
<el-color-picker
|
v-model="form.color1"
|
@change="color1Change"
|
style="margin-left: 0px;"
|
></el-color-picker>
|
<span style="margin-right: -10px;margin-left: 20px; color: #fff"
|
>—</span
|
>
|
<el-color-picker
|
v-model="form.color2"
|
@change="color2Change"
|
></el-color-picker>
|
</el-form-item>
|
<el-form-item class="maxHeight" label="最大高程:">
|
<el-input-number
|
v-model="form.maxHeight"
|
controls-position="right"
|
@input="maxChange"
|
:min="1"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item class="minHeight" label="最小高程:">
|
<el-input-number
|
v-model="form.minHeight"
|
controls-position="right"
|
@input="minChange"
|
:min="1"
|
></el-input-number>
|
</el-form-item>
|
</div>
|
<el-form-item class="switchandColor" label="等高线:">
|
<el-switch v-model="form.IsSwitch" @change="switchChange"></el-switch>
|
<el-color-picker
|
v-model="form.color3"
|
@change="color3Change"
|
></el-color-picker>
|
</el-form-item>
|
<div v-if="form.IsSwitch">
|
<el-form-item class="interval" label="间距:">
|
<el-slider
|
v-model="form.interval"
|
:min="20"
|
:max="500"
|
@change="intervalChange"
|
></el-slider>
|
</el-form-item>
|
<el-form-item class="lineHeight" label="线宽:">
|
<el-slider
|
v-model="form.lineHeight"
|
@change="lineHeightChange"
|
:max="10"
|
:min="0"
|
></el-slider>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup.vue";
|
|
let elevationTool;
|
export default {
|
name: "contour",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
form: {
|
title: "等高线",
|
renderType: 0,
|
IsSwitch: false,
|
color1: "#409EFF",
|
color2: "blue",
|
color3: "red",
|
interval: 100,
|
lineHeight: 2,
|
maxHeight: 8000,
|
minHeight: 4000,
|
},
|
};
|
},
|
computed: {},
|
mounted() {},
|
methods: {
|
// 关闭弹窗
|
close() {
|
this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open() {
|
this.$refs.pop.open();
|
if (window.elevationTool) {
|
elevationTool = window.elevationTool;
|
} else {
|
elevationTool = window.elevationTool =
|
new window.SmartEarth.ElevationTool(window.sgworld);
|
}
|
},
|
switchChange() {
|
if (this.form.IsSwitch == false) {
|
elevationTool.tf = false;
|
} else {
|
elevationTool.tf = true;
|
elevationTool.maxHeight = this.form.maxHeight;
|
elevationTool.minHeight = this.form.minHeight;
|
elevationTool.spacing = this.form.interval;
|
elevationTool.width = this.form.lineHeight;
|
}
|
elevationTool.render();
|
},
|
// 是否渲染高程
|
radioChange() {
|
// 是否渲染高程
|
if (this.form.renderType == 1) {
|
elevationTool.type = "elevation";
|
elevationTool.max.elevation = this.form.maxHeight;
|
elevationTool.min.elevation = this.form.minHeight;
|
} else {
|
elevationTool.type = "none";
|
}
|
elevationTool.render();
|
},
|
// 最大高程
|
maxChange() {
|
elevationTool.setMax(this.form.maxHeight);
|
},
|
// 最小高程
|
minChange() {
|
elevationTool.setMin(this.form.minHeight);
|
},
|
// 间距
|
intervalChange() {
|
elevationTool.setSpacing(this.form.interval);
|
},
|
// 线宽
|
lineHeightChange() {
|
elevationTool.setWidth(this.form.lineHeight);
|
},
|
// 高程颜色1
|
color1Change() {
|
elevationTool.setStartColor(this.form.color1);
|
},
|
// 高程颜色2
|
color2Change() {
|
elevationTool.setEndColor(this.form.color2);
|
},
|
// 等高线颜色
|
color3Change() {
|
elevationTool.setContourColor(this.form.color3);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .el-color-picker {
|
vertical-align: middle;
|
margin-left: 30px;
|
}
|
</style>
|
