前端添加柱状图显示

Surpriseplus

2023-03-06 60db92bf4f1e4cf4491668eb1d4281f6ac99bc02

 src/views/Synthesis/LeftMenu.vue

@@ -15,6 +15,7 @@
    <mapinfo ref="mapinfo" />
    <maplayer ref="maplayer" />
    <queryinfo ref="queryinfo" />
    <terrainDig ref="terrainDig" />
    <input
      type="file"
      accept=".kml"
@@ -39,6 +40,7 @@
import mapinfo from "../Tools/mapinfo.vue";
import maplayer from "../Tools/maplayer.vue";
import queryinfo from "../Tools/queryinfo.vue";
import terrainDig from "../Tools/terrainDig.vue";
import $ from "jquery";
import { getToken } from "@/utils/auth";
import ImageWMS from "ol/source/ImageWMS";
@@ -58,7 +60,7 @@
import { geometry } from "@turf/turf";

export default {
  components: { mapinfo, maplayer, queryinfo },
  components: { mapinfo, maplayer, queryinfo, terrainDig },
  data() {
    return {
      showTwoMenuFlag: false,
@@ -70,6 +72,18 @@
            label: "synthesis.layer",
            name: "图层管理",
            css: "twoMenu_imge11",
          },
          {
            id: "b1",
            label: "synthesis.split",
            name: "分屏",
            css: "twoMenu_imge21",
          },
          {
            id: "b9",
            label: "synthesis.undergroundMode",
            name: "地下模式",
            css: "twoMenu_imge29",
          },
        ],
        [
@@ -426,27 +440,30 @@
      }

      if (this.isMenuFlag != val) {
        this.$store.state.mapMenuBoolean = false;
        this.$store.state.mapMenuBoxFlag = null;
        this.$store.state.mapPopBoolean = false;
        this.$store.state.mapPopBoxFlag = null;
        sgworld.Creator.SimpleGraphic.clear();
        this.isMenuFlag = val;
        if (this.entityaLayers.length != 0) {
          for (var i in this.entityaLayers) {
            sgworld.Viewer.entities.remove(this.entityaLayers[i]);
        if (res.id != 'b9') {
          this.$store.state.mapMenuBoolean = false;
          this.$store.state.mapMenuBoxFlag = null;
          this.$store.state.mapPopBoolean = false;
          this.$store.state.mapPopBoxFlag = null;
          sgworld.Creator.SimpleGraphic.clear();
          this.isMenuFlag = val;
          if (this.entityaLayers.length != 0) {
            for (var i in this.entityaLayers) {
              sgworld.Viewer.entities.remove(this.entityaLayers[i]);
            }
            this.entityaLayers = [];
          }
          this.entityaLayers = [];
          for (var i in this.$store.state.queryInfo) {
            sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
          }
          this.$store.state.queryInfo = [];
          if (this.$store.state.primitLayer != null) {
            sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
            sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
            this.$store.state.primitLayer = null;
          }
        }
        for (var i in this.$store.state.queryInfo) {
          sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
        }
        this.$store.state.queryInfo = [];
        if (this.$store.state.primitLayer != null) {
          sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
          sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
          this.$store.state.primitLayer = null;
        }

      }
      this.showTwoMenuFlag = res.id;

@@ -1159,6 +1176,12 @@
          break;
        case "d2": //坡度分析
          that.isslopeFlag = !that.isslopeFlag;
          var val = {
            name: "Lengend",
            id: res,
            vshow: that.isslopeFlag
          };
          this.$bus.$emit("mapChangeBox", val);
          window.PDelevationTool = new SmartEarth.ElevationTool(sgworld); //全局变量
          if (that.isslopeFlag == true) {
            PDelevationTool.type = "slope";
@@ -1167,6 +1190,7 @@
            PDelevationTool.type = "none";
          }
          PDelevationTool.render();

          break;
        case "d3": //路径分析

@@ -1242,7 +1266,7 @@
          var that = this;
          window.model = sgworld.Creator.create3DTilesets(
            "",
            modelUrl,
            modelUrl + '/tileset/m/SN/tileset.json',
            {},
            {},
            "0",
@@ -1264,8 +1288,7 @@
                close: () => {
                  if (this.$store.state.pipelineEntity.length != 0) {
                    for (var i in this.$store.state.pipelineEntity) {
                      var item = this.$store.state.pipelineEntity[i];
                      sgworld.Viewer.entities.remove(item);
                      sgworld.Viewer.entities.remove(this.$store.state.pipelineEntity[i]);
                    }
                  }
                },
@@ -1287,52 +1310,64 @@
          }
          break;
        case "d10": //地面整平
          if (this.DXZPState != null) {
            this.DXZPState.drawHandler && this.DXZPState.drawHandler.destroy();
            Viewer._container.style.cursor = "default";
            this.DXZPState.tooltip && this.DXZPState.tooltip.show(false);
            if (window.DXTerrainFlattening != null) {
              DXTerrainFlattening.remove();
            }
            window.DXTerrainFlattening = null;
            this.DXZPState = null;
          } else {
            this.DXZPState = sgworld.Creator.createSimpleGraphic(
              "polygon",
              {
                clampToGround: true,
              },
              function (entity) {
                let positions = entity.polygon.hierarchy.getValue().positions;
                sgworld.Creator.SimpleGraphic.remove(entity.id);
                window.DXTerrainFlattening =
                  sgworld.Creator.createTerrainModifier(
                    "地形压平",
                    positions,
                    10,
                    {}
                  );
              }
            );
          }
          var val = {
            name: "Trrain",
            id: res,
          };
          this.$bus.$emit("mapChangeBox", val);
          // if (this.DXZPState != null) {
          //   this.DXZPState.drawHandler && this.DXZPState.drawHandler.destroy();
          //   Viewer._container.style.cursor = "default";
          //   this.DXZPState.tooltip && this.DXZPState.tooltip.show(false);
          //   if (window.DXTerrainFlattening != null) {
          //     DXTerrainFlattening.remove();
          //   }
          //   window.DXTerrainFlattening = null;
          //   this.DXZPState = null;
          // } else {
          //   this.DXZPState = sgworld.Creator.createSimpleGraphic(
          //     "polygon",
          //     {
          //       clampToGround: true,
          //     },
          //     function (entity) {
          //       let positions = entity.polygon.hierarchy.getValue().positions;
          //       sgworld.Creator.SimpleGraphic.remove(entity.id);
          //       window.DXTerrainFlattening =
          //         sgworld.Creator.createTerrainModifier(
          //           "地形压平",
          //           positions,
          //           10,
          //           {}
          //         );
          //     }
          //   );
          // }

          break;

        case "d11": //地形开挖
          if (window.Excavation) {
            window.Excavation.drawHandler &&
              window.Excavation.drawHandler.destroy();
            Viewer._container.style.cursor = "default";
            window.Excavation.tooltip && window.Excavation.tooltip.show(false);
            window.Excavation.clear();
            window.Excavation = null;
          } else {
            window.Excavation = sgworld.Analysis.TerrainExcavation(
              10,
              {},
              function () { }
            );
          }
          this.$refs &&
            this.$refs.terrainDig &&
            this.$refs.terrainDig.open("管道空间分析", null, {
              close: () => {

              },
            });
          // if (window.Excavation) {
          //   window.Excavation.drawHandler &&
          //     window.Excavation.drawHandler.destroy();
          //   Viewer._container.style.cursor = "default";
          //   window.Excavation.tooltip && window.Excavation.tooltip.show(false);
          //   window.Excavation.clear();
          //   window.Excavation = null;
          // } else {
          //   window.Excavation = sgworld.Analysis.TerrainExcavation(
          //     10,
          //     {},
          //     function () { }
          //   );
          // }
          break;

        case "d12": //通视分析
@@ -1427,7 +1462,7 @@
        pointSelect: true,
        spood: 20,
        GroupID: 0,
        url: "/SmartEarthSDK/Workers/image/waterNormals.jpg",
        url: "/SmartEarthSDK/Workers/image/33.gif",
      };
      window.AnalysisFlood = sgworld.Command.execute(
        2,
@@ -1470,7 +1505,7 @@
      );
    },
    setWander(res) {
      debugger;
      ;
      switch (res) {

        case "c1":
@@ -1644,6 +1679,17 @@
      // this.$refs.tree.setCheckedKeys(checkKey);
      this.$store.state.checkedKeys = checkKey
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    setAddLayers(res) {
      if (res.serveType == "WMS") {
        var resource = geoServerURl;
@@ -1722,7 +1768,7 @@
        });
        window.map.addLayer(vectorLayer);
      } else if (res.serveType == "Tileset") {
        debugger

        var tileset = Viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            name: res.cnName,
@@ -1772,6 +1818,7 @@
.menu_Box {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
  overflow-y: auto;