管道基础大数据平台系统开发-【前端】-新系統界面
添加地形切换效果,底图切换功能,在线制图,服务发布页面优化,转孔柱状图更新
已添加2个文件
已修改9个文件
215 ■■■■ 文件已修改
src/api/api.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/synthesis/地形.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/synthesis/底图.png 补丁 | 查看 | 原始文档 | blame | 历史
src/components/MapView/mapSpacePop.vue 43 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/mapol.vue 24 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/mapsdk.vue 103 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Synthesis/LeftMenu.vue 17 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Tools/AddOnlineMap.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Tools/LayerTree.vue 14 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/datamanage/uploadmanage.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exportMap/index.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/api.js
@@ -1103,7 +1103,7 @@
}
//数据发布 => æ•°æ®æ’å…¥
export function publish_insert(params) {
  return request.post('/publish/insert', params);
  return request.post('/publish/insertForPub', params);
}
src/assets/img/synthesis/µØÐÎ.png
src/assets/img/synthesis/µ×ͼ.png
src/components/MapView/mapSpacePop.vue
@@ -613,27 +613,38 @@
            }
          }
        }
        // var outlineList = [
        //   'rgba(141,135,114,1)',
        //   'rgba(248,235,179,1)',
        //   'rgba(185,183,151,1)',
        //   'rgba(224,222,94,1)',
        //   'rgba(250,190,153,1)',
        //   'rgba(197,222,130,1)',
        //   'rgba(208,228,177,1)',
        // ]
        var outlineList = [
          'rgba(141,135,114,1)',
          'rgba(248,235,179,1)',
          'rgba(185,183,151,1)',
          'rgba(224,222,94,1)',
          'rgba(250,190,153,1)',
          'rgba(197,222,130,1)',
          'rgba(208,228,177,1)',
          { 'name': '粉质黏土', 'color': 'rgba(139,106,77,1)' },
          { 'name': '淤泥质粉土', 'color': 'rgba(141,85,69,1)' },
          { 'name': '圆砾', 'color': 'rgba(102,166,184,1)' },
          { 'name': '卵石', 'color': 'rgba(54,83,173,1)' },
          { 'name': '泥岩', 'color': 'rgba(47,30,13,1)' },
          { 'name': '细砂', 'color': 'rgba(93,88,15,1)' },
          { 'name': '中砂', 'color': 'rgba(164,140,21,1)' }
        ]
        var num = res.elev;
        var height = 0;
        for (var i = 0; i < val.length; i++) {
          var fill, line;
          if (i >= outlineList.length) {
            var len = outlineList.length - 1;
            fill = outlineList[len];
            line = outlineList[len];
          } else {
            fill = outlineList[i];
            line = outlineList[i];
          }
          var line;
          var geoname = val[i].geoname;
          var col = outlineList.filter((res) => {
            if (res.name == geoname) {
              return res
            }
          })
          line = col[0].color
          var height = num - val[i].botdepth
          var layer = Viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
src/components/mapol.vue
@@ -4,11 +4,11 @@
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
        <div
          title="底图切换"
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          class="mapBaseMap"
        ></div>
      </div>
@@ -17,6 +17,7 @@
        class="changeMapType"
      >
        <div
          title="2/3维切换"
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
@@ -244,8 +245,8 @@
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  // box-shadow: 3px 3px 6px #666;
  // border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
@@ -263,9 +264,9 @@
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
.active {
  width: 100%;
  height: 100%;
@@ -341,7 +342,14 @@
.sindagis-map-compass .right:hover {
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}
.mapBaseMap {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/底图.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
  position: absolute;
  bottom: 1%;
src/components/mapsdk.vue
@@ -299,20 +299,32 @@
      </div>
      <div style="display: flex">
        <div
          @click="changeMenulayer"
          class="center CenDiv"
          :class="{ center1: centerFlag }"
          class="changeTerrain"
          @click="changeTerrainLayer"
        >
          <div
            title="地形切换"
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
            class="mapTerrain"
          ></div>
        </div>
        <div
          @click="changeMenulayer"
          class="center CenDiv"
        >
          <div
            title="底图切换"
            id="cenBg"
            class="mapBaseMap"
          ></div>
        </div>
        <div
          @click="changeMapType"
          class="changeMapType"
        >
          <div
            title="2/3维切换"
            id="cenBg"
            :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
          ></div>
@@ -700,7 +712,8 @@
      attributeList: [],
      valueZ: 0,
      valueX: 0,
      valueY: 0
      valueY: 0,
      terrainflag: false,
    };
  },
  mounted() {
@@ -826,14 +839,47 @@
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true,
      };
      sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
      elevationTool.setContourColor("#F1D487");
    },
    //dem切换
    changeTerrainLayer() {
      if (this.terrainflag) {
        Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
        var option = {
          url: window.sceneConfig.SGUrl,
          layerName: window.sceneConfig.mptName,
          requestVertexNormals: true,
        };
        window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, "");
        Viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
        });
      } else {
        window.terrainLayer.deleteObject();
        window.terrainLayer = null;
        window.terrainLayer = new Cesium.CesiumTerrainProvider({
          url: LFData + '/3d/terrain/dem20230321'
        });
        Viewer.terrainProvider = window.terrainLayer
        Viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(113.229279, 31.215949, 1000),
          orientation: {
            heading: 6.08434611923462,
            pitch: Cesium.Math.toRadians(-45.0),
            roll: 0.0
          }
        });
      }
      this.terrainflag = !this.terrainflag
    },
    changeMenulayer() {
      this.$bus.$emit("setChangeBaseMapLayer", true)
      // this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("地下模式", null,);
@@ -1717,15 +1763,15 @@
.CenDiv {
  position: absolute;
  bottom: 1%;
  left: 1%;
  left: calc(1% + 75px);
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  // box-shadow: 3px 3px 6px #666;
  // border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
@@ -1743,9 +1789,9 @@
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
.active {
  width: 100%;
  height: 100%;
@@ -1763,10 +1809,18 @@
  border-radius: 5px;
}
.mapBaseMap {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/底图.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
  position: absolute;
  bottom: 1%;
  left: calc(1% + 75px);
  left: calc(1% + 150px);
  height: 40px;
  width: 60px;
  z-index: 101;
@@ -1779,6 +1833,21 @@
  cursor: pointer;
}
.changeTerrain {
  position: absolute;
  bottom: 1%;
  left: 1%;
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.mapTypeTwo {
  width: 100%;
  height: 100%;
@@ -1787,6 +1856,14 @@
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTerrain {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/地形.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree {
  width: 100%;
  height: 100%;
src/views/Synthesis/LeftMenu.vue
@@ -2221,23 +2221,24 @@
      });
      var value = std.filter((str) => {
        if (str.url != null && str.type == 2 && str.isShow == 1) {
          return str;
        }
      })
      this.setAddLayers(value);
      var res = this.setTreeData(val);
      //存储选中图层
      // sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
      for (var i in res) {
        res[i].children = res[i].children.filter((val) => {
          if (val.children != null) {
            return val;
          }
        });
      }
      // for (var i in res) {
      //   res[i].children = res[i].children.filter((val) => {
      //     if (val.children != null) {
      //       return val;
      //     }
      //   });
      // }
      this.$store.state.treeData = res;
src/views/Tools/AddOnlineMap.vue
@@ -184,7 +184,7 @@
      }, {
        name: '本地服务',
        sourceType: 'localmap',
        maximumLevel: 18,
        maximumLevel: 22,
        id: 3,
        isShow: true,
        list: [
src/views/Tools/LayerTree.vue
@@ -709,13 +709,13 @@
      sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));
      var res = this.setTreeData(val);
      for (var i in res) {
        res[i].children = res[i].children.filter((val) => {
          if (val.children != null) {
            return val;
          }
        });
      }
      // for (var i in res) {
      //   res[i].children = res[i].children.filter((val) => {
      //     if (val.children != null) {
      //       return val;
      //     }
      //   });
      // }
      this.treeData = res;
      this.$refs.tree.setCheckedKeys(checkKey);
    },
src/views/datamanage/uploadmanage.vue
@@ -429,7 +429,7 @@
            <el-button
              size="small"
              type="info"
              @click="setsubmitLayerSubmit()"
              @click="setinsertLayerCancel()"
            >{{$t('common.cancel')}}</el-button>
          </el-form-item>
        </el-form>
@@ -536,6 +536,10 @@
    setloadDialogVisible() {
      this.loadDialogVisible = false
    },
    setinsertLayerCancel() {
      this.insertDialogVisible = false;
      this.insertLayer = { name: '', number: null, min: 4, max: 8 };
    },
    //发布提交
    async setinsertLayerSubmit() {
      var min = this.insertLayer.min;
src/views/exportMap/index.vue
@@ -318,8 +318,8 @@
        { label: "A2", value: "A2" },
        { label: "A3", value: "A3" },
        { label: "A4", value: "A4" },
        { label: "A5", value: "A5" },
        { label: "A6", value: "A6" },
        // { label: "A5", value: "A5" },
        // { label: "A6", value: "A6" },
      ],
      value: "A4",
      treeData: [],