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

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>
@@ -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%;