标绘查询修改，空间查询功能修改，图层管理数据加载方式修改

Surpriseplus

2023-10-10 616b8ab8998bfbec69929152612dc94d3112c2a9

标绘查询修改，空间查询功能修改，图层管理数据加载方式修改

 src/assets/js/Map/menuTool.js

@@ -227,9 +227,9 @@
            positions: Cesium.Cartesian3.fromDegreesArray(position),
            width: 10.0,
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.GREEN.withAlpha(0.2),
              color: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5),
              outlineWidth: 1,
              outlineColor: Cesium.Color.WHITE,
              outlineColor: new Cesium.Color.fromCssColorString('#A6D8AE'),
            }),
            clampToGround: true,

@@ -241,7 +241,7 @@
          name: name,
          position: Cesium.Cartesian3.fromDegrees(res.lng, res.lat),
          point: {
            color: Cesium.Color.GREEN.withAlpha(0.2),
            color: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5),
            pixelSize: 20,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          }
@@ -255,9 +255,9 @@
            outline: true,
            outlineWidth: 100,
            arcType: Cesium.ArcType.RHUMB,
            material: Cesium.Color.GREEN.withAlpha(0.2),
            material: new Cesium.Color.fromCssColorString('#A6D8AE').withAlpha(0.5),
            outline: true, // height is required for outline to display
            outlineColor: Cesium.Color.WHITE,
            outlineColor: new Cesium.Color.fromCssColorString('#A6D8AE')
          }
        });
        break;

 src/assets/js/Map/server.js

@@ -401,6 +401,7 @@
        that.getFeatureInfo(html);
      }
    );
 
    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: res.tab,
@@ -430,6 +431,12 @@
        that.getFeatureInfo(html);
      }
    );
    if (url.indexOf('{token}') > -1) {
      const token = getToken();
      url = config.proxy + url.replaceAll("{token}", token);
    } else {
      url = url;
    }
    let wmslayer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: layer.toString(),

 src/components/BarGraph.vue

@@ -34,6 +34,8 @@
let dataLength;
let data = [];
let isshow = ref(true);
let myChart = null;
let optionData = [];
watch(
  () => props.layerData,
  (nVal, oVal) => {
@@ -42,8 +44,9 @@
      xAxisData.value.push(e.len);
    });
    data = trans(props.layerData.points);

    optionData = props.layerData.points;
    seriesData.value = [];

    data.forEach((e) => {
      seriesData.value.push({
        data: e,
@@ -73,13 +76,14 @@
    xAxisData.value.push(e.len);
  });
  data = trans(props.layerData.points);
  optionData = props.layerData.points;
  seriesData.value = [];
  data.forEach((e) => {
    seriesData.value.push({
      data: e,
      type: "line",
      smooth: true,
      symbol: "none", //取消折点圆圈

      label: {
        label: {
          show: false,
@@ -89,6 +93,7 @@
      },
    });
  });

  nextTick(() => {
    initChart();
  });
@@ -111,11 +116,14 @@
  return result;
}
function initChart() {
  let chart = myEcharts.init(
  if (myChart) {
    myChart.clear();
  }
  myChart = myEcharts.init(
    document.getElementById(`myEcharts`),
    "purple-passion"
  );
  chart.setOption({
  myChart.setOption({
    // title: {
    //   text: props.layerData.layerName,
    //   left: "center",
@@ -163,8 +171,46 @@
          backgroundColor: "#6a7985",
        },
      },
      formatter: "数值：{c} <br> 距离：{b}m", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

      // formatter: "数值：{c} <br> 距离：{b}m", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      formatter: (result) => {
        var val = result[0];
        if (optionData) {
          for (var i in optionData) {
            var res = optionData[i];

            if (
              optionData[val.dataIndex].len == res.len &&
              res.vals[0] == val.data
            ) {
              return (
                "数值： " +
                val.data +
                " <br> 距离：" +
                val.dataIndex +
                "m<br> 经度：" +
                res.x.toFixed(6) +
                "<br> 纬度：" +
                res.y.toFixed(6)
              );
              break;
            }
          }
          return "数值： " + val.data + " <br> 距离：" + val.dataIndex + "m";
        } else {
          return "数值： " + val.data + " <br> 距离：" + val.dataIndex + "m";
        }
    },
    },

    grid: {
      left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字

      right: "10%",

      containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
    },

    yAxis: {
      type: "value",
      show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
@@ -184,7 +230,7 @@
    series: seriesData.value,
  });
  window.onresize = function () {
    chart.resize();
    myChart.resize();
  };
}
</script>

 src/components/BarGraphAxisLine.vue

@@ -1,6 +1,12 @@
<template>
  <div class="Echarts_box" :style="{ width: width, height: height }">
    <div id="myEchartsBIG" style="width: 100%; height: 100%"></div>
  <div
    class="Echarts_box"
    :style="{ width: width, height: height }"
  >
    <div
      id="myEchartsBIG"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>
<script lang="ts" setup>
@@ -29,7 +35,6 @@
let dataLength;
let data = [];
onMounted(() => {
  console.log(props.layerData);
  props.layerData.points.forEach((e, i) => {
    xAxisData.value.push(returnFloat1(e.len));
  });
@@ -191,6 +196,7 @@
    tooltip: {
      trigger: "axis",
    },

    yAxis: {
      type: "value",
    },

 src/components/mouseMove.vue

@@ -107,13 +107,14 @@
    if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
      return;
    }
    var ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON200;
    var leftCartographic =
      globe.ellipsoid.cartesianToCartographic(leftPosition);
    var rightCartographic =
      globe.ellipsoid.cartesianToCartographic(rightPosition);
    var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();

    geodesic.setEndPoints(leftCartographic, rightCartographic);
    geodesic.setEndPoints(leftCartographic, rightCartographic, ellipsoid);
    rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率
  });
};

 src/views/layer/layerManage.vue

@@ -210,6 +210,7 @@
    if (layerArr.category == 2 && layerArr.type == 3) {
      if (layerArr.tab != "moon:geo_mappable_unit") {
        setGeoWms.push(layerArr.tab);

        url = layerArr.url;
      }
    } else {

 src/views/plotting/plottingInquire.vue

@@ -524,6 +524,8 @@
  });

  layeroptions.value = dt.result;

  layerValue.value = layeroptions.value[0].layerName;
  layerArr.value.push(dt.result[0]);
  chartIsshow.value = true;
  layerData.value = dt.result[0];
@@ -567,9 +569,7 @@
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const handleClick = (tab: TabsPaneContext, event: Event) => {};
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
@@ -584,14 +584,17 @@
      var wkt = WKT.parse(inquireData.value.wkt);

      if (wkt.type == "Point") {
        geoWkt.value = wkt.coordinates[0] + " " + wkt.coordinates[1];
        geoWkt.value =
          wkt.coordinates[0].toFixed(6) + " " + wkt.coordinates[1].toFixed(6);
        geoWktFlag.value = true;
      }
      if (wkt.type == "Polygon") {
        var Polygon = turf.multiPolygon([wkt.coordinates]);
        var center = turf.center(Polygon);
        geoWkt.value =
          center.geometry.coordinates[0] + " " + center.geometry.coordinates[1];
          center.geometry.coordinates[0].toFixed(6) +
          " " +
          center.geometry.coordinates[1].toFixed(6);
        geoWktFlag.value = true;
      }
    }

 src/views/query/SpatialQuery.vue

@@ -622,7 +622,11 @@
      return res;
    }
  });

  if (str.length <= 0) {
    ElMessage.error("请选择要查询的图层");
    setSpatialClose();
    return;
  }
  menuList.value = str;
  listData.value.wkt = store.state.spatialQueryData.wkt;
  listData.value.name = menuList.value[0].tab.replaceAll("moon:", "");