代码更新

Surpriseplus

2023-10-10 77f9937b32f67f5b7d5476b0a1db19956702c0c8

 src/views/plotting/plotting.vue

@@ -37,6 +37,7 @@
          class="plotting_list_tr"
          v-for="(item, i) in list"
          :key="i"
          @click.stop="resultShow(item)"
        >
          <div class="plotting_list_tr_name">
            <img
@@ -48,11 +49,11 @@
          <div class="plotting_list_tr_btn">
            <div
              class="tr_btn dw"
              @click="setLayerLocation(item)"
              @click.stop="setLayerLocation(item)"
            ></div>
            <div
              class="tr_btn sc"
              @click="setLayerRemove(item)"
              @click.stop="setLayerRemove(item)"
            ></div>
          </div>
        </div>
@@ -70,8 +71,14 @@
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { useStore } from "vuex"; // 引入useStore 方法
import { selectByPoint, selectByPolygon } from "@/api/api";
import WKT from "terraformer-wkt-parser";
import * as turf from "@turf/turf";
const emits = defineEmits(["setCloseplotting"]);
const store = useStore(); // 该方法用于返回store 实例
let list = ref([]);
const drawFlag = ref(null);
const plotNum = ref({
@@ -81,7 +88,14 @@
});
const lineColor = ref(null);
const metiaColor = ref(null);

//点查询接口
const selectPoint = async () => {
  const dt = await selectByPoint();
};
//线查询接口
const selectPolygon = async () => {
  const dt = await selectByPolygon();
};
const setLayerLocation = (res) => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
@@ -98,6 +112,12 @@
    if (entities[i].name == res.name) {
      Viewer.entities.remove(entities[i]);
      list.value.splice(i, 1);
      let obj = {
        isshow: false,
        entitiesData: {},
        getData: {},
      };
      store.state.plottingInquireData = obj;
      break;
    }
  }
@@ -143,20 +163,28 @@
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });
  var point = turf.point([geom.lng, geom.lat]);

  var wkt = WKT.convert(point.geometry);

  list.value.push({
    name: name,
    layer: layer,
    // layer: layer,
    icon: "d.png",
    wkt: wkt,
    lng: geom.lng,
    lat: geom.lat,
  });
  plotNum.value.point++;
};
const setAddEntityPolyline = (res) => {
  var std = [];
  var res_val = res.polyline.positions.getValue();

  var coord = [];
  for (var i in res_val) {
    var geom = setCartesianToEightFour(res_val[i]);
    std.push(geom.lng, geom.lat);
    coord.push([geom.lng, geom.lat]);
  }
  var name = "Plyline#" + plotNum.value.line;
  var layer = Viewer.entities.add({
@@ -165,12 +193,20 @@
      positions: Cesium.Cartesian3.fromDegreesArray(std),
      width: 6,
      material: lineColor.value,
      clampToGround: true,
      //clampToGround: true,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置 HeightReference 高度参考类型为 CLAMP_TO_GROUND 贴地类型
      //classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile  BOTH 或 CESIUM_3D_TILE 或 TERRAIN
      verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
    },
  });
  var linestring = turf.lineString(coord);
  console.log(linestring);
  var wkt = WKT.convert(linestring.geometry);
  list.value.push({
    wkt: wkt,
    name: name,
    layer: layer,
    // layer: layer,
    icon: "x.png",
  });
  plotNum.value.line++;
@@ -178,10 +214,12 @@
const setAddEntityPolygon = (res) => {
  var std = [];
  var res_val = res.polygon.hierarchy.getValue().positions;

  var geom;
  var coord = [];
  for (var i in res_val) {
    var geom = setCartesianToEightFour(res_val[i]);
    geom = setCartesianToEightFour(res_val[i]);
    std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
    coord.push([geom.lng, geom.lat]);
  }
  var name = "Polygon#" + plotNum.value.polygon;
  var layer = Viewer.entities.add({
@@ -192,15 +230,33 @@
      outline: true,
      outlineColor: lineColor.value,
      outlineWidth: 2,
      classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile
      classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile  BOTH 或 CESIUM_3D_TILE 或 TERRAIN
      clampToGround: true, //开启贴地
      height: 0,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置 HeightReference 高度参考类型为 CLAMP_TO_GROUND 贴地类型
    },
  });

  coord.push(coord[0]);

  var polygon = turf.polygon([coord]);
  var wkt = WKT.convert(polygon.geometry);

  let turfPoint = [];
  polygon.geometry.coordinates[0].forEach((e) => {
    turfPoint.push(turf.point(e));
  });
  var features = turf.featureCollection(turfPoint);

  var center = turf.center(features);

  list.value.push({
    wkt: wkt,
    name: name,
    layer: layer,
    // layer: layer,
    icon: "m.png",
    lng: center.geometry.coordinates[0],
    lat: center.geometry.coordinates[1],
  });
  plotNum.value.polygon++;
};
@@ -217,6 +273,33 @@
const setCloseplotting = () => {
  emits("setCloseplotting", false);
};
const resultShow = (res) => {
  let obj = {
    isshow: true,
    entitiesData: res,
    getData: {},
  };
  // store.commit("SET_plotting", obj);

  store.state.plottingInquireData = obj;
};
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    if (nVal.isshow == false) {
      //列表删除联动
      if (nVal.entitiesData != {} && nVal.entitiesData.name) {
        for (var i in list.value) {
          if (list.value[i].name == nVal.entitiesData.name) {
            list.value.splice(i, 1);
            break;
          }
        }
      }
    }
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
@@ -322,6 +405,7 @@
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      cursor: pointer;
      .plotting_list_tr_name {
        display: flex;
        align-items: center;