111

少年

2024-02-07 f7ab8838f095134c65d2628fe54a6fb8c5df146e

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -3,30 +3,16 @@
    <div class="mapMode">
      <div class="title" style="margin-top: 0px">地图模式</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>
@@ -37,17 +23,11 @@
      <div class="title">
        专题应用
        <!-- 不显示更多图层 -->
        <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
@@ -56,16 +36,9 @@
      </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>
@@ -255,11 +228,11 @@
    handleEMapClick(result, index) {
      // 设置相机
      if (result.name == "二维地图") {
        window.map.getLayerByName("二维地图").setVisible(true);
        window.map.getLayerByName("影像地图").setVisible(false);
        window.mapapi.getLayerByName("二维地图").setVisible(true);
        window.mapapi.getLayerByName("影像地图").setVisible(false);
      } else if (result.name == "影像地图") {
        window.map.getLayerByName("影像地图").setVisible(true);
        window.map.getLayerByName("二维地图").setVisible(false);
        window.mapapi.getLayerByName("影像地图").setVisible(true);
        window.mapapi.getLayerByName("二维地图").setVisible(false);
      }
      // 切换图层
      const val = layers.filter((res) => {
@@ -408,14 +381,14 @@
        divPoint3 && divPoint3.deleteObject();
        store.setPoplayerShowAction(false);
        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) {
          store.setSliderShow(false);
          sgworld.Creator.DeleteObject(window.tdglLayer);
          window.mapapi.removeLayer(window.tdglLayer);
        }
      } else {
        // 隐藏底部图层面版
@@ -428,10 +401,10 @@
        switch (index) {
          case 0:
            if (window.tdgllayer) {
              window.map.removeLayer(window.tdgllayer);
              window.mapapi.removeLayer(window.tdgllayer);
              store.setSliderShow(false);
              window.tdgllayer = null;
              window.map.removeLayer(window.tdgllayer);
              window.mapapi.removeLayer(window.tdglLine);
              return;
            }
            store.setSliderShow(true);
@@ -439,7 +412,7 @@
            var url = layers[8].children[0].urls;
            //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";

            window.map.removeLayer(window.tdgllayer);
            window.mapapi.removeLayer(window.tdgllayer);
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.XYZ({
                projection: "EPSG:4326",
@@ -461,18 +434,19 @@
                },
              }),
            });
            window.map.addLayer(window.tdgllayer);
            window.mapapi.addLayer(window.tdgllayer);
            //显示滑动条
            store.setTdglFlag(true);
            break;
          case 1:
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            store.setSliderShow(false);
            store.setHistoryShow(true);
            if (window.tdglLayer) {
              store.setSliderShow(false);
              window.map.removeLayer(window.tdgllayer);
              window.mapapi.removeLayer(window.tdgllayer);
            }
            store.setHistoryShow(true);
            break;
        }
      }
@@ -552,9 +526,11 @@
  line-height: 25px;
  margin: 10px 0px 10px 0;
}

.title2 {
  height: 15px;
}

.container {
  display: flex;
  align-items: center;