最新

lixuliang

2024-08-07 a916fc2df00bac9f8210b09fd7ee79f8b291e345

 src/components/sideMenu/layerMenu/layerPanel2.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"
@@ -9,61 +9,37 @@
          v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)"
        >
          <img
            :src="value.src"
            :class="{ active: curEMapModelIndex == index }"
          />
          <span :class="{ spanActive: curEMapModelIndex == index }">{{
          <img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
          <span :class="{ spanActive: curEMapModelIndex == index }">
            {{
            value.name
          }}</span>
            }}
          </span>
        </div>
        <div
        <!-- <div
          class="layerItem"
          :key="value0.id"
          v-for="(value0, index0) in sMapModelList"
          @click.stop="handleSMapClick(value0, index0)"
        >
          <img
            :src="value0.src"
            :class="{ active: curSMapModelIndex == index0 }"
          />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">{{
          <img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">
            {{
            value0.name
          }}</span>
        </div>
            }}
          </span>
        </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"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
        <span class="more" v-show="false" @click.stop="showLayerTree">
          更多图层
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div class="container">
        <div
@@ -73,46 +49,27 @@
          @click.stop="handleZTlick(ZTValue, ZTIndex)"
        >
          <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
          <span :class="{ spanActive: curZTIndex == ZTIndex }">{{
          <span :class="{ spanActive: curZTIndex == ZTIndex }">
            {{
            ZTValue.name
          }}</span>
            }}
          </span>
        </div>
      </div>
      <div class="title2"></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 }">{{
          <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">
            {{
            funcValue.name
          }}</span>
            }}
          </span>
        </div>
      </div>
    </div>

    <!-- <div class="yjsxt">
      <div class="title">城市部件</div>
      <div class="container">
        <div
          class="layerItem"
          :key="value2.id"
          v-for="(value2, index2) in yjList"
          @click.stop="handleYJClick(index2)"
        >
          <img :src="value2.src" :class="{ active: curYjIndex == index2 }" />
          <span :class="{ spanActive: curYjIndex == index2 }">{{
            value2.name
          }}</span>
        </div>
      </div>
    </div> -->
  </div>
</template>

@@ -127,12 +84,21 @@
  loadEnterprise,
  loadLayer,
  clearLayerByTypeId,
  clearLayerByTypeIdArr,
  clearLayerByTypeIdArr
} from "@/utils/map.js";
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store.js";
import ZTTitem from "@/utils/ztt.js";
import _GLOBAL from "@/assets/GLOBAL2";
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";
import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  clearAll
} from "@/utils/tool";
export default {
  name: "LayerPanel",
  data() {
@@ -143,299 +109,112 @@
          name: "二维地图",
          active: false,
          type: "er",
          src: require("@/assets/img/layer/ewdt.png"),
          src: require("@/assets/img/layer/ewdt.png")
        },
        {
          id: "yxdt",
          name: "影像地图",
          active: true,
          type: "er",
          src: require("@/assets/img/layer/yxdt.png"),
        },
          src: require("@/assets/img/layer/yxdt.png")
        }
      ],
      sMapModelList: [
        // {
        //   id: "3Dcs",
        //   name: "3D城市",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/3Dcs.png"),
        // },
        // {
        //   id: "swmx",
        //   name: "三维模型",
        //   active: false,
        //   type: "san",
        //   src: require("@/assets/img/layer/swmx.png"),
        // },
      ],
      areaTypeList: [
        {
          id: "规划范围",
          name: "规划范围",
          id: "swmx",
          name: "三维模型",
          active: false,
          src: require("@/assets/img/layer/ghfw.png"),
        },
        {
          id: "XingZhengQuHuaTu",
          name: "行政区划",
          active: false,
          src: require("@/assets/img/layer/xzqh.png"),
        },
        {
          id: "GuiHuaDanYuanHuaFenTu",
          name: "规划单元",
          active: false,
          src: require("@/assets/img/layer/ghdy.png"),
        },
        {
          id: "ZhuYaoGongNengQuGuiHuaShiYiTu",
          name: "功能区域",
          active: false,
          src: require("@/assets/img/layer/gnq.png"),
        },
      ],
      yjList: [
        {
          id: "yinjing",
          name: "窨井",
          active: false,
          src: require("@/assets/img/layer/yj.png"),
        },
        {
          id: "shext",
          name: "摄像头",
          active: false,
          src: require("@/assets/img/layer/sxt.png"),
        },
          type: "san",
          src: require("@/assets/img/layer/swmx.png")
        }
      ],
      FuncList: [
        {
          id: "tdgl",
          name: "土地管理",
          active: false,
          src: require("@/assets/img/layer/tudiguanli.png"),
          src: require("@/assets/img/layer/tudiguanli.png")
        },
        {
          id: "history",
          name: "历史影像",
          active: false,
          src: require("@/assets/img/layer/lishiyingxiang.png"),
        },
          src: require("@/assets/img/layer/lishiyingxiang.png")
        }
      ],
      zhuantiList: ZTTitem,
      //curMapModelIndex: 1,
      curEMapModelIndex: 0,
      curSMapModelIndex: -1,
      curAreaTypeIndex: -1,
      curYjIndex: -1,
      curFuncIndex: -1,
      curZTIndex: -1,
      state: store.thematicLayer,
      basicMapChecked: store.basicMapChecked,
      state1: store.tdglInfo,
      state1: store.tdglInfo
    };
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.handleEMapClick(
          {
            id: "yxdt",
            name: "影像地图",
            active: true,
            type: "er",
            src: "/static/img/yxdt.cf4698e.png",
          },
          1
        );
        loadEnterprise();
      }, 2000);
        switch (this.$route.query.showlayer) {
          case "SPJK":
            debugger;
            this.handleZTlick(ZTTitem[0], 0);
            break;
          case "QYXX":
            this.handleZTlick(ZTTitem[1], 1);
            break;
          case "SZGT":
            this.handleZTlick(ZTTitem[2], 2);
            break;
          case "TDGL":
            this.handleFuncClick(0);
            break;
          case "LSYX":
            this.handleFuncClick(1);
            break;
          default:
            break;
        }
        // loadEnterprise();
        // 初始加载地图
        // this.handleEMapClick(this.eMapModeList[1], 1);
      }, 1000);
    });
  },
  methods: {
    changeLayerView(max, enableTilt) {
      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]);
        });
      }
    },
    // 二维底图选择
    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);
      }
      // 切换图层
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curEMapModelIndex == index) {
        // 再次点击选中的item时取消选择
        // clearLayerByTypeId(result.id);
        // this.curEMapModelIndex = -1;
      } else {
        this.curSMapModelIndex = -1;
        this.curEMapModelIndex = 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]);
        });
      if (this.curEMapModelIndex == index) return;
      this.curEMapModelIndex = index;
      clearAll();
      switch (result.name) {
        case "二维地图":
          loadGeoMap();
          // loadBaseMap();
          // addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          // window.mapapi.getView().setZoom(14);
          break;
        case "影像地图":
          addImageLayer();
          addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          break;
      }
    },
    // 三维模型选择
    // 跳转到三维
    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);
      }
      // 切换图层
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curSMapModelIndex == index) {
        // 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]);
        });
      }
      store.setLayerPanelShow(false);
      this.$router.push("/viewer3D");
    },
    // 专题图选择
    handleAreaClick(result, index) {
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      if (this.curAreaTypeIndex == index) {
        this.curAreaTypeIndex = -1;
        let _data = sgworld.ProjectTree.getObject(children[0].id);
        if (_data) {
          sgworld.ProjectTree.setVisibility(children[0].id, false);
        }
        // clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        store.setThematicLayerItemId("");
      } else {
        this.curAreaTypeIndex = index;
        //清除
        //clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
        let arr = [
          "GuiHuaFanWeiShiYiTu",
          "XingZhengQuHuaTu",
          "GuiHuaDanYuanHuaFenTu",
          "ZhuYaoGongNengQuGuiHuaShiYiTu",
        ];
        arr.forEach((item) => {
          sgworld.ProjectTree.getObject(item) &&
            sgworld.ProjectTree.setVisibility(item, false);
        });
        let dataObj = sgworld.ProjectTree.getObject(result.id);
        if (dataObj) {
          sgworld.ProjectTree.setVisibility(result.id, true);
        } else {
          _GLOBAL.layers[result.id] = [];
          children.forEach((item) => {
            let itemLayer = loadLayer(item);
            _GLOBAL.layers[result.id].push(itemLayer);
            console.log(_GLOBAL.layers[result.id]);
          });
        }
        store.setThematicLayerItemId(result.id);
      }
    },
    // 窨井加载
    handleYJClick(index) {
      if (this.curYjIndex == index) {
        this.curYjIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
      } else {
        this.curYjIndex = index;
        switch (index) {
          case 0:
            loadManhole();
            break;
          case 1:
            loadCamera();
            break;
          case 2:
            loadEnterprise();
            break;
        }
      }
    },
    // 第二行 专题图 点击
    // 点位图 点击
    handleZTlick(result, index) {
      const val = layers.filter((res) => {
      console.log(result, index);
      const val = layers.filter(res => {
        if (res.name == result.name) {
          return res;
        }
@@ -443,101 +222,95 @@
      const children = val[0].children;
      if (this.curZTIndex == index) {
        this.curZTIndex = -1;
        //   let _data = sgworld.ProjectTree.getObject(children[0].id);
        //   if (_data) {
        //     sgworld.ProjectTree.setVisibility(children[0].id, false);
        //   }

        store.setThematicLayerItemId("");
      } else {
        this.curZTIndex = index;
        store.setThematicLayerItemId(children);

        //   //清除
        //   // let arr = [
        //   //   "GuiHuaFanWeiShiYiTu",
        //   //   "XingZhengQuHuaTu",
        //   //   "GuiHuaDanYuanHuaFenTu",
        //   //   "ZhuYaoGongNengQuGuiHuaShiYiTu",
        //   // ];
        //   // arr.forEach((item) => {
        //   //   sgworld.ProjectTree.getObject(item) &&
        //   //     sgworld.ProjectTree.setVisibility(item, false);
        //   // });
        //   let dataObj = sgworld.ProjectTree.getObject(result.id);
        //   if (dataObj) {
        //     sgworld.ProjectTree.setVisibility(result.id, true);
        //   } else {
        //     _GLOBAL.layers[result.id] = [];
        //     children.forEach((item) => {
        //       let itemLayer = loadLayer(item);
        //       _GLOBAL.layers[result.id].push(itemLayer);
        //       console.log(_GLOBAL.layers[result.id]);
        //     });
        //   }
        //   // store.setThematicLayerItemId(result.id);
      }
    },
    // 第三行 专题功能 点击
    // 功能项 点击
    handleFuncClick(index) {
      if (this.curFuncIndex == index) {
        store.setTdglFlag(false);
        store.setPoplayerListAction({});
        divPoint3 && divPoint3.deleteObject();
        store.setPoplayerShowAction(false);
        this.curFuncIndex = -1;
        // window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLine) {
          sgworld.Creator.DeleteObject(window.tdglLine);
          window.mapapi.removeLayer(window.tdglLine);
          window.tdglLine = null;
        }
        this.curFuncIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLayer) {

        if (window.tdgllayer) {
          store.setSliderShow(false);
          sgworld.Creator.DeleteObject(window.tdglLayer);
          window.mapapi.removeLayer(window.tdgllayer);
          window.tdgllayer = null;
        }
      } else {
        this.curFuncIndex = index;
        // 隐藏底部图层面版
        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,
                alpha: this.alpha,
              },
              "0",
              layers[8].children[0].zIndex,
              true,
              ""
            );
            //显示滑动条
            store.setSliderShow(true);
            store.setTdglFlag(true);
            var url = layers[8].children[0].urls;
            //加载地块模型
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                ratio: 3,
                url:
                  "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  VERSION: "1.1.1",
                  SRS: "EPSG:3857",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: ""
                }
              })
            });

            // window.tdgllayer = new ol.layer.Tile({
            //   source: new ol.source.XYZ({
            //     projection: "EPSG:4326",
            //     format: new ol.format.MVT(),
            //     tileGrid: ol.tilegrid.createXYZ({
            //       // extent: [-50.582, -90, 180, 70.1558],
            //       extent: [-180, -90, 180, 90]
            //     }),
            //     tilePixelRatio: 3,
            //     tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            //       console.log(tileCoord, '参数')
            //       console.log(Math.pow(2, tileCoord[0]) + tileCoord[2] - 1)
            //       // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
            //       return (
            //         url +
            //         (tileCoord[0]) +
            //         "/" +
            //         tileCoord[1] +
            //         "/" +
            //         (Math.pow(2, tileCoord[0]) + tileCoord[2] - 1) +
            //         ".jpeg"
            //       );

            //     },
            //   }),
            // });

            window.mapapi.addLayer(window.tdgllayer);
            break;
          case 1:
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            if (window.tdglLayer) {
              store.setSliderShow(false);
              sgworld.Creator.DeleteObject(window.tdglLayer);
            }
            store.setSliderShow(false);
            window.mapapi.removeLayer(window.tdgllayer);
            store.setHistoryShow(true);
            break;
        }
@@ -545,124 +318,148 @@
    },
    showLayerTree() {
      store.setLayerTreeShow(true);
    },
    }
  },
  watch: {
    "state.itemId": {
      handler: function (newVal, oldVal) {
        let that = this;
        if (newVal == "") {
          this.curAreaTypeIndex = -1;
        } else {
          let index = -1;
          if (newVal == "GuiHuaFanWeiShiYiTu") {
            index = 0;
          } else if (newVal == "XingZhengQuHuaTu") {
            index = 1;
          } else if (newVal == "GuiHuaDanYuanHuaFenTu") {
            index = 2;
          } else if (newVal == "ZhuYaoGongNengQuGuiHuaShiYiTu") {
            index = 3;
          }
          this.curAreaTypeIndex = index;
        }
      },
    },
    // 基础图层
    "basicMapChecked.val": {
      handler: function (newVal, oldVal) {
        if (newVal == "三维模型") {
          debugger;
          this.handleSMapClick(
            {
              id: "swmx",
              name: "三维模型",
              active: false,
              type: "san",
              src: require("@/assets/img/layer/swmx.png"),
            },
            1
          );
        }
      },
      immediate: true, //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
    // "state1.alpha": {
    //   handler: function (newVal) {
    //     this.handleFuncClick(0);
    //   },
    //   deep: true,
    // },
  },
  // watch: {
  //   // 基础图层
  //   "basicMapChecked.val": {
  //     handler: function(newVal, oldVal) {
  //       if (newVal == "三维模型") {
  //         debugger;
  //         this.handleSMapClick(
  //           {
  //             id: "swmx",
  //             name: "三维模型",
  //             active: false,
  //             type: "san",
  //             src: require("@/assets/img/layer/swmx.png")
  //           },
  //           1
  //         );
  //       }
  //     },
  //     immediate: true, //刷新加载 立马触发一次handler
  //     deep: true // 可以深度检测到 obj 对象的属性值的变化
  //   }
  // },
  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;