标绘查询

Surpriseplus

2023-09-07 6f6bde091d22db0680b1a6d4a8a6952541f4d07d

 src/views/plotting/plotting.vue

@@ -1,8 +1,14 @@
<template>
  <div v-drag class="plottingBox">
  <div
    v-drag
    class="plottingBox"
  >
    <div class="plottingTitle">
      <div class="tileLeft">
        <div class="titleImg">
        <div
          class="titleImg"
          @click="setCloseplotting"
        >
          <ArrowLeft />
        </div>
        <div class="titleLable">标绘查询</div>
@@ -12,13 +18,26 @@
      <div class="plotting_content_btn">
        <span class="plotting_content_title">标绘工具</span>
        <div class="plotting_btn">
          <div class="btn_box_d btn_box"></div>
          <div class="btn_box_x btn_box"></div>
          <div class="btn_box_m btn_box"></div>
          <div
            class="btn_box_d btn_box"
            @click="setMenuDraw('point')"
          ></div>
          <div
            class="btn_box_x btn_box"
            @click="setMenuDraw('polyline')"
          ></div>
          <div
            class="btn_box_m btn_box"
            @click="setMenuDraw('polygon')"
          ></div>
        </div>
      </div>
      <div class="plotting_list">
        <div class="plotting_list_tr" v-for="(item, i) in list" :key="i">
        <div
          class="plotting_list_tr"
          v-for="(item, i) in list"
          :key="i"
        >
          <div class="plotting_list_tr_name">
            <img
              :src="require(`../../assets/img/${item.icon}`)"
@@ -27,8 +46,14 @@
            /><span>{{ item.name }}</span>
          </div>
          <div class="plotting_list_tr_btn">
            <div class="tr_btn dw"></div>
            <div class="tr_btn sc"></div>
            <div
              class="tr_btn dw"
              @click="setLayerLocation(item)"
            ></div>
            <div
              class="tr_btn sc"
              @click="setLayerRemove(item)"
            ></div>
          </div>
        </div>
      </div>
@@ -37,6 +62,7 @@
</template>

<script lang="ts" setup>
import menuTool from "@/assets/js/Map/menuTool";
import {
  ref,
  onMounted,
@@ -45,23 +71,152 @@
  defineProps,
  defineEmits,
} from "vue";
let list = ref([
  {
    name: "Path #9",
    type: "poi",
const emits = defineEmits(["setCloseplotting"]);
let list = ref([]);
const drawFlag = ref(null);
const plotNum = ref({
  point: 1,
  line: 1,
  polygon: 2,
});
const lineColor = ref(null);
const metiaColor = ref(null);

const setLayerLocation = (res) => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
    if (entities[i].name == res.name) {
      Viewer.zoomTo(entities[i]);
      break;
    }
  }
};

const setLayerRemove = (res) => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
    if (entities[i].name == res.name) {
      Viewer.entities.remove(entities[i]);
      list.value.splice(i, 1);
      break;
    }
  }
};

const setMenuDraw = (res) => {
  lineColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 1)");
  metiaColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 0.3)");
  drawFlag.value = res;
  var config = {};
  if (res != "point") {
    config = { showSize: false };
  }
  sgworld.Creator.createSimpleGraphic(drawFlag.value, config, (entity) => {
    sgworld.Creator.SimpleGraphic.clear();
    setAddEntityLayer(entity);
  });
};
const setAddEntityLayer = (res) => {
  switch (drawFlag.value) {
    case "point":
      setAddEntityPoint(res);
      break;
    case "polyline":
      setAddEntityPolyline(res);
      break;
    case "polygon":
      setAddEntityPolygon(res);
      break;
  }
};
const setAddEntityPoint = (res) => {
  var geom = setCartesianToEightFour(res.position.getValue());
  var name = "Point#" + plotNum.value.point;
  var layer = Viewer.entities.add({
    name: name,
    position: Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat),
    point: {
      color: metiaColor.value,
      outlineColor: lineColor.value,
      pixelSize: 20,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });
  list.value.push({
    name: name,
    layer: layer,
    icon: "d.png",
  },
  {
    name: "路径 #1",
    type: "line",
  });
  plotNum.value.point++;
};
const setAddEntityPolyline = (res) => {
  var std = [];
  var res_val = res.polyline.positions.getValue();

  for (var i in res_val) {
    var geom = setCartesianToEightFour(res_val[i]);
    std.push(geom.lng, geom.lat);
  }
  var name = "Plyline#" + plotNum.value.line;
  var layer = Viewer.entities.add({
    name: name,
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(std),
      width: 6,
      material: lineColor.value,
      clampToGround: true,
    },
  });
  list.value.push({
    name: name,
    layer: layer,
    icon: "x.png",
  },
  {
    name: "多边形 #5",
    type: "cover",
  });
  plotNum.value.line++;
};
const setAddEntityPolygon = (res) => {
  var std = [];
  var res_val = res.polygon.hierarchy.getValue().positions;

  for (var i in res_val) {
    var geom = setCartesianToEightFour(res_val[i]);
    std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
  }
  var name = "Polygon#" + plotNum.value.polygon;
  var layer = Viewer.entities.add({
    name: name,
    polygon: {
      hierarchy: std,
      material: metiaColor.value,
      outline: true,
      outlineColor: lineColor.value,
      outlineWidth: 2,
      classificationType: Cesium.ClassificationType.BOTH, //贴地形和3dtile
      clampToGround: true, //开启贴地
      height: 0,
    },
  });
  list.value.push({
    name: name,
    layer: layer,
    icon: "m.png",
  },
]);
  });
  plotNum.value.polygon++;
};
const setCartesianToEightFour = (res) => {
  var std = {};
  let ellipsoid = window.Viewer.scene.globe.ellipsoid;
  let cartographic = ellipsoid.cartesianToCartographic(res);
  std.lat = Cesium.Math.toDegrees(cartographic.latitude);
  std.lng = Cesium.Math.toDegrees(cartographic.longitude);
  std.alt = cartographic.height;
  return std;
};

const setCloseplotting = () => {
  emits("setCloseplotting", false);
};
</script>

<style lang="less" scoped>
@@ -69,6 +224,9 @@
  width: 359px;
  height: 680px;
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  z-index: 40;

  .plottingTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -86,7 +244,7 @@
      align-items: center;

      .titleLable {
        font-size: 24px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
@@ -104,7 +262,7 @@
    margin-top: 3px;

    .plotting_content_title {
      font-size: 20px;
      font-size: 16px;
      font-weight: 300;
      color: #ffffff;
    }
@@ -173,7 +331,7 @@
          height: 27px;
        }
        span {
          font-size: 16px;
          font-size: 14px;
          font-weight: 300;
          color: #ffffff;
          margin-left: 10px;