| | |
| | | <template> |
| | | <div class="content"> |
| | | <div class="title"> |
| | | <label> {{ layerData.cnName }}</label> |
| | | <label>{{ layerData.cnName }}</label> |
| | | <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer"> |
| | | <Close /> |
| | | </el-icon> |
| | |
| | | src="../../assets/img/layer.png" |
| | | alt="" |
| | | /> |
| | | </div> --> |
| | | </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="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 |
| | | :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" /> |
| | | <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 |
| | |
| | | ></el-option> |
| | | |
| | | </el-select> |
| | | </div> --> |
| | | </div>--> |
| | | <!-- <div |
| | | class="selectBox" |
| | | v-show="colorShow " |
| | |
| | | |
| | | </el-option> |
| | | </el-select> |
| | | </div> --> |
| | | </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> |
| | |
| | | let select = ref(); |
| | | let renderType = ref(""); |
| | | let renderTypeOptions = ref([]); |
| | | const tempLayer = ref(true) |
| | | const tempLayer = ref(true); |
| | | const groupsId = ref([]); |
| | | let stretchOptions = [ |
| | | { |
| | |
| | | emits("detailClose", { |
| | | flag: false, |
| | | type: type, |
| | | val: val |
| | | |
| | | val: val, |
| | | }); |
| | | }; |
| | | |
| | |
| | | } |
| | | e.domCss = cssStr; |
| | | }); |
| | | // console.log(renderTypeOptions.value); |
| | | |
| | | }; |
| | | |
| | | const changeSelection = (scope) => { |
| | |
| | | const sliderChange = (val) => { |
| | | if (tempLayer.value) { |
| | | for (var i in groupsId.value) { |
| | | server.layerList[groupsId.value[i]].layerData.alpha =( val / 100).toFixed(2); |
| | | server.layerList[groupsId.value[i]].layerData.alpha = (val / 100).toFixed( |
| | | 2 |
| | | ); |
| | | } |
| | | } else { |
| | | server.layerList[layerLength.value].layerData.alpha = val / 100; |
| | | var data = server.layerList[layerLength.value]; |
| | | data.layerData.alpha = val / 100; |
| | | } |
| | | |
| | | }; |
| | | const contrastChange = (val) => { |
| | | server.layerList[layerLength.value].layerData.contrast = val; |
| | |
| | | }; |
| | | //拉伸选择 |
| | | const stretchChange = (val) => { |
| | | console.log(val); |
| | | |
| | | if (val == 0) { |
| | | stretchNumShow.value = false; |
| | | stretchNum.value = 0; |
| | |
| | | stretchMax.value = 1.6; |
| | | } |
| | | }; |
| | | const stretchNumChange = (val) => { }; |
| | | const stretchNumChange = (val) => {}; |
| | | const setColorLayerRelease = async () => { |
| | | var color1 = null; |
| | | var color2 = null; |
| | |
| | | store.state.loading = false; |
| | | } |
| | | }); |
| | | // const data = ; |
| | | // console.log("1122223" + data.code); |
| | | |
| | | }; |
| | | const setRestGeoLayer = (res) => { |
| | | var data = server.getGeoLayerChangeAlpha(res); |
| | | layerLength.value = parseInt(data.id); |
| | | var alpha = data.layer.layerData.alpha ? data.layer.layerData.alpha : 1; |
| | | transparence.value = parseInt(alpha * 100); |
| | | }; |
| | | onMounted(() => { |
| | | typeDisplay(props.layerData); |
| | | if (props.layerData.isLayer == 0) {//图层组透明度 |
| | | if (props.layerData.isLayer == 0) { |
| | | //图层组透明度 |
| | | tempLayer.value = true; |
| | | transparence.value = props.layerData.alpha * 100; |
| | | var ids = store.state.layerGroups.layerIds |
| | | var ids = store.state.layerGroups.layerIds; |
| | | var std = []; |
| | | for (var i in ids) { |
| | | std.push(ids[i].id); |
| | | } |
| | | var checkId = []; |
| | | server.layerList.forEach((e, i) => { |
| | | for (var j in ids) { |
| | | if (ids[j] == e.id) { |
| | | groupsId.value.push(i) |
| | | for (var j in std) { |
| | | if (std[j] == e.id) { |
| | | checkId.push(e.id); |
| | | groupsId.value.push(i); |
| | | } |
| | | } |
| | | }); |
| | | } else { |
| | | for (var i in checkId) { |
| | | if (std.indexOf(checkId[i]) > -1) { |
| | | std = std.splice(checkId[i], i); |
| | | } |
| | | } |
| | | if (std.length > 0) { |
| | | for (var i in std) { |
| | | for (var j in ids) { |
| | | if (std[i] == ids[j].id) { |
| | | var data = server.getGeoLayerChangeAlpha(ids[j]); |
| | | groupsId.value.push(parseInt(data.id)); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } else if (props.layerData.isLayer == 1) { |
| | | tempLayer.value = false; |
| | | server.layerList.forEach((e, i) => { |
| | | var val = server.layerList.filter((e) => { |
| | | if (props.layerData.id == e.id && e.layerData) { |
| | | layerLength.value = i; |
| | | var alpha = e.layerData.alpha ? e.layerData.alpha : 0; |
| | | transparence.value = parseInt(alpha * 100); |
| | | return e; |
| | | } |
| | | }); |
| | | releaseLayer.value = props.layerData; |
| | | if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) { |
| | | drawingModeShow.value = true; |
| | | colorShow.value = true; |
| | | if (val.length > 0) { |
| | | server.layerList.forEach((e, i) => { |
| | | if (props.layerData.id == e.id && e.layerData) { |
| | | layerLength.value = i; |
| | | var alpha = e.layerData.alpha ? e.layerData.alpha : 0; |
| | | transparence.value = parseInt(alpha * 100); |
| | | } |
| | | }); |
| | | releaseLayer.value = props.layerData; |
| | | if (releaseLayer.value.pubid && releaseLayer.value.pubid > 0) { |
| | | drawingModeShow.value = true; |
| | | colorShow.value = true; |
| | | } |
| | | } else { |
| | | setRestGeoLayer(props.layerData); |
| | | } |
| | | } |
| | | |
| | | }); |
| | | // getColorJson(); |
| | | </script> |
| | |
| | | padding: 20px; |
| | | // height: 400px; |
| | | min-width: 300px; |
| | | margin-left: 385px; |
| | | margin-left: 370px; |
| | | margin-top: 40px; |
| | | |
| | | z-index: 40; |
| | |
| | | border-color: rgba(41, 109, 255, 1); |
| | | } |
| | | |
| | | .check_box /deep/ .el-checkbox__input.is-checked+.el-checkbox__label { |
| | | .check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label { |
| | | color: #fff; |
| | | } |
| | | |