修改

lixuliang

2024-03-06 ec065c84d7ee0b7e05efe9b991b528f6a5feb5a0

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -1,49 +1,89 @@
<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" :key="value.id" v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)">
          <img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
        <div
          class="layerItem"
          :key="value.id"
          v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)"
        >
          <img
            :src="value.src"
            :class="{ active: curEMapModelIndex == index }"
          />
          <span :class="{ spanActive: curEMapModelIndex == index }">{{
            value.name
          }}</span>
        </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 }" />
        <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 }">{{
            value0.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 class="layerItem" v-for="(ZTValue, ZTIndex) in zhuantiList" :key="ZTValue.id"
          @click.stop="handleZTlick(ZTValue, ZTIndex)">
        <div
          class="layerItem"
          v-for="(ZTValue, ZTIndex) in zhuantiList"
          :key="ZTValue.id"
          @click.stop="handleZTlick(ZTValue, ZTIndex)"
        >
          <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
          <span :class="{ spanActive: curZTIndex == ZTIndex }">{{
            ZTValue.name
          }}</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 }" />
        <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 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">
@@ -82,12 +122,15 @@
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";

// import Tile from "ol/layer/Tile";
// import XYZ from "ol/source/XYZ";
// import { get as getProjection, getTransform } from "ol/proj";
// import { createXYZ } from "ol/tilegrid";

import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  clearAll,
} from "@/utils/tool";
export default {
  name: "LayerPanel",
  data() {
@@ -226,104 +269,24 @@
    },
    // 二维底图选择
    handleEMapClick(result, index) {
      // 设置相机
      // if (result.name == "二维地图") {
      //   window.mapapi.getLayerByName("二维地图").setVisible(true);
      //   window.mapapi.getLayerByName("影像地图").setVisible(false);
      // } else if (result.name == "影像地图") {
      //   window.mapapi.getLayerByName("影像地图").setVisible(true);
      //   window.mapapi.getLayerByName("二维地图").setVisible(false);
      // }

      // 切换图层
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      // console.log(children, '111')
      if (result.name == '影像地图') {
        //加载航拍影像
        window.ImageLayer = new ol.layer.Tile({
          id: 'C0698021',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.ImageLayer);

        //加载高德标注
        window.annotation = new ol.layer.Tile({
          id: '69EB42A8',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.annotation);


        window.hexin = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.hexin)


        //亦庄新城规划范围
        window.yizhuang = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.yizhuang)
      } else {
        window.mapapi.removeLayer(window.ImageLayer);
        window.mapapi.removeLayer(window.annotation)
        window.mapapi.removeLayer(window.hexin);
        window.mapapi.removeLayer(window.yizhuang);
      }



      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;
      }
    },
    // 三维模型选择
@@ -476,16 +439,16 @@
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                ratio: 3,
                url: 'https://skyzt.bda.gov.cn//gisserver/wmsserver/chengshiguihua_dikuaibianhao',
                url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  'VERSION': '1.1.1',
                  'SRS': 'EPSG:4326',
                  'FORMAT': 'image/png',
                  'TILED': true,
                  "LAYERS": ''
                }
              })
            })
                  VERSION: "1.1.1",
                  SRS: "EPSG:4326",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: "",
                },
              }),
            });

            // window.tdgllayer = new ol.layer.Tile({
            //   source: new ol.source.XYZ({
@@ -582,65 +545,100 @@
<style scoped>
.layerPanel {
  width: 100%;
  /* height: 396px; */
  position: absolute;
  bottom: 0px;
  align-items: center;
  padding: 0.1rem;
  background: white;
  /* padding: 0.1rem; */
  background: #ffffff;
  z-index: 1000;
  padding-left: 0.25rem;
  /* 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 {
  width: 100%;
  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;
}

.mapMode .layerItem {
  width: 91px;
  margin-right: 24px;
}
.mapMode img {
  display: block;
  width: 91px;
  border-radius: 11px;
  border: 1px dashed #127dff;
  /* height: 40px; */
  margin-bottom: 11px;
}
span {
  font-family: "微软雅黑";
  font-weight: 500;
  font-size: 15px;
  color: #212121;
  line-height: 12px;
}
.active {
  color: #4187ff;
  border: 2px solid #4187ff;
  color: #127dff;
  border: 2px solid #127dff;
  border-radius: 10px;
}

.spanActive {
  color: #4187ff;
  color: #127dff;
}

img {
.areaType {
  width: 100%;
  margin-top: 30px;
}
.areaType .ZTtitle {
  margin-left: 28px;
  margin-bottom: 3px;
}
.areaType .container{
  padding: 0 18px 22px;
  justify-content: space-between;
}
.areaType img {
  display: block;
  width: 60px;
  height: 40px;
  margin-bottom: 5px;
  width: 84px;
}

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