图层管理>详情颜色表对接调试

Surpriseplus

2023-09-07 0cf18f830d87664134f6e319abe44fcd59bf82c9

 src/views/layer/layerDetail.vue

@@ -1,8 +1,12 @@
<template>
  <div class="content" v-drag="true">
  <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>
@@ -12,9 +16,15 @@
          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" v-show="diaphaneityShow">
      <div
        class="slider-demo-block"
        v-show="diaphaneityShow"
      >
        <div class="demonstration">透明度</div>
        <el-slider
          v-model="transparence"
@@ -23,7 +33,10 @@
        />
        <div class="demonstration">{{ transparence }}%</div>
      </div>
      <div class="slider-demo-block" v-show="contrastShow">
      <div
        class="slider-demo-block"
        v-show="contrastShow"
      >
        <div class="demonstration">对比度</div>
        <el-slider
          v-model="contrast"
@@ -33,7 +46,10 @@
        />
        <div class="demonstration">{{ contrast }}</div>
      </div>
      <div class="selectBox" v-show="drawingModeShow">
      <div
        class="selectBox"
        v-show="drawingModeShow"
      >
        <div class="selectTile demonstration">拉伸方式</div>
        <div class="stretchSelect">
          <el-select
@@ -69,7 +85,29 @@
          />
        </div>
      </div>
      <div class="selectBox" v-show="colorShow">
      <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"
@@ -82,7 +120,7 @@
          <el-option
            v-for="(item, i) in renderTypeOptions"
            :key="i"
            :label="item.data_id"
            :label="item.name"
            :value="item.name"
          >
            <div
@@ -101,6 +139,20 @@
          </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>
@@ -115,7 +167,12 @@
  defineEmits,
} from "vue";
import server from "@/assets/js/Map/server";
import { publish_selectSjColorTables } from "@/api/api";
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("");
@@ -123,6 +180,7 @@
const contrast = ref(1);
let layerName = ref("图层名称");
let layerState = ref(false);
const releaseLayer = ref(null);
let select = ref();
let renderType = ref("");
let renderTypeOptions = ref([]);
@@ -148,9 +206,24 @@
    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;
@@ -171,7 +244,7 @@
const getColorJson = async () => {
  const dt = await publish_selectSjColorTables({
    pageIndex: 1,
    pageSize: 1000,
    pageSize: 100000,
  });
  renderTypeOptions.value = dt.result.item_list;

@@ -180,7 +253,6 @@
    let css1 = "";
    e.content.levels.forEach((v) => {
      if ("r_start" in v) {
        console.log(v.r_start);
        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}),`;
@@ -292,7 +364,7 @@
    val.data == 6
  ) {
    contrastShow.value = true;
    drawingModeShow.value = true;
    // drawingModeShow.value = true;
  }
  if (val.data == 3 || val.data == 4) {
    colorShow.value = true;
@@ -333,6 +405,51 @@
  }
};
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,
  };
  const data = publish_updateSjService(obj);
  if (data.count != 200) {
    return ElMessage(data.msg);
  }
  store.state.restLayer = true;
  setSpatialClose();
};
onMounted(() => {
  typeDisplay(props.layerData);
  server.layerList.forEach((e, i) => {
@@ -341,6 +458,11 @@
      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>