管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-09-21 c2a6c53657baaf0830cd881e1a23a15af23ac6fa
src/components/preview_map.vue
@@ -43,6 +43,10 @@
        <el-form-item>
          <el-button
            size="small"
            @click="dialogLayerVisible = true"
          >图层</el-button>
          <el-button
            size="small"
            v-if="$store.state.previewLayer.type == 'mpt'"
            @click="setcropping"
          >裁剪</el-button>
@@ -56,11 +60,13 @@
            v-if="$store.state.previewLayer.type != 'mpt'"
            @click="showTileset"
          >显隐</el-button>
          <el-button
            size="small"
            v-if="$store.state.previewLayer.type != 'mpt'"
            @click="setUndergroundMode"
          >地下</el-button>
          <br />
          <el-button
            v-if="$store.state.previewLayer.type != '3dml' &&
            $store.state.previewLayer.type != 'cpt' &&
@@ -373,6 +379,40 @@
      </div>
    </el-dialog>
    <div
      v-show="dialogLayerVisible"
      class="levelLayer box_divm"
    >
      <div class="levelTitle">
        <div>
          图层列表
        </div>
        <div @click="dialogLayerVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="layerContent">
        <div
          v-for="(item,index) in layerTree"
          class="contLayer"
        >
          <div> <el-checkbox
              v-model="item.checked"
              @change="setLayerTreeChange(item)"
            >{{item.cnName}}</el-checkbox></div>
          <div>
            <el-button
              icon="el-icon-map-location"
              size="mini"
              @click="setLayerTreeLocation(item)"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <div
      v-show="modelKeyFlag"
      class="modelLayer box_divm"
@@ -417,6 +457,7 @@
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;附件
      </div>
    </el-card>
  </div>
</template>
 
@@ -454,6 +495,7 @@
      },
      childOption: [],
      dialogVisible: false,
      dialogLayerVisible: false,
      isShowModel: false,
      tableData: [],
      formInline: {
@@ -525,13 +567,87 @@
      menuVisible: false,
      rightClickMenuStyle: {}, // 右键菜单样式
      serveType: true,
      layerData: "lf.sys_style"
      layerData: "lf.sys_style",
      layerTree: null
    }
  },
  mounted() {
    this.init3DMap();
    this.getLayers();
  },
  methods: {
    async getLayers() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }
      var layer = data.result.filter(res => {
        if (res.type == 2) {
          if (res.serveType == 'WMTS' || res.serveType == 'TMS') {
            res.checked = false;
            return res
          }
        }
      })
      this.layerTree = layer
    },
    setLayerTreeChange(res) {
      if (res.checked) {
        this.setAddTreeLayers(res)
      } else {
        this.setRemoveTreeLayers(res)
      }
    },
    async setLayerTreeLocation(res) {
      if (res.pubid) {
        let data = await comprehensive_selectPubById({ id: res.pubid });
        if (data.result && data.result.geom) {
          let wkt = this.$wkt.parse(data.result.geom);
          let height = this.getHeight(wkt.coordinates[2]);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], sceneConfig.extureHeight), // 2000
          });
        }
      }
    },
    async setAddTreeLayers(res) {
      var url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : res.url;
      var layer = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: url,
          maximumLevel: 18,
        })
      );
      layer.name = res.cnName + '_' + res.id
    },
    setRemoveTreeLayers(res) {
      var name = res.cnName + '_' + res.id;
      var layers = Viewer.imageryLayers._layers;
      for (var i in layers) {
        if (layers[i].name == name) {
          Viewer.imageryLayers.remove(layers[i])
        }
      }
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据
        if (branchArr.length > 0) {
          branchArr.sort(function (a, b) {
            return a.orderNum - b.orderNum
          })
        }
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值
        // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2;
        // 由此循环多次后,就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    // 鼠标右击事件
    rightClick(event, object, node, element) {
      if (object.type == 1 || node.data.children != null) return;
@@ -1154,6 +1270,7 @@
      if (this.$store.state.previewLayer) {
        var res = this.$store.state.previewLayer;
        var type = res.type;
        console.log(type)
        res.ulr = res.url.replace("{host}", iisHost);
        if (type == 'DEM') {
          window.terrainLayer.deleteObject();
@@ -1253,8 +1370,8 @@
    },
    async resave() {
      if (this.$store.state.previewLayer.type != "mpt") {
      var type = this.$store.state.previewLayer.type;
      if (type && type != "mpt" && type != "mpt") {
        if (!this.modelForm.modelid) {
          return this.$message('未选择模型主键ID');
        }
@@ -1280,7 +1397,7 @@
      this.reload();
    },
    reload() {
      debugger
      sgworld.Analysis.UndergroundMode(this.app.under, this.modelForm.alpha)
      var json = JSON.stringify(this.modelForm);
      var modelScale = this.modelForm.scale
@@ -1577,7 +1694,8 @@
      if (level > 0 && level < 23) {
        return this.levelArray[level]
      }
      return this.levelArray[this.levelArray.length - 1]
      var res = 7
      return this.levelArray[res]
    },
  },
@@ -1606,6 +1724,31 @@
    }
  }
  .levelLayer {
    position: absolute;
    z-index: 40;
    padding: 10px 20px;
    max-height: 450px;
    overflow: auto;
    border: 1px solid #409eff;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0%);
    .levelTitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-family: Source Han Sans CN;
    }
    .contLayer {
      margin: 10px 0px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      display: flex;
      justify-content: space-between;
    }
  }
  .pdfClass {
    height: 70vh;
    width: 100%;