移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -33,6 +33,7 @@
        </div>
      </div>
    </div>
    
    <div class="areaType">
      <div class="title ZTtitle">
        专题应用
@@ -67,6 +68,7 @@
            funcValue.name
          }}</span>
        </div>
        <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
      </div>
      <!-- <div class="container">
        <div
@@ -151,7 +153,15 @@
          src: require("@/assets/img/layer/yxdt.png"),
        },
      ],
      sMapModelList: [],
      sMapModelList: [
        {
          id: "swmx",
          name: "三维模型",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/swmx.png"),
        },
      ],
      areaTypeList: [
        {
          id: "规划范围",
@@ -208,7 +218,7 @@
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 1,
      curEMapModelIndex: 0,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
@@ -241,32 +251,32 @@
      window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max;
      window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
    },
    handleMapClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curMapModelIndex == index) {
        clearLayerByTypeId(result.id);
        this.curMapModelIndex = -1;
      } else {
        this.curMapModelIndex = index;
        if (result.type == "er") {
          clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        } else {
          clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        }
        // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
      }
    },
    // handleMapClick(result, index) {
    //   const val = layers.filter((res) => {
    //     if (res.name == result.name) {
    //       return res;
    //     }
    //   });
    //   const children = val[0].children;
    //   if (this.curMapModelIndex == index) {
    //     clearLayerByTypeId(result.id);
    //     this.curMapModelIndex = -1;
    //   } else {
    //     this.curMapModelIndex = index;
    //     if (result.type == "er") {
    //       clearLayerByTypeIdArr(["ewdt", "yxdt"]);
    //     } else {
    //       clearLayerByTypeIdArr(["3Dcs", "swmx"]);
    //     }
    //     // clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
    //     _GLOBAL.layers[result.id] = [];
    //     children.forEach((item) => {
    //       let itemLayer = loadLayer(item);
    //       _GLOBAL.layers[result.id].push(itemLayer);
    //       console.log(_GLOBAL.layers[result.id]);
    //     });
    //   }
    // },
    // 二维底图选择
    handleEMapClick(result, index) {
      if (this.curEMapModelIndex == index) return;
@@ -275,11 +285,11 @@
      switch (result.name) {
        case "二维地图":
          loadGeoMap();
          loadBaseMap();
          addAnnotationLayer();
          // loadBaseMap();
          // addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          window.mapapi.getView().setZoom(14);
          // window.mapapi.getView().setZoom(14);
          break;
        case "影像地图":
          addImageLayer();
@@ -289,17 +299,23 @@
          break;
      }
    },
    // 跳转到三维
    show3d() {
      store.setLayerPanelShow(false);
      this.$router.push("/viewer3D");
    },
    // 三维模型选择
    handleSMapClick(result, index) {
      // 设置相机
      if (result.name == "3D城市") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(45000, true);
      } else if (result.name == "三维模型") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 2;
        this.changeLayerView(80000, true);
      }
      // // 设置相机
      // if (result.name == "3D城市") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(45000, true);
      // } else if (result.name == "三维模型") {
      //   window.Viewer.scene.globe.maximumScreenSpaceError = 2;
      //   this.changeLayerView(80000, true);
      // }
      // 切换图层
      this.show3d();
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
@@ -310,16 +326,16 @@
        // clearLayerByTypeId(result.id);
        // this.curSMapModelIndex = -1;
      } else {
        this.curEMapModelIndex = -1;
        this.curSMapModelIndex = index;
        clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          console.log(_GLOBAL.layers[result.id]);
        });
        // this.curEMapModelIndex = -1;
        // this.curSMapModelIndex = index;
        // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        // _GLOBAL.layers[result.id] = [];
        // children.forEach((item) => {
        //   let itemLayer = loadLayer(item);
        //   _GLOBAL.layers[result.id].push(itemLayer);
        //   console.log(_GLOBAL.layers[result.id]);
        // });
      }
    },
    // 专题图选择
@@ -416,6 +432,7 @@
          window.mapapi.removeLayer(window.tdglLine);
          window.tdglLine = null;
        }

        if (window.tdgllayer) {
          store.setSliderShow(false);
          window.mapapi.removeLayer(window.tdgllayer);
@@ -442,7 +459,7 @@
                url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  VERSION: "1.1.1",
                  SRS: "EPSG:4326",
                  SRS: "EPSG:3857",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: "",
@@ -483,6 +500,7 @@
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            store.setSliderShow(false);
            window.mapapi.removeLayer(window.tdgllayer);
            store.setHistoryShow(true);
            break;
        }
@@ -551,7 +569,7 @@
  align-items: center;
  /* padding: 0.1rem; */
  background: #ffffff;
  z-index: 1000;
  /* z-index: 1000; */
  /* padding-left: 0.25rem; */
  border-radius: 15px 15px 0px 0px;
}
@@ -575,8 +593,7 @@
  line-height: 15px;
  margin-bottom: 18px;
}
.container {
  width: 100%;
.mapMode .container {
  display: flex;
  align-items: center;
  text-align: center;
@@ -588,27 +605,27 @@
  font-family: "微软雅黑";
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}
.mapMode .layerItem {
  width: 91px;
  width: 0.8rem;
  margin-right: 24px;
}
.mapMode img {
  display: block;
  width: 91px;
  width: 100%;
  border-radius: 11px;
  border: 1px dashed #127dff;
  /* height: 40px; */
  margin-bottom: 11px;
}
span {
  font-family: "微软雅黑";
  font-weight: 500;
  font-size: 15px;
  color: #212121;
  font-size: 0.12rem;
  color: #6e6969;
  line-height: 12px;
}
.active {
.mapMode .active,
.areaType .active {
  color: #127dff;
  border: 2px solid #127dff;
  border-radius: 10px;
@@ -621,17 +638,31 @@
  width: 100%;
  margin-top: 30px;
}

.areaType .ZTtitle {
  margin-left: 28px;
  margin-bottom: 3px;
}
.areaType .container{
  padding: 0 18px 22px;
  justify-content: space-between;
.areaType .container {
  margin-top: 18px;
  padding: 0 4%;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.areaType .layerItem {
  margin-bottom: 15px;
}

.areaType img {
  margin: 0 auto;
  /* background-color: green; */
  display: block;
  width: 84px;
  width: 0.5rem;
  border-radius: 11px;
  box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
  margin-bottom: 11px;
}

.more {