月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-08-24 79538c0454e2777eee0f93a6ec3bbcd248793fb8
图层设置开发对比度,根据图层类型显隐
已修改2个文件
69 ■■■■■ 文件已修改
src/assets/js/Map/index.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layer/layerDetail.vue 67 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/js/Map/index.js
@@ -44,8 +44,6 @@
    //=======================
    //大气层
    Viewer.scene.globe.showGroundAtmosphere = false;
  },
  //鼠标左键点击事件添加
  addMouseLeftClickEvents() {
src/views/layer/layerDetail.vue
@@ -2,11 +2,7 @@
  <div class="content">
    <div class="title">
      <label>详细编辑</label>
      <el-icon
        @click="setSpatialClose"
        :size="20"
        style="cursor: pointer"
      >
      <el-icon @click="setSpatialClose" :size="20" style="cursor: pointer">
        <Close />
      </el-icon>
    </div>
@@ -16,12 +12,9 @@
          layerName
        }}</el-checkbox> -->
        {{ layerData.cnName }}
        <img
          src="../../assets/img/layer.png"
          alt=""
        />
        <img src="../../assets/img/layer.png" alt="" />
      </div>
      <div class="slider-demo-block">
      <div class="slider-demo-block" v-show="diaphaneityShow">
        <div class="demonstration">透明度</div>
        <el-slider
          v-model="transparence"
@@ -30,16 +23,17 @@
        />
        <div class="demonstration">{{ transparence }}%</div>
      </div>
      <div class="slider-demo-block">
      <div class="slider-demo-block" v-show="contrastShow">
        <div class="demonstration">对比度</div>
        <el-slider
          v-model="contrast"
          @change="contrastChange"
          :format-tooltip="contrastFormatTooltip"
          :max="3"
          :step="0.1"
        />
        <div class="demonstration">{{ contrast }}%</div>
        <div class="demonstration">{{ contrast }}</div>
      </div>
      <div class="selectBox">
      <div class="selectBox" v-show="drawingModeShow">
        <div class="selectTile demonstration">拉伸方式</div>
        <el-select
          v-model="stretchValue"
@@ -57,7 +51,7 @@
          </el-option>
        </el-select>
      </div>
      <div class="selectBox">
      <div class="selectBox" v-show="colorShow">
        <div class="selectTile demonstration">渲染类型</div>
        <el-select
          v-model="renderType"
@@ -77,10 +71,7 @@
            <!-- <img :src="item.url" style="height: 30px; margin-right: 10px" />
            <span>{{ item.label }}</span> -->
            <img
              :src="item.url"
              style="height: 30px; width: 100%"
            />
            <img :src="item.url" style="height: 30px; width: 100%" />
          </el-option>
        </el-select>
      </div>
@@ -100,7 +91,7 @@
import server from "@/assets/js/Map/server";
const stretchValue = ref("");
const transparence = ref(0);
const contrast = ref(0);
const contrast = ref(1);
let layerName = ref("图层名称");
let layerState = ref(false);
let select = ref();
@@ -198,11 +189,43 @@
  server.layerList[layerLength.value].layerData.alpha = val / 100;
};
const contrastChange = (val) => {
  server.layerList[layerLength.value].layerData.alpha = val / 100;
  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;
  }
};
onMounted(() => {
  typeDisplay(props.layerData);
  server.layerList.forEach((e, i) => {
    if (props.layerData.id == e.id) {
    if (props.layerData.id == e.id && e.layerData) {
      layerLength.value = i;
      transparence.value = e.layerData.alpha * 100;
    }