<template>
|
<Popup ref="pop" :title="form.title" left="calc(100% - 330px)">
|
<div class="slopeInfo">
|
<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>
|
<el-form-item class="switchandColor" label="等高线:">
|
<el-switch v-model="form.IsSwitch" @change="switchChange"></el-switch>
|
<el-color-picker
|
v-model="form.color"
|
@change="colorChange"
|
></el-color-picker>
|
</el-form-item>
|
<div v-if="form.IsSwitch">
|
<el-form-item class="interval" label="间距:">
|
<el-slider
|
v-model="form.interval"
|
@change="intervalChange"
|
:max="500"
|
:min="20"
|
></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: "slope",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
form: {
|
title: "坡度图",
|
renderType: 0,
|
IsSwitch: false,
|
color: "red",
|
interval: 100,
|
lineHeight: 2,
|
},
|
};
|
},
|
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);
|
}
|
},
|
// 是否渲染高程
|
radioChange() {
|
// 是否渲染高程
|
if (this.form.renderType == 1) {
|
elevationTool.type = "slope";
|
} else {
|
elevationTool.type = "none";
|
}
|
elevationTool.render();
|
},
|
// 开关
|
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();
|
},
|
// 间距
|
intervalChange() {
|
elevationTool.setSpacing(this.form.interval);
|
},
|
// 线宽
|
lineHeightChange() {
|
elevationTool.setWidth(this.form.lineHeight);
|
},
|
// 渲染颜色1
|
colorChange() {
|
elevationTool.setContourColor(this.form.color);
|
},
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
/deep/ .el-color-picker {
|
vertical-align: middle;
|
margin-left: 30px;
|
}
|
</style>
|
