标绘贴地

WX

2023-09-14 5d0ad67a45c25938c0ee890083ddb5aa4b97cd40

标绘贴地

 src/assets/js/Map/index.js

@@ -39,6 +39,7 @@
    //=======================
    window.Viewer.imageryLayers.removeAll();

    Viewer.scene.globe.depthTestAgainstTerrain = false; // å¼€å¯æ·±åº¦æµ‹è¯•
    Viewer.animation.container.style.visibility = "hidden";
    Viewer.timeline.container.style.visibility = "hidden";
    //=======================

 src/components/BarGraphAxisLine.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<template>
  <div class="Echarts_box" :style="{ width: width, height: height }">
    <div id="myEcharts1" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
  watch,
  onUnmounted,
} from "vue";
import * as echarts from "echarts";

//defineProps æ¥æŽ¥æ”¶ç»„件的传值
const props = defineProps({
  width: String,
  height: String,
});
let myEcharts = echarts;
onMounted(() => {
  initChart();
});

onUnmounted(() => {
  myEcharts.dispose;
});

function initChart() {
  let chart = myEcharts.init(
    document.getElementById("myEcharts1"),
    "purple-passion"
  );
  chart.setOption({
    title: {
      text: "",
      left: "center",
    },
    toolbox: {
      show: true, //是否显示工具栏组件
      orient: "horizontal", //工具栏 icon çš„布局朝向'horizontal' 'vertical'
      itemSize: 15, //工具栏 icon çš„大小
      itemGap: 10, //工具栏 icon æ¯é¡¹ä¹‹é—´çš„é—´éš”
      showTitle: true, //是否在鼠标 hover çš„时候显示每个工具 icon çš„标题
      feature: {
        mark: {
          // '辅助线开关'
          show: true,
        },
        // dataView : {                            //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
        //     show: true,                         //是否显示该工具。
        //     title:"数据视图",
        //     readOnly: false,                    //是否不可编辑（只读）
        //     lang: ['数据视图', '关闭', '刷新'],  //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
        //     backgroundColor:"#fff",             //数据视图浮层背景色。
        //     textareaColor:"#fff",               //数据视图浮层文本输入区背景色
        //     textareaBorderColor:"#333",         //数据视图浮层文本输入区边框颜色
        //     textColor:"#000",                    //文本颜色。
        //     buttonColor:"#c23531",              //按钮颜色。
        //     buttonTextColor:"#fff",             //按钮文本颜色。
        // },
        // magicType: {                            //动态类型切换
        //     show: true,
        //     title:"切换",                       //各个类型的标题文本，可以分别配置。
        //     type: ['line', 'bar'],              //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
        // },
        // restore : {                             //配置项还原。
        //     show: true,                         //是否显示该工具。
        //     title:"还原",
        // },
        saveAsImage: {
          //保存为图片。
          show: true, //是否显示该工具。
          type: "png", //保存的图片格式。支持 'png' å’Œ 'jpeg'。
          name: "pic1", //保存的文件名称，默认使用 title.text ä½œä¸ºåç§°
          backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
          title: "保存为图片",
          pixelRatio: 1, //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 çš„值，例如 2
        },
        // dataZoom :{                             //数据区域缩放。目前只支持直角坐标系的缩放
        //     show: true,                         //是否显示该工具。
        //     title:"缩放",                       //缩放和还原的标题文本
        //     xAxisIndex:0,                       //指定哪些 xAxis è¢«æŽ§åˆ¶ã€‚如果缺省则控制所有的x轴。如果设置为 false åˆ™ä¸æŽ§åˆ¶ä»»ä½•x轴。如果设置成 3 åˆ™æŽ§åˆ¶ axisIndex ä¸º 3 çš„x轴。如果设置为 [0, 3] åˆ™æŽ§åˆ¶ axisIndex ä¸º 0 å’Œ 3 çš„xè½´
        //     yAxisIndex:false,                   //指定哪些 yAxis è¢«æŽ§åˆ¶ã€‚如果缺省则控制所有的y轴。如果设置为 false åˆ™ä¸æŽ§åˆ¶ä»»ä½•y轴。如果设置成 3 åˆ™æŽ§åˆ¶ axisIndex ä¸º 3 çš„y轴。如果设置为 [0, 3] åˆ™æŽ§åˆ¶ axisIndex ä¸º 0 å’Œ 3 çš„yè½´
        // },
      },
      zlevel: 0, //所属图形的Canvas分层，zlevel å¤§çš„ Canvas ä¼šæ”¾åœ¨ zlevel å°çš„ Canvas çš„上面
      z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
      left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
      top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
      right: "auto", //组件离容器右侧的距离,'20%'
      bottom: "auto", //组件离容器下侧的距离,'20%'
      width: "auto", //图例宽度
      height: "auto", //图例高度
    },

    legend: {
      data: [],
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
        type: "line",
        smooth: true,
        symbol: "none", //取消折点圆圈
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: "{c}",
            },
          },
        },
      },
    ],
  });
  window.onresize = function () {
    chart.resize();
  };
}
</script>
<style lang="less" scoped>
.Echarts_box {
  background: #fff;
}
</style>

 src/utils/downloadCSV.js

@@ -41,7 +41,7 @@
      },
    ],
    // è¿™æ˜¯å¯¹åº”body常量的表头
    ["layerName", "min", "max", "avg", "lng", "lat"],
    ["layerName", "min", "max", "avg", "lon", "lat"],
  ];
  body.unshift(...header); // å°†å®šä¹‰å¥½çš„表头添加到 body ä¸­
  const sheet = XLSXS.utils.aoa_to_sheet(body); // aoa_to_sheet å°†äºŒç»´æ•°ç»„转成 sheet

 src/views/plotting/plotting.vue

@@ -172,7 +172,11 @@
      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);
@@ -205,9 +209,10 @@
      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 è´´åœ°ç±»åž‹
    },
  });


 src/views/plotting/plottingInquire.vue

@@ -45,7 +45,7 @@
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
                    v-for="item in pixeloptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
@@ -53,9 +53,42 @@
                </el-select>
              </div>
            </div>
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            <div class="chart" v-if="chartIsshow">
              <div class="chart_box">
                <div class="chart_btn">
                  <el-button
                    :icon="Search"
                    link
                    class="linkBtn"
                    @click="openDialog"
                  ></el-button>

                  <el-button :icon="Download" link class="linkBtn"></el-button>
                  <el-button
                    :icon="Delete"
                    link
                    class="del linkBtn"
                  ></el-button>
                </div>
                <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
              </div>
              <div class="select_box">
                <el-select
                  v-model="layerValue"
                  class="m-2"
                  placeholder="选择图层"
                  size="small"
                >
                  <el-option
                    v-for="item in layeroptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>

            <div class="inquireContent_msg" v-if="!chartIsshow">
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
@@ -97,6 +130,14 @@
      </div>
    </div>
  </div>
  <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false">
    <div class="chart">
      <i @click.capture="closeDialog"
        ><el-icon><Close /></el-icon
      ></i>
      <BarGraphAxisLine :width="'856px'" :height="'636px'"></BarGraphAxisLine>
    </div>
  </div>
</template>

<script lang="ts" setup>
@@ -113,9 +154,11 @@
import { useStore } from "vuex"; // å¼•å…¥useStore æ–¹æ³•
//echarts
import BarGraph from "@/components/BarGraph.vue";
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
import { Search, Delete, Download } from "@element-plus/icons-vue";
const store = useStore(); // è¯¥æ–¹æ³•ç”¨äºŽè¿”回store å®žä¾‹
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -129,7 +172,22 @@
  Scop: "",
  pixel: "1",
});
const options = [
let layerValue = ref("");
const layeroptions = [
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
];
const pixeloptions = [
  {
    value: "1",
    label: "1×1",
@@ -168,6 +226,16 @@
  },
];
let resultList = ref([]);
let dialogShow = ref(false);
//关闭
const closeDialog = () => {
  dialogShow.value = false;
  // alert(1);
};
//打开
const openDialog = () => {
  dialogShow.value = true;
};
//像素选择
const pixelChange = (val) => {
  if (store.state.plottingInquireData.entitiesData.icon == "d.png") {
@@ -279,6 +347,7 @@
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      chartIsshow.value = false;
      if (nVal.entitiesData.name == oVal.entitiesData.name) {
        return;
      }
@@ -286,6 +355,7 @@
      selectPolygon({ wkt: nVal.entitiesData.wkt });
    }
    if (nVal && nVal.entitiesData.icon == "d.png") {
      chartIsshow.value = false;
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
@@ -516,6 +586,56 @@
        color: #d6e4ff;
      }
    }
    .chart {
      width: 100%;
    }
    .chart_box {
      width: 100%;
      .chart_btn {
        display: flex;
        justify-content: flex-end;
        margin: 0 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        // border-bottom: 1px solid rgba(214, 228, 255, 0.4);
        .linkBtn {
          color: #d6e4ff;
        }
        .del {
          color: red;
        }
      }
    }
    .select_box {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
    }
  }
}
.dialog {
  position: absolute;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 110;
  .chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(33, 37, 44);
    padding: 20px;
    i {
      position: absolute;
      right: 2px;
      top: 2px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>