<template>
|
<div class="content">
|
<div class="title">
|
<label> {{ layerData.cnName }}</label>
|
<el-icon
|
@click="setSpatialClose"
|
:size="20"
|
style="cursor: pointer"
|
>
|
<Close />
|
</el-icon>
|
</div>
|
<div class="layer_box">
|
<!-- <div class="check_box">
|
|
{{ layerData.cnName }}
|
<img
|
src="../../assets/img/layer.png"
|
alt=""
|
/>
|
</div> -->
|
<div
|
class="slider-demo-block"
|
v-show="diaphaneityShow"
|
>
|
<div class="demonstration">透明度</div>
|
<el-slider
|
v-model="transparence"
|
@change="sliderChange"
|
:format-tooltip="formatTooltip"
|
/>
|
<div class="demonstration">{{ transparence }}%</div>
|
</div>
|
<div
|
class="slider-demo-block"
|
v-show="contrastShow"
|
>
|
<div class="demonstration">对比度</div>
|
<el-slider
|
v-model="contrast"
|
@change="contrastChange"
|
:max="3"
|
:step="0.1"
|
/>
|
<div class="demonstration">{{ contrast }}</div>
|
</div>
|
<div
|
class="selectBox"
|
v-show="drawingModeShow"
|
>
|
<div class="selectTile demonstration">拉伸方式</div>
|
<div class="stretchSelect">
|
<el-select
|
:teleported="false"
|
v-model="stretchValue"
|
class="stretchSelect"
|
:class="{ imgSelect: stretchNumShow }"
|
placeholder="选择拉伸方式"
|
size="small"
|
clearable
|
@change="stretchChange"
|
>
|
<el-option
|
v-for="item in stretchOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<span v-show="stretchNumShow">-</span>
|
<el-input-number
|
class="stretchNum"
|
v-show="stretchNumShow"
|
:precision="2"
|
:step="0.01"
|
v-model="stretchNum"
|
:min="stretchMin"
|
:max="stretchMax"
|
controls-position="right"
|
size="small"
|
@change="stretchNumChange"
|
/>
|
</div>
|
</div>
|
<div
|
class="selectBox"
|
v-show="colorShow"
|
>
|
<div class="selectTile demonstration">颜色表类型</div>
|
<el-select
|
size="small"
|
placeholder="请选择颜色表"
|
v-model="colorTableType"
|
>
|
<el-option
|
v-for="(item, i) in colorTableOptions"
|
:key="i"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
|
</el-select>
|
</div>
|
<div
|
class="selectBox"
|
v-show="colorShow "
|
>
|
<div class="selectTile demonstration">渲染类型</div>
|
<el-select
|
v-model="renderType"
|
placeholder="选择渲染类型"
|
size="small"
|
@change="changeSelection(renderType)"
|
ref="select"
|
clearable
|
>
|
<el-option
|
v-for="(item, i) in renderTypeOptions"
|
:key="i"
|
:label="item.name"
|
:value="item.name"
|
>
|
<div
|
style="
|
height: 30px;
|
width: 100%;
|
position: relative;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
"
|
:style="item.domCss"
|
></div>
|
|
<!-- <img :src="item.url" style="height: 30px; width: 100%" /> -->
|
</el-option>
|
</el-select>
|
</div>
|
<div v-show="colorShow">
|
<div class="selectBox">
|
<el-button
|
size="small"
|
type="primary"
|
@click="setColorLayerRelease"
|
>确认</el-button>
|
<el-button
|
size="small"
|
@click="setSpatialClose"
|
>取消</el-button>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import server from "@/assets/js/Map/server";
|
import {
|
publish_selectSjColorTables,
|
publish_updateSjService,
|
} from "@/api/api";
|
import { ElMessage } from "element-plus";
|
import store from "@/store";
|
import json from "@/assets/js/colorValue";
|
|
const stretchValue = ref("");
|
const transparence = ref(0);
|
const contrast = ref(1);
|
let layerName = ref("图层名称");
|
let layerState = ref(false);
|
const releaseLayer = ref(null);
|
let select = ref();
|
let renderType = ref("");
|
let renderTypeOptions = ref([]);
|
let stretchOptions = [
|
{
|
value: 0,
|
label: "不拉伸",
|
},
|
{
|
value: 1,
|
label: "线性拉伸",
|
},
|
{
|
value: 2,
|
label: "直方图均衡",
|
},
|
{
|
value: 3,
|
label: "标准差拉伸",
|
},
|
{
|
value: 4,
|
label: "伽马拉伸",
|
},
|
];
|
let colorTableOptions = [
|
{
|
value: 2,
|
label: "请选择颜色表",
|
},
|
{
|
value: 0,
|
label: "普通颜色表",
|
},
|
{
|
value: 1,
|
label: "直方图均衡",
|
},
|
];
|
let stretchNum = ref(0);
|
let stretchMin = ref(0);
|
let stretchMax = ref(0);
|
let colorTableType = ref(colorTableOptions[0].value);
|
let stretchNumShow = ref(false);
|
const formatTooltip = (val: number) => {
|
return val / 100;
|
};
|
const contrastFormatTooltip = (val: number) => {
|
return val / 100;
|
};
|
const emits = defineEmits(["detailClose"]);
|
//defineProps 来接收组件的传值
|
const props = defineProps({
|
layerData: Object,
|
});
|
const layerLength = ref();
|
const setSpatialClose = () => {
|
emits("detailClose", false);
|
};
|
|
const getColorJson = async () => {
|
const dt = await publish_selectSjColorTables({
|
pageIndex: 1,
|
pageSize: 100000,
|
});
|
renderTypeOptions.value = dt.result.item_list;
|
|
renderTypeOptions.value.forEach((e) => {
|
let css = "";
|
let css1 = "";
|
e.content.levels.forEach((v) => {
|
if ("r_start" in v) {
|
css += `rgb(${v.r_start}, ${v.g_start}, ${v.b_start}),rgb(${v.r_end}, ${v.g_end}, ${v.b_end}),`;
|
} else if ("r" in v) {
|
css1 += `rgb(${v.r}, ${v.g}, ${v.b}),`;
|
}
|
});
|
|
let cssColor = `${css1}${css}`;
|
let cssStr = "";
|
|
if (cssColor.length == 19) {
|
cssStr = `background: ${cssColor.slice(0, -1)}`;
|
} else {
|
cssStr = `background-image:linear-gradient(to right, ${cssColor.slice(
|
0,
|
-1
|
)})`;
|
}
|
e.domCss = cssStr;
|
});
|
// console.log(renderTypeOptions.value);
|
};
|
|
const changeSelection = (scope) => {
|
if (scope == "") {
|
select.value.$el.children[0].children[0].removeAttribute("style");
|
select.value.$el.children[0].children[0].children[0].removeAttribute(
|
"style"
|
);
|
select.value.$el.children[0].children[0].children[0].children[0].removeAttribute(
|
"style"
|
);
|
return;
|
}
|
for (let index in renderTypeOptions) {
|
let obj = renderTypeOptions[index];
|
if (obj.name == scope) {
|
// select.value.$el.children[0].children[0].setAttribute(
|
// "style",
|
// `background: url(${obj.url}) no-repeat;
|
// width: 100%; height: 100%;
|
// border: none;
|
// height: 33px;
|
// background-size:100% 100%`
|
// );
|
select.value.$el.children[0].children[0].setAttribute(
|
"style",
|
`background-image: linear-gradient(to right,${obj.domCss});
|
width: 100%; height: 100%;
|
border: none;
|
height: 33px;`
|
);
|
select.value.$el.children[0].children[0].children[0].setAttribute(
|
"style",
|
`display: flex;
|
justify-content: flex-end;
|
background:transparent;`
|
);
|
select.value.$el.children[0].children[0].children[0].children[0].setAttribute(
|
"style",
|
`display: none;`
|
);
|
}
|
}
|
|
// let brand = scope;
|
// for (let index in stretchOptions) {
|
// let aa = stretchOptions[index];
|
// let value = aa.value;
|
// if (brand === value) {
|
|
// select.value.$el.children[0].children[0].setAttribute(
|
// "style",
|
// "background:url(" +
|
// aa.url +
|
// ") no-repeat 10px;background-size: 30px 30px;color:#333;padding-left: 50px;"
|
// );
|
// }
|
// }
|
};
|
//滑块变动
|
const sliderChange = (val) => {
|
server.layerList[layerLength.value].layerData.alpha = val / 100;
|
};
|
const contrastChange = (val) => {
|
server.layerList[layerLength.value].layerData.contrast = val;
|
};
|
let diaphaneityShow = ref(false);
|
let contrastShow = ref(false);
|
let drawingModeShow = ref(false);
|
let colorShow = ref(false);
|
//判断类型显示
|
const typeDisplay = (val) => {
|
if (
|
val.data == 1 ||
|
val.data == 3 ||
|
val.data == 4 ||
|
val.data == 5 ||
|
val.data == 6 ||
|
val.data == 7 ||
|
val.data == 8
|
) {
|
diaphaneityShow.value = true;
|
}
|
if (
|
val.data == 1 ||
|
val.data == 3 ||
|
val.data == 4 ||
|
val.data == 5 ||
|
val.data == 6
|
) {
|
contrastShow.value = true;
|
// drawingModeShow.value = true;
|
}
|
if (val.data == 3 || val.data == 4) {
|
colorShow.value = true;
|
}
|
};
|
//拉伸选择
|
const stretchChange = (val) => {
|
console.log(val);
|
if (val == 0) {
|
stretchNumShow.value = false;
|
stretchNum.value = 0;
|
stretchMin.value = 0;
|
stretchMax.value = 0;
|
} else if (val == 1) {
|
stretchNumShow.value = true;
|
//1 线性拉伸
|
stretchNum.value = 0.02;
|
stretchMin.value = 0;
|
stretchMax.value = 0.05;
|
} else if (val == 2) {
|
stretchNumShow.value = false;
|
//1 直方图均衡
|
stretchNum.value = 0;
|
stretchMin.value = 0;
|
stretchMax.value = 0;
|
} else if (val == 3) {
|
stretchNumShow.value = true;
|
//1 标准差拉伸
|
stretchNum.value = 0.02;
|
stretchMin.value = 0;
|
stretchMax.value = 0.05;
|
} else if (val == 4) {
|
stretchNumShow.value = true;
|
//1 伽马拉伸
|
stretchNum.value = 0.6;
|
stretchMin.value = 0.1;
|
stretchMax.value = 1.6;
|
}
|
};
|
const stretchNumChange = (val) => {};
|
const setColorLayerRelease = async () => {
|
var color1 = null;
|
var color2 = null;
|
var level = null;
|
var val_data = [];
|
|
for (var i in renderTypeOptions.value) {
|
if (renderTypeOptions.value[i].name == renderType.value) {
|
val_data.push(renderTypeOptions.value[i].content.levels);
|
}
|
}
|
if (val_data.length > 0) {
|
level = val_data[0];
|
}
|
|
if (colorTableType.value == 0) {
|
color1 = level;
|
} else if (colorTableType.value == 1) {
|
color2 = level;
|
}
|
var geom = "null";
|
if (releaseLayer.value.geom) {
|
geom = releaseLayer.value.geom;
|
}
|
var obj = {
|
colorTable: color1, // 普通颜色表，可不设
|
gradientColorTable: color2,
|
enhanceType: stretchValue.value, // 拉伸方式 0：不拉伸，1 线性拉伸，2 直方图均衡，3 标准差拉伸，4 伽马拉伸
|
enhanceFactor: stretchNum.value, // 拉伸因子 null 或 小数
|
dircode: "00", // 目录编码
|
epsg: 104903, // 104903-月球2000，4326-WGS84
|
ids: null, // 不要设定
|
name: releaseLayer.value.cnName, // 当前服务名称
|
nodata: 0, // 黑色-0，白色-255
|
type: releaseLayer.value.type, // 影像-DOM，高程-
|
geom: geom,
|
pubid: releaseLayer.value.pubid,
|
};
|
publish_updateSjService(obj).then((res) => {
|
if (res.code != 200) {
|
return ElMessage(data.msg);
|
}
|
store.state.restLayer = true;
|
setSpatialClose();
|
});
|
// const data = ;
|
// console.log("1122223" + data.code);
|
};
|
onMounted(() => {
|
typeDisplay(props.layerData);
|
server.layerList.forEach((e, i) => {
|
if (props.layerData.id == e.id && e.layerData) {
|
layerLength.value = i;
|
transparence.value = e.layerData.alpha * 100;
|
}
|
});
|
releaseLayer.value = props.layerData;
|
if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) {
|
drawingModeShow.value = true;
|
colorShow.value = true;
|
}
|
});
|
getColorJson();
|
</script>
|
|
<style lang="less" scoped>
|
.content {
|
padding: 20px;
|
// height: 400px;
|
min-width: 300px;
|
margin-left: 385px;
|
margin-top: 40px;
|
|
z-index: 40;
|
position: absolute;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
.title {
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.layer_box {
|
margin-top: 10px;
|
}
|
}
|
.check_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 50px;
|
padding-top: 10px;
|
font-size: 16px;
|
color: #ffffff;
|
img {
|
width: 22px;
|
height: 19px;
|
}
|
}
|
.check_box .el-checkbox {
|
font-size: 16px;
|
color: #ffffff;
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: rgba(13, 255, 0, 1);
|
border-color: rgba(41, 109, 255, 1);
|
}
|
.check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
}
|
.slider-demo-block {
|
margin-top: 22px;
|
}
|
.demonstration {
|
font-size: 12px;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
/deep/ .el-slider__runway {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__bar {
|
height: 2px;
|
|
background: #73a1fa;
|
}
|
/deep/ .el-slider__button {
|
width: 17px;
|
height: 18px;
|
border: 0;
|
background: url("../../assets/img/DBX.png") no-repeat center;
|
background-size: 100% 100%;
|
border-radius: 0;
|
}
|
.selectBox {
|
margin-top: 24px;
|
.selectTile {
|
padding-bottom: 6px;
|
}
|
.el-select {
|
width: 100%;
|
}
|
}
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
.stretchSelect {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.stretchSelect {
|
width: 100%;
|
}
|
.imgSelect {
|
width: 60%;
|
}
|
span {
|
color: #fff;
|
margin: 0 10px;
|
}
|
.stretchNum {
|
width: 30%;
|
}
|
}
|
</style>
|
