综合展示样式修改

584911253@qq.com

2023-02-26 2364c314288f26a4d29b7d22e9baa1e45f43aaeb

 src/components/mapsdk.vue

@@ -117,11 +117,10 @@
            <el-form
              :model="comprehensive"
              :inline="true"
              label-width="50px"
            >
              <el-form-item label="地名:">
                <el-input
                  style="width: 200px"
                  style="width: 160px"
                  v-model="comprehensive.name"
                ></el-input>
              </el-form-item>
@@ -141,27 +140,34 @@
                align="center"
                type="index"
                label="序号"
                width="70px"
              />
              <el-table-column
                prop="name"
                align="center"
                label="定位"
              >
              <el-table-column prop="name" align="center" label="地名">
                <template slot-scope="scope">
                  <el-button
                    @click="handleLocation(scope.$index, scope.row)"
                    size="small"
                    icon="el-icon-place"
                  ></el-button>
                      @click="handleLocation(scope.$index, scope.row)"
                      size="small"
                  >{{scope.row.name}}<i class="el-icon-place" style="padding-left: 5px"></i></el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="地名"
              >
              </el-table-column>
<!--              <el-table-column-->
<!--                prop="name"-->
<!--                align="center"-->
<!--                label="定位"-->
<!--              >-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button-->
<!--                    @click="handleLocation(scope.$index, scope.row)"-->
<!--                    size="small"-->
<!--                    icon="el-icon-place"-->
<!--                  ></el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="name"-->
<!--                align="center"-->
<!--                label="地名"-->
<!--              >-->
<!--              </el-table-column>-->
            </el-table>
            <div class="pagination_box">
              <el-pagination
@@ -169,8 +175,9 @@
                @current-change="handleCurrentChange"
                :current-page="listData.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :pager-count = "3"
                :page-size="listData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                layout="total, prev, pager, next"
                :total="count"
              >
              </el-pagination>
@@ -242,16 +249,31 @@
          </div>
        </el-card>
      </div>
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
      <div style="display: flex">
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
            @click="changeMenulayer"
            class="center CenDiv"
            :class="{ center1: centerFlag }"
        >
          <div
              id="cenBg"
              v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
        <div @click="changeMapType" class="changeMapType">
          <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
        </div>
      </div>
<!--      <div-->
<!--        @click="changeMenulayer"-->
<!--        class="center CenDiv"-->
<!--        :class="{ center1: centerFlag }"-->
<!--      >-->
<!--        <div-->
<!--          id="cenBg"-->
<!--          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
<!--        ></div>-->
<!--      </div>-->
    </div>
  </div>
</template>
@@ -359,12 +381,16 @@
        children: "children",
        label: "label",
      }, //树绑定对象
      show2DMap:false,
    };
  },
  mounted() {
    this.init3DMap();
    this.$bus.$on("mapChangeBox", (res) => {
      this.showChangeBox(res);
    });
    this.$bus.$on('changemapType', (e) => {
      this.show2DMap = e;
    });
  },
  methods: {
@@ -503,8 +529,10 @@
      } else if (res.name == "Coord") {
        if (res.id == "1") {
          this.showCoordLocalBoxDialog = true;
          this.showToponymicLocalBoxDialog = false;
        } else if (res.id == "2") {
          this.showToponymicLocalBoxDialog = true;
          this.showCoordLocalBoxDialog = false;
          this.getToponymicData();
        }
      } else if (res.name == "Analysis") {
@@ -609,10 +637,35 @@
      var lon = parseFloat(this.coordFrom.lon);
      var lat = parseFloat(this.coordFrom.lat);
      var height = parseFloat(this.coordFrom.height);
      var position = {
        X: lon,
        Y: lat,
        Altitude: 2000,
      };
      this.imagePoint = sgworld.Creator.CreateLabel(
          position,
          "",
          SmartEarthRootUrl + "Workers/image/mark.png",
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
          },
          0,
          "巡检点"
      );

      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
        destination: new Cesium.Cartesian3.fromDegrees(
            lon,
            lat,
            height
        ),
      });
      // sgworld.Navigate.jumpTo({
      //   //跳转视角
      //   destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
      // });
    },
    //缓冲区分析
    clearBuffer() {
@@ -856,6 +909,20 @@
        }
      }
    },
    //二维/三维地图切换
    changeMapType(){
      // debugger
      this.show2DMap = !this.show2DMap;
      //二维
      if (this.show2DMap){
        this.$bus.$emit("changemap", 2);
      }
      //三维
      else {
        this.$bus.$emit("changemap", 3);
      }
      this.$bus.$emit("changemapType", this.show2DMap);
    },
  },
};
</script>
@@ -872,11 +939,12 @@
    overflow: hidden;
    position: relative;
    .toponymicLocalBox {
      width: 750px;
      width: 350px;
      //width: 750px;
      height: 450x;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 6%;
      bottom: 1%;
    }
    .bufferBox {
@@ -884,7 +952,7 @@
      height: 230px;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 6%;
      bottom: 1%;
    }
    .coordLocalBox {
@@ -892,7 +960,7 @@
      height: 370px;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 6%;
      bottom: 1%;
    }
    .pathAnalysisBox {
@@ -900,7 +968,7 @@

      z-index: 40;
      position: absolute;
      right: 1%;
      right: 6%;
      bottom: 1%;
    }

@@ -1026,6 +1094,39 @@
  border-radius: 5px;
}

.changeMapType{
  position: absolute;
  bottom: 1%;
  left: calc(1% + 75px);
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 6px #666;
  //border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.mapTypeTwo{
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/3dmap.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree{
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/2dmap.png");
  background-repeat: no-repeat;
  background-size: contain;
}

// .menuSelect .el-input__inner {
//   background: rgba(255, 255, 255, 0.2) !important;
//   color: white !important;