移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/sideMenu/layerMenu/layerPanel.vue

@@ -1,7 +1,7 @@
<template>
  <div class="layerPanel">
    <div class="mapMode">
      <div class="title" style="margin-top: 0px">地图模式</div>
      <div class="title">地图模式</div>
      <div class="container">
        <div
          class="layerItem"
@@ -33,32 +33,9 @@
        </div>
      </div>
    </div>
    <!-- <div class="areaType" style="margin-top: 10px">
      <div class="title">
        专题图层
        <span class="more" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div
          class="layerItem"
          :key="value1.id"
          v-for="(value1, index1) in areaTypeList"
          @click.stop="handleAreaClick(value1, index1)"
        >
          <img
            :src="value1.src"
            :class="{ active: curAreaTypeIndex == index1 }"
          />
          <span :class="{ spanActive: curAreaTypeIndex == index1 }">{{
            value1.name
          }}</span>
        </div>
      </div>
    </div> -->
    <div class="areaType" style="margin-top: 10px">
      <div class="title">

    <div class="areaType">
      <div class="title ZTtitle">
        专题应用
        <!-- 不显示更多图层 -->
        <span class="more" v-show="false" @click.stop="showLayerTree"
@@ -77,9 +54,6 @@
            ZTValue.name
          }}</span>
        </div>
      </div>
      <div class="title2"></div>
      <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
@@ -94,7 +68,24 @@
            funcValue.name
          }}</span>
        </div>
        <!-- <div style="height: 0" class="layerItem" v-for="n in 3" :key="n"></div> -->
      </div>
      <!-- <div class="container">
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
            funcValue.name
          }}</span>
        </div>
      </div> -->
    </div>

    <!-- <div class="yjsxt">
@@ -133,7 +124,6 @@
import store from "@/utils/store.js";
import ZTTitem from "@/utils/ztt.js";
import { layers } from "../../../../static/json/layer.js";
import { set } from "ol/transform.js";
export default {
  name: "LayerPanel",
  data() {
@@ -155,13 +145,13 @@
        },
      ],
      sMapModelList: [
        {
          id: "3Dcs",
          name: "3D城市",
          active: false,
          type: "san",
          src: require("@/assets/img/layer/3Dcs.png"),
        },
        // {
        //   id: "3Dcs",
        //   name: "3D城市",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/3Dcs.png"),
        // },
        {
          id: "swmx",
          name: "三维模型",
@@ -251,7 +241,7 @@
      curFuncIndex: -1,
      curZTIndex: -1,
      state: store.thematicLayer,
      basicMapChecked: store.basicMapChecked.val,
      basicMapChecked: store.basicMapChecked,
      state1: store.tdglInfo,
    };
  },
@@ -305,10 +295,30 @@
    },
    // 二维底图选择
    handleEMapClick(result, index) {
      let p = sgworld.Navigate.getCameraInfo();
      let pitch;
      if (pitch !== -90) {
        pitch = -90;
        sgworld.Navigate.flyToPointsInterest({
          destination: new Cesium.Cartesian3.fromDegrees(
            p.location.lon,
            p.location.lat,
            p.location.height
          ),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            roll: Cesium.Math.toRadians(0),
          },
        });
      }

      // 设置相机
      if (result.name == "二维地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(25000, false);
      } else if (result.name == "影像地图") {
        window.Viewer.scene.globe.maximumScreenSpaceError = 4 / 3;
        this.changeLayerView(50000, false);
      }
      // 切换图层
@@ -339,8 +349,10 @@
    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);
      }
      // 切换图层
@@ -474,32 +486,6 @@
        //   // store.setThematicLayerItemId(result.id);
      }
    },
    //加载地块模型
    loadLayer() {
      window.tdglLayer = sgworld.Creator.createImageryProvider(
        layers[8].name,
        "tms",
        {
          id: layers[8].children[0].id,
          url: layers[8].children[0].urls,
          fileExtension: layers[8].children[0].img || "png",
          enablePickFeatures: false,
          level: layers[8].children[0].Level,
          minimumLevel: layers[8].children[0].minimumLevel,
          maximumLevel: layers[8].children[0].maximumLevel,
          tilingScheme:
            layers[8].children[0].tileType === "Geo"
              ? new Cesium.GeographicTilingScheme()
              : new Cesium.WebMercatorTilingScheme(),
          // alpha: layers[8].children[0].alpha,
          alpha: this.state1.alpha,
        },
        "0",
        layers[8].children[0].zIndex,
        true,
        ""
      );
    },
    // 第三行 专题功能 点击
    handleFuncClick(index) {
      if (this.curFuncIndex == index) {
@@ -514,31 +500,54 @@
        this.curFuncIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLayer) {
          store.setSliderShow(false);
          sgworld.Creator.DeleteObject(window.tdglLayer);
        }
      }
      // 隐藏底部图层面版
      store.setLayerPanelShow(false);
      // 隐藏右上角菜单面板
      store.setMenuListShow(false);
      // 隐藏底部漫游面板
      store.setRoamPanelShow(false);
      //显示滑动条
      store.setSliderShow(true);
      this.curFuncIndex = index;
      switch (index) {
        case 0:
          this.loadLayer();
          store.setTdglFlag(true);
          break;
        case 1:
          this.curFuncIndex = -1;
          store.setTdglFlag(false);
          if (window.tdglLayer) {
            sgworld.Creator.DeleteObject(window.tdglLayer);
          }
          store.setHistoryShow(true);
          break;
      } else {
        // 隐藏底部图层面版tdglLayer
        store.setLayerPanelShow(false);
        // 隐藏右上角菜单面板
        store.setMenuListShow(false);
        // 隐藏底部漫游面板
        store.setRoamPanelShow(false);
        this.curFuncIndex = index;
        switch (index) {
          case 0:
            store.setSliderShow(true);
            window.tdglLayer = sgworld.Creator.createImageryProvider(
              layers[8].name,
              "tms",
              {
                id: layers[8].children[0].id,
                url: layers[8].children[0].urls,
                fileExtension: layers[8].children[0].img || "png",
                enablePickFeatures: false,
                level: layers[8].children[0].Level,
                minimumLevel: layers[8].children[0].minimumLevel,
                maximumLevel: layers[8].children[0].maximumLevel,
                tilingScheme:
                  layers[8].children[0].tileType === "Geo"
                    ? new Cesium.GeographicTilingScheme()
                    : new Cesium.WebMercatorTilingScheme(),
                alpha: layers[8].children[0].alpha,
              },
              "0",
              layers[8].children[0].zIndex,
              true,
              ""
            );
            store.setTdglFlag(true);
            break;
          case 1:
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            if (window.tdglLayer) {
              store.setSliderShow(false);
              sgworld.Creator.DeleteObject(window.tdglLayer);
            }
            store.setHistoryShow(true);
            break;
        }
      }
    },
    showLayerTree() {
@@ -570,6 +579,7 @@
    "basicMapChecked.val": {
      handler: function (newVal, oldVal) {
        if (newVal == "三维模型") {
          debugger;
          this.handleSMapClick(
            {
              id: "swmx",
@@ -585,76 +595,130 @@
      immediate: true, //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
    "state1.alpha": {
      handler: function (newVal) {
        this.handleFuncClick(0);
      },
      deep: true,
    // "state1.alpha": {
    //   handler: function (newVal) {
    //     this.handleFuncClick(0);
    //   },
    //   deep: true,
    // },
  },
  computed: {
    alpha() {
      return store.tdglInfo.alpha;
    },
  },
};
</script>

<style scoped>
.layerPanel {
  width: 100%;
  /* height: 396px; */
  position: absolute;
  bottom: 0px;
  align-items: center;
  padding: 0.1rem;
  background: white;
  z-index: 1000;
  padding-left: 0.25rem;
  /* padding: 0.1rem; */
  background: #ffffff;
  /* z-index: 1000; */
  /* padding-left: 0.25rem; */
  border-radius: 15px 15px 0px 0px;
}
.mapMode {
  width: 100%;
  margin-top: 24px;
  padding-left: 28px;
}

@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("../../../../static/YouSheBiaoTiHei.ttf");
}
.title {
  height: 25px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 700;
  color: #181818;
  line-height: 25px;
  margin: 10px 0px 10px 0;
  width: 72px;
  height: 14px;
  font-family: "YouSheBiaoTiHei";
  font-weight: 400;
  font-size: 19px;
  color: #2e2e2e;
  line-height: 15px;
  margin-bottom: 18px;
}
.title2 {
  height: 15px;
}
.container {
.mapMode .container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

.layerItem {
  /* font-size: 14px; */
  font-family: Source Han Sans SC;
  font-family: "微软雅黑";
  font-weight: 400;
  margin-right: 30px;
  cursor: pointer;
  text-align: center;
}

.active {
  color: #4187ff;
  border: 2px solid #4187ff;
.mapMode .layerItem {
  width: 0.8rem;
  margin-right: 24px;
}
.mapMode img {
  display: block;
  width: 100%;
  border-radius: 11px;
  border: 1px dashed #127dff;
  margin-bottom: 11px;
}
span {
  font-family: "微软雅黑";
  font-size: 0.12rem;
  color: #6e6969;
  line-height: 12px;
}
.mapMode .active,
.areaType .active {
  color: #127dff;
  border: 2px solid #127dff;
  border-radius: 10px;
}

.spanActive {
  color: #4187ff;
  color: #127dff;
}
.areaType {
  width: 100%;
  margin-top: 30px;
}

img {
.areaType .ZTtitle {
  margin-left: 28px;
  margin-bottom: 3px;
}
.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: 60px;
  height: 40px;
  margin-bottom: 5px;
  width: 0.5rem;
  border-radius: 11px;
  box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
  margin-bottom: 11px;
}

.more {
  float: right;
  margin-right: 20px;
  font-size: 0.12rem;
  color: #4187ff;
  color: #127dff;
  line-height: 25px;
  font-weight: 500;
  font-family: unset;