添加地形切换效果，底图切换功能，在线制图，服务发布页面优化，转孔柱状图更新

Surpriseplus

2023-03-21 7c60e0fe106b053bfb7f9bc889677f2a5ff35608

 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>
@@ -360,7 +372,7 @@
            <span>属性信息</span>
            <div style="float: right; cursor: pointer">
              <el-link
                v-if="$store.state.propertiesName.tabDesc == '勘察工点'"
                v-if="$store.state.propertiesName.enName == 's_surveyworksite'"
                type="primary"
                :underline="false"
                @click="getPointInfo"
@@ -398,6 +410,7 @@
      </div>
      <!--勘察信息弹窗-->
      <div
        v-drag
        class="attributionPop"
        v-if="showAttribute"
      >
@@ -699,7 +712,8 @@
      attributeList: [],
      valueZ: 0,
      valueX: 0,
      valueY: 0
      valueY: 0,
      terrainflag: false,
    };
  },
  mounted() {
@@ -825,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,);
@@ -1340,6 +1387,7 @@
        tabName: tabName,
      };
      const res = await dataLib_selectFiles(obj);

      if (res.code != 200) {
        this.$message.error('附件查询失败');
        return
@@ -1414,12 +1462,13 @@
    },
    //勘察信息表
    getPointInfo() {
      this.showAttribute = !this.showAttribute;

      if (this.showAttribute) {
        let attrbuteOption = workSite;
        var name = attrbuteOption[0].table.replaceAll("_", "");
        this.getAttributeDomFiled(name);

      }
      let attrbuteOption = workSite;
      var name = attrbuteOption[0].table.replaceAll("_", "");
      this.getAttributeDomFiled(name);
    },
    //获取每个表字段名称及阈值
    async getAttributeDomFiled(res) {
@@ -1467,11 +1516,18 @@
        title: title,
        filter: "workname = " + "'" + title + "'",
      }

      const data = await dataQuery_selectByPage(parmams);
      if (data.code != 200) {
        this.$message.error("调用列表失败,请联系工作人员!");
        return;
      }

      if (!data.result.length) {
        this.$message.error("未查询到勘探信息数据");
        return
      }
      this.showAttribute = !this.showAttribute;
      var res_val = attributeFild;
      for (var i in data.result) {
        let val_Data = data.result[i];
@@ -1707,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;
}
@@ -1733,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%;
@@ -1753,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;
@@ -1769,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%;
@@ -1777,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%;