月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-10-17 25ad6779e118f2f01e9cda45c67f7b27d55a984a
src/views/plotting/attributeInfo.vue
@@ -1,20 +1,10 @@
<template>
  <div class="attributeInfo">
    <!-- 标题 -->
    <div
      class="attributeTitle"
      @mousemove="setMouseMove(1)"
      @mouseout="setMouseMove(2)"
    >
    <div class="attributeTitle" @mousemove="setMouseMove(1)" @mouseout="setMouseMove(2)">
      <div class="attributeLabel">属性信息</div>
      <div
        class="attributeClose"
        @click="setAttributeInfoClose"
      >
        <el-icon
          :size="20"
          style="color:#d6e4ff"
        >
      <div class="attributeClose" @click="setAttributeInfoClose">
        <el-icon :size="20" style="color:#d6e4ff">
          <Close />
        </el-icon>
      </div>
@@ -27,149 +17,75 @@
      </div>
      <div class="contentBox">
        <div class="contentLabel"> <label>名称</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            @change="setEntityNameChange"
            v-model="fromLine.cnName"
          ></el-input>
        <div class="contentmenu"><el-input size="mini" @change="setEntityNameChange" v-model="fromLine.cnName"></el-input>
        </div>
      </div>
      <div
        class="contentBox"
        v-show="showEntity.label"
      >
      <div class="contentBox" v-show="showEntity.label">
        <div class="contentLabel"> <label>内容</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            v-model="fromLine.text"
          ></el-input></div>
        <div class="contentmenu"><el-input size="mini" v-model="fromLine.text"></el-input></div>
      </div>
      <div
        class="contentBox"
        v-show="showEntity.label"
      >
      <div class="contentBox" v-show="showEntity.label">
        <div class="contentLabel"> <label>字体</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            v-model="fromLine.font"
          ></el-input></div>
        <div class="contentmenu"><el-input size="mini" v-model="fromLine.font"></el-input></div>
      </div>
      <div
        class="contentBox"
        v-show="showEntity.label"
      >
      <div class="contentBox" v-show="showEntity.label">
        <div class="contentLabel"> <label>比例大小</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            v-model="fromLine.scale"
          ></el-input></div>
        <div class="contentmenu"><el-input size="mini" v-model="fromLine.scale"></el-input></div>
      </div>
      <div
        class="contentBox"
        v-show="showEntity.point"
      >
      <div class="contentBox" v-show="showEntity.point">
        <div class="contentLabel"> <label>大小</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            @change="setEntitySizeChange"
            v-model="fromLine.size"
          ></el-input>
        <div class="contentmenu"><el-input size="mini" @change="setEntitySizeChange" v-model="fromLine.size"></el-input>
        </div>
      </div>
      <div class="contentBox">
      <div class="contentBox" v-show="showEntity.setclampToGround">
        <div class="contentLabel">
          <label v-show="!showEntity.clampToGround">是否被遮挡</label>
          <label v-show="showEntity.clampToGround">是否贴地</label>
        </div>
        <div class="contentmenu"> <el-switch
            v-model="fromLine.heightReference"
            @change="setEntityHeightReferenceChange"
          /></div>
        <div class="contentmenu"> <el-switch v-model="fromLine.heightReference"
            @change="setEntityHeightReferenceChange" /></div>
      </div>
      <div class="contentBox">
        <div class="contentLabel"> <label>填充色</label></div>
        <div class="contentmenu"> <el-color-picker
            size="small"
            v-model="fromLine.material"
            @change="setEntityMaterColorChange"
          /></div>
        <div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.material"
            @change="setEntityMaterColorChange" /></div>
      </div>
      <div class="contentBox">
        <div class="contentLabel"> <label>填充透明度</label></div>
        <div class="contentmenu"> <el-slider
            size="small"
            v-model="fromLine.materialAlpha"
            @change="setEntityMaterColorChange"
            :step="0.1"
            :max="1"
            :min="0"
          /></div>
        <div class="contentmenu"> <el-slider size="small" v-model="fromLine.materialAlpha"
            @change="setEntityMaterColorChange" :step="0.1" :max="1" :min="0" /></div>
      </div>
      <div class="contentBox">
        <div class="contentLabel"> <label>是否显示边框</label></div>
        <div class="contentmenu"> <el-switch
            @change="setEntityOutLineShowReferenceChange"
            v-model="fromLine.outline"
          />
        <div class="contentmenu"> <el-switch @change="setEntityOutLineShowReferenceChange" v-model="fromLine.outline" />
        </div>
      </div>
      <div
        class="contentBox"
        v-show="fromLine.outline"
      >
      <div class="contentBox" v-show="fromLine.outline">
        <div class="contentLabel"> <label>边框大小</label></div>
        <div class="contentmenu">
          <el-input-number
            v-model="fromLine.width"
            :min="0"
            size="small"
            @change="setEntityOutLineWidthReferenceChange"
            controls-position="right"
          />
          <el-input-number v-model="fromLine.width" :min="0" size="small" @change="setEntityOutLineWidthReferenceChange"
            controls-position="right" />
        </div>
      </div>
      <div
        class="contentBox"
        v-show="fromLine.outline"
      >
      <div class="contentBox" v-show="fromLine.outline">
        <div class="contentLabel"> <label>边框色</label></div>
        <div class="contentmenu"> <el-color-picker
            size="small"
            v-model="fromLine.outlineColor"
            @change="setEntityOutLineColorChange"
          /></div>
        <div class="contentmenu"> <el-color-picker size="small" v-model="fromLine.outlineColor"
            @change="setEntityOutLineColorChange" /></div>
      </div>
      <div
        class="contentBox"
        v-show="fromLine.outline"
      >
      <div class="contentBox" v-show="fromLine.outline">
        <div class="contentLabel"> <label>边框透明度</label></div>
        <div class="contentmenu"> <el-slider
            size="small"
            v-model="fromLine.outlineAlpha"
            :step="0.1"
            :max="1"
            :min="0"
            @change="setEntityOutLineColorChange"
          /></div>
        <div class="contentmenu"> <el-slider size="small" v-model="fromLine.outlineAlpha" :step="0.1" :max="1" :min="0"
            @change="setEntityOutLineColorChange" /></div>
      </div>
      <div class="contentBox">
        <div class="contentLabel"> <label>最小可视距离</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            v-model="fromLine.near"
            @change="setEntityNearChange"
          ></el-input>
        <div class="contentmenu"><el-input size="mini" v-model="fromLine.near" @change="setEntityNearChange"></el-input>
        </div>
      </div>
      <div class="contentBox contentBottom ">
        <div class="contentLabel"> <label>最大可视距离</label></div>
        <div class="contentmenu"><el-input
            size="mini"
            v-model="fromLine.far"
            @change="setEntityFarChange"
          ></el-input>
        <div class="contentmenu"><el-input size="mini" v-model="fromLine.far" @change="setEntityFarChange"></el-input>
        </div>
      </div>
    </div>
@@ -221,6 +137,7 @@
  label: false,
  point: false,
  clampToGround: false,
  setclampToGround: true,
});
const entity = ref(null);
const entityType = ref(null);
@@ -235,7 +152,7 @@
  switch (entityType.value) {
    case "point":
      entity.value.point.disableDepthTestDistance =
        fromLine.value.heightReference == true ? null : false;
        fromLine.value.heightReference == true ? null : Number.POSITIVE_INFINITY;
      break;
    case "label":
      entity.value.label.disableDepthTestDistance =
@@ -243,8 +160,8 @@
      break;
    case "polyline":
      entity.value.polyline.clampToGround = fromLine.value.heightReference;
      break;
  }
};
const setEntityOutLineWidthReferenceChange = () => {
@@ -256,17 +173,18 @@
      entity.value.label.outlineWidth = fromLine.value.width;
      break;
    case "polyline":
      setPolylineEntityColor();
      entity.value.polyline.material.outlineWidth._value = fromLine.value.width;
      break;
    case "rectangle":
      entity.value.rectangle.outlineWidth._value = fromLine.value.width;
      break;
    case "polygon":
      entity.value.polygon.outlineWidth._value = fromLine.value.width;
      break;
  }
};
const setPolylineEntityColor = () => {
  const outlineWidth = 0;
  if (fromLine.value.outline) {
    outlineWidth = fromLine.value.width;
  }
};
const setEntityOutLineShowReferenceChange = () => {
  var type = entity.value.GeoType;
  if (type == "point") {
@@ -281,11 +199,26 @@
    } else {
      entity.value.label.style = Cesium.LabelStyle.FILL;
    }
  } else if (type == 'polyline') {
    if (fromLine.value.outline) {
      entity.value.polyline.material.outlineWidth._value = fromLine.value.width;
    } else {
      entity.value.polyline.material.outlineWidth._value = null;
    }
  } else if (type == 'rectangle') {
    entity.value.rectangle.outline._value = fromLine.value.outline;
  } else if (type == 'polygon') {
    entity.value.polygon.outline._value = fromLine.value.outline;
  }
};
const setAttributeInfoClose = () => {
  store.state.editTemporaryback = entity._value.id;
  store.state.setEditTemporaryShow = false;
  store.state.editTemporaryId = null;
  sgworld.Creator.SimpleGraphic.SimpleGraphicObj=[];
};
const setEntityMaterColorChange = () => {
  const material = "rgb(255,255,255)";
@@ -293,13 +226,27 @@
    material = hexToRgb(fromLine.value.material);
  }
  var type = entity.value.GeoType;
  if (type == "point") {
    entity.value.point.color = Cesium.Color.fromCssColorString(
      material
    ).withAlpha(fromLine.value.materialAlpha);
  } else if (type == "label") {
    entity.value.label.fillColor = Cesium.Color.fromCssColorString(
      material
    ).withAlpha(fromLine.value.materialAlpha);
  } else if (type == 'polyline') {
    entity.value.polyline.material.color = Cesium.Color.fromCssColorString(
      material
    ).withAlpha(fromLine.value.materialAlpha);
  } else if (type == 'rectangle') {
    entity.value.rectangle.material.color = Cesium.Color.fromCssColorString(
      material
    ).withAlpha(fromLine.value.materialAlpha);
  } else if (type == 'polygon') {
    entity.value.polygon.material.color = Cesium.Color.fromCssColorString(
      material
    ).withAlpha(fromLine.value.materialAlpha);
  }
@@ -310,22 +257,67 @@
    material = hexToRgb(fromLine.value.outlineColor);
  }
  var type = entity.value.GeoType;
  if (type == "point") {
    entity.value.point.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
      fromLine.value.outlineAlpha
    );
  } else if (type == "label") {
    entity.value.label.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
      fromLine.value.outlineAlpha
    );
  } else if (type == 'polyline') {
    entity.value.polyline.material.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
      fromLine.value.outlineAlpha
    );
  } else if (type == 'rectangle') {
    entity.value.rectangle.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha(
      fromLine.value.outlineAlpha
    );
  } else if (type == 'polygon') {
    entity.value.polygon.outlineColor._value = Cesium.Color.fromCssColorString(material).withAlpha(
      fromLine.value.outlineAlpha
    );
  }
};
const setEntityNearChange = () => {
  var type = entity.value.GeoType;
  var res;
  if (type == "point") {
    res = entity.value.point;
  } else if (type == "label") {
    res = entity.value.label;
  } else if (type == 'polyline') {
    res = entity.value.polyline;
  } else if (type == 'rectangle') {
    res = entity.value.rectangle;
  } else if (type == 'polygon') {
    res = entity.value.polygon;
  }
  res.outlineColor = Cesium.Color.fromCssColorString(material).withAlpha(
    fromLine.value.outlineAlpha
  );
};
const setEntityNearChange = () => {
  entity.value.point._distanceDisplayCondition._value.near =
    fromLine.value.near;
  res._distanceDisplayCondition._value.near = fromLine.value.near;
};
const setEntityFarChange = () => {
  entity.value.point._distanceDisplayCondition._value.far = fromLine.value.far;
  // entity.value.point._distanceDisplayCondition._value.far = fromLine.value.far;
  var type = entity.value.GeoType;
  var res;
  if (type == "point") {
    res = entity.value.point;
  } else if (type == "label") {
    res = entity.value.label;
  } else if (type == 'polyline') {
    res = entity.value.polyline;
  } else if (type == 'rectangle') {
    res = entity.value.rectangle;
  } else if (type == 'polygon') {
    res = entity.value.polygon;
  }
  res._distanceDisplayCondition._value.near = fromLine.value.far;
};
const hexToRgb = (hex) => {
  return (
@@ -343,7 +335,7 @@
  var res = entity.value;
  var type = res.GeoType;
  entityType.value = type;
  debugger
  switch (type) {
    case "label":
      showEntity.value.label = true;
@@ -351,12 +343,14 @@
    case "point":
      showEntity.value.point = true;
      break;
    case "polygon":
      break;
    case "polyline":
      showEntity.value.clampToGround = true;
      break;
    case "rectangle":
      showEntity.value.setclampToGround = false;
      break;
    case "polygon":
      showEntity.value.setclampToGround = false;
      break;
  }
@@ -364,6 +358,7 @@
  fromLine.value = obj;
};
const getTemporaryAttribute = () => {
  if (store.state.editTemporaryId) {
    var entities = window.Viewer.entities._entities._array;
    for (var i in entities) {