地形压平添加参数；坡度分析 添加图例，数据上传，元数据管理，资料馆添加元数据查询，综合展示图片更换

Surpriseplus

2023-02-27 4b8943bd66fc721f8381b74eff259a2f7ffef513

 src/components/mapsdk.vue

@@ -1,44 +1,82 @@
<template>
  <div class="mapBox">
    <div id="mapdiv">
      <div class="menu_Top box_divm" v-if="$store.state.mapMenuBoolean">
      <div
        class="menu_Top box_divm"
        v-if="$store.state.mapMenuBoolean"
      >
        <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
        <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
      </div>

      <div class="bufferBox" v-if="showBufferBoxDialog">
      <div
        class="bufferBox"
        v-if="showBufferBoxDialog"
      >
        <el-card class="box-card box_divm">
          <div slot="header" class="clearfix">
          <div
            slot="header"
            class="clearfix"
          >
            <span>缓冲区分析</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(1)"></i>
              <i
                class="el-icon-close"
                @click="closeBufferBox(1)"
              ></i>
            </div>
          </div>
          <div class="box-body">
            <el-form ref="form" :model="bufFrom" label-width="100px">
            <el-form
              ref="form"
              :model="bufFrom"
              label-width="100px"
            >
              <el-form-item label="缓冲半径(米):">
                <el-input v-model="bufFrom.val"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="addBuffer(1)" type="info">点</el-button>
                <el-button @click="addBuffer(2)" type="info">线</el-button>
                <el-button @click="addBuffer(3)" type="info">面</el-button>
                <el-button @click="clearBuffer" type="info">清除</el-button>
                <el-button
                  @click="addBuffer(1)"
                  type="info"
                >点</el-button>
                <el-button
                  @click="addBuffer(2)"
                  type="info"
                >线</el-button>
                <el-button
                  @click="addBuffer(3)"
                  type="info"
                >面</el-button>
                <el-button
                  @click="clearBuffer"
                  type="info"
                >清除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
      <div
        class="coordLocalBox"
        v-if="showCoordLocalBoxDialog"
      >
        <el-card class="box-card">
          <div slot="header">
            <span>坐标定位</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(2)"></i>
              <i
                class="el-icon-close"
                @click="closeBufferBox(2)"
              ></i>
            </div>
          </div>
          <div class="box-body">
            <el-form ref="form" :model="coordFrom" label-width="50px">
            <el-form
              ref="form"
              :model="coordFrom"
              label-width="50px"
            >
              <el-form-item label="经度:">
                <el-input v-model="coordFrom.lon"></el-input>
              </el-form-item>
@@ -49,50 +87,132 @@
                <el-input v-model="coordFrom.height"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="setCoordLocal" type="info">定位</el-button>
                <el-button
                  @click="setCoordLocal"
                  type="info"
                >定位</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
      <div
        class="terrainLevelBox"
        v-if="showTerrainLevelDialog"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>地名定位</span>
          <div slot="header">
            <span>地形平整</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(3)"></i>
              <i
                class="el-icon-close"
                @click="closeBufferBox(5)"
              ></i>
            </div>
          </div>
          <div class="box-body">
            <el-form :model="comprehensive" :inline="true" label-width="50px">
            <el-form
              ref="form"
              :model="terrainFrom"
              label-width="100px"
            >
              <el-form-item label="平整高度:">
                <el-input v-model="terrainFrom.height"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  @click="drawTerrainLevel"
                  type="parmary"
                >绘制</el-button>
                <el-button
                  @click="clearTerrainLevel"
                  type="info"
                >清除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
      <div
        class="toponymicLocalBox"
        v-if="showToponymicLocalBoxDialog"
      >
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>地名定位</span>
            <div style="float: right; cursor: pointer">
              <i
                class="el-icon-close"
                @click="closeBufferBox(3)"
              ></i>
            </div>
          </div>
          <div class="box-body">
            <el-form
              :model="comprehensive"
              :inline="true"
            >
              <el-form-item label="地名:">
                <el-input
                  style="width: 200px"
                  style="width: 160px"
                  v-model="comprehensive.name"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="setQueryTable" type="info">查询</el-button>
                <el-button
                  @click="setQueryTable"
                  type="info"
                >查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" height="200px" style="width: 100%">
            <el-table
              :data="tableData"
              height="200px"
              style="width: 100%"
            >
              <el-table-column
                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>
                  >{{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
@@ -100,8 +220,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>
@@ -109,12 +230,21 @@
          </div>
        </el-card>
      </div>
      <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
      <div
        class="pathAnalysisBox"
        v-if="showPathAnalysisBoxDialog"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <div
            slot="header"
            class="clearfix"
          >
            <span>路径分析</span>
            <div style="float: right; cursor: pointer">
              <i class="el-icon-close" @click="closeBufferBox(4)"></i>
              <i
                class="el-icon-close"
                @click="closeBufferBox(4)"
              ></i>
            </div>
          </div>
          <div class="box-body">
@@ -124,7 +254,10 @@
              :rules="rules"
              label-width="55px"
            >
              <el-form-item label="起点:" prop="lon">
              <el-form-item
                label="起点:"
                prop="lon"
              >
                <el-input
                  style="width: 250px"
                  v-model="pathFrom.lon"
@@ -134,10 +267,12 @@
                  :underline="false"
                  @click="showMouseLeftClick(1)"
                  style="margin-left: 10px"
                  ><i style="color: white" class="el-icon-plus"></i
                ></el-link>
                ><i class="el-icon-plus"></i></el-link>
              </el-form-item>
              <el-form-item label="终点:" prop="lat">
              <el-form-item
                label="终点:"
                prop="lat"
              >
                <el-input
                  style="width: 250px"
                  v-model="pathFrom.lat"
@@ -147,28 +282,73 @@
                  :underline="false"
                  @click="showMouseLeftClick(2)"
                  style="margin-left: 10px"
                  ><i style="color: white" class="el-icon-plus"></i
                ></el-link>
                ><i class="el-icon-plus"></i></el-link>
              </el-form-item>
              <el-form-item>
                <el-button @click="showMouseLeftClick(3)" type="info"
                  >查询</el-button
                >
                <el-button
                  @click="showMouseLeftClick(3)"
                  type="info"
                >查询</el-button>
              </el-form-item>
            </el-form>
          </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
        class="lengend"
        v-show="showLengendDialog"
      >
        <el-card class="box-card">
          <!-- <div
            class="lengend_color"
            style="height:205px"
          >

          </div> -->
          <div class="lengendBox">
            <div class="lengendSpan">
              <div style="left:10px">0°</div>
              <div style="align-self: flex-end;left:10px; position: absolute;
          bottom: 8%; ">70°</div>
            </div>
            <div
              class="lengend_color"
              style="height:205px; width:30px "
            ></div>
          </div>
        </el-card>
      </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>
@@ -270,12 +450,16 @@
      isMenuLayer: true,
      selFrom: {},
      selectTree: null,

      showTerrainLevelDialog: false,
      menuList: [],
      defaultProps: {
        children: "children",
        label: "label",
      }, //树绑定对象
      show2DMap: false,
      terrainFrom: {
        height: '10'
      }, showLengendDialog: false,
    };
  },
  mounted() {
@@ -283,8 +467,33 @@
    this.$bus.$on("mapChangeBox", (res) => {
      this.showChangeBox(res);
    });
    this.$bus.$on('changemapType', (e) => {
      this.show2DMap = e;
    });
  },
  methods: {
    drawTerrainLevel() {
      this.clearTerrainLevel()
      var deep = parseFloat(this.terrainFrom.height)
      sgworld.Creator.createSimpleGraphic(
        'polygon',
        {
          clampToGround: true,
        },
        function (entity) {

          var positions = entity.polygon.hierarchy.getValue().positions;
          sgworld.Creator.SimpleGraphic.remove(entity.id);

          window.TerrainFlattening = sgworld.Creator.createTerrainModifier("地形压平", positions, deep, {});
        }
      );
    },
    clearTerrainLevel() {
      if (window.TerrainFlattening) {
        window.TerrainFlattening && window.TerrainFlattening.remove();
      }
    },
    init3DMap() {
      var webKey = "94a34772eb88317fcbf8428e10448561";

@@ -420,8 +629,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") {
@@ -430,8 +641,26 @@
            this.showPathAnalysisBoxDialog = true;
          } else {
            this.showPathAnalysisBoxDialog = false;
            this.closeBufferBox(4);
          }
        }
      } else if (res.name == "Trrain") {
        switch (res.id) {
          case "d10":
            this.showTerrainLevelDialog = !this.showTerrainLevelDialog;
            this.clearTerrainLevel();
            break;
        }

      } else if (res.name == "Lengend") {
        switch (res.id) {
          case "d2":

            this.showLengendDialog = res.vshow;

            break;
        }

      }
    },
    handleSizeChange(val) {
@@ -516,7 +745,10 @@
        case 4:
          this.showPathAnalysisBoxDialog = false;
          this.clearPathAll(3);

          break;
        case 5:
          this.showTerrainLevelDialog = false;
          this.clearTerrainLevel()
          break;
      }
    },
@@ -525,10 +757,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() {
@@ -772,6 +1029,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>
@@ -788,11 +1059,12 @@
    overflow: hidden;
    position: relative;
    .toponymicLocalBox {
      width: 750px;
      width: 350px;
      //width: 750px;
      height: 450x;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 8%;
      bottom: 1%;
    }
    .bufferBox {
@@ -800,7 +1072,7 @@
      height: 230px;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 6%;
      bottom: 1%;
    }
    .coordLocalBox {
@@ -808,15 +1080,23 @@
      height: 370px;
      z-index: 40;
      position: absolute;
      right: 1%;
      right: 8%;
      bottom: 1%;
    }
    .terrainLevelBox {
      width: 350px;
      height: 370px;
      z-index: 40;
      position: absolute;
      right: 8%;
      bottom: -11%;
    }
    .pathAnalysisBox {
      width: 412px;

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

@@ -843,6 +1123,35 @@
      bottom: 5%;
      position: absolute;
      z-index: 40;
    }
    .lengend {
      width: 80px;

      z-index: 40;
      position: absolute;
      right: 8%;
      bottom: 1%;
      .lengendBox {
        width: 100%;
        height: 100%;
        display: flex;
        .lengendSpan {
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
        }
        .lengend_color {
          background-image: linear-gradient(
            #0055ff,
            #2448da,
            #483cb6,
            #6d3091,
            #91246d,
            #b61848,
            #da0c24
          );
        }
      }
    }
  }
}
@@ -942,6 +1251,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;

  cursor: pointer;
}
.mapTypeTwo {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/3D.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
  background-repeat: no-repeat;
  background-size: contain;
}

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