Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb

lixuliang

2024-03-13 065669d31914a2f65c48d351417f48e49bd79c0c

 src/components/poplayer/history2.vue

@@ -1,177 +1,112 @@
<template>
  <div class="historyBox">
    <div class="leftBox">
      <div id="mapContainer" class="mapLeft"></div>
      <div class="colseBtn">
        <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
      </div>
      <div class="listBox">
        <ul>
          <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap(item, index)"
            :class="{ active: currentIndex1 == index }">
    <div class="colseBtn">
      <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
    </div>
    <div class="listBox">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap(item)"
          :class="{ active: currentValue == item }"
        >
          <span>
            {{ item }}
          </li>
        </ul>
      </div>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mapType from "@/utils/maptype";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import * as olProj from "ol/proj";
import XYZ from "ol/source/XYZ";
import store from '@/utils/store2'
let view = new View({
  center: olProj.fromLonLat([4.606512, 2.621472]),
  zoom: 12,
  enableRotation: false,
});
var topResolution = 896.0859375;
var resolutions = [];
let matrixIds = [];

for (let zoom = 0; zoom < 13; zoom++) {
  resolutions.push(topResolution / Math.pow(2, zoom));
  matrixIds[zoom] = zoom;
}
let LwSource = new Tile({
  source: new WMTS({
    url: "https://skyzt.bda.gov.cn/service/ImageEngine/picdis/abc?user=jjjskfq&password=Jjjskfq@2022",
    layer: "Shiliang_Lw_2019",
    style: "",
    format: "image/png",
    // 投影坐标系
    tileGrid: new WMTSTileGrid({
      extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
      origin: [0, 688194],
      resolutions: resolutions,
      matrixIds: matrixIds,
      tileSize: 256,
    }),
  }),
});
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store2";
import { addHistoryLayer } from "@/utils/tool";
export default {
  name: "historyBox",
  components: {},
  data() {
    return {
      openMap: null,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
        2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010,
        2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001,
      ],
      tileLayer1: null, // 地图层
      tileLayer2: null, // 地图层
      mapList: [], // 地图列表
      locaMap1: "2021",
      // locaMap2: "2020",
      currentIndex1: 20,
      // currentIndex2: 19,
      currentValue: 2021,
    };
  },
  mounted() {
    this.mapList = mapType;
    this.tileLayer1 = new Tile({
      source: this.mapList.find((e) => e.id == this.locaMap1).value,
    });
    // this.tileLayer2 = new Tile({
    //   source: this.mapList.find((e) => e.id == this.locaMap2).value,
    // });
    this.initMap();
    store.setNavigatorShow(false);
    store.setMapToolShow(false);
    // window.mapapi.getView().setCenter(ol.proj.fromLonLat([4.606512, 2.621472]));
    window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
    addHistoryLayer(this.currentValue);
    if (_GLOBAL.GPSMarker) {
      window.mapapi.removeLayer(_GLOBAL.GPSMarker);
    }
  },
  methods: {
    initMap() {
      new Map({
        target: "mapContainer",
        layers: [
          this.tileLayer1,
          LwSource,
          // new Tile({
          //   source: new XYZ({
          //     url: "https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=2002&type=Sate&level={z}&x={x}&y={y}",
          //   }),
          // }),
        ],
        view: view,
        controls: [],
      });
    changeLeftMap(item) {
      this.currentValue = item;
      addHistoryLayer(this.currentValue);
    },
    changeLeftMap(item, index) {
      this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
      this.currentIndex1 = index;
    },
    close(){
    close() {
      store.setHistoryShow(false);

    }
    // changeRightMap(item, index) {
    //   this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
    //   this.currentIndex2 = index;
    // },
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
  },
  // watch: {
  //   "state.show": {
  //     handler: function (newVal, oldVal) {
  //       debugger;
  //       let that = this;
  //       this.state.show =newVal
  //     },
  //   },
  // },
};
</script>
<style scoped>
.historyBox {
  position: absolute;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  /* background: rgba(0, 0, 0, 0.5); */
  background: #ffffff;
  top: 0;
  left: 0;
}

.colseBtn {
  position: absolute;
  top: 5vh;
  right: 20px;
  top: 20px;
  right: 9px;
}

.searchBtn {
  width: 40px;
  height: 40px;
  width: 0.4rem;
  /* height: 40px; */
}

.listBox {
  position: absolute;
  right: 20px;
  bottom: 10px;
  background-color: #373737;
  right: 10px;
  bottom: 18px;
  width: 48px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 13px;
}

.listBox ul {
  margin-top: 3px;
}
.listBox li {
  padding: 2px;
  border: 1px solid #000;
  color: white;
  font-weight: bold;
  font-size: 0.12rem;
  line-height: 0.25rem;
  color: #1c222f;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}
.listBox li:last-child {
  border: none;
}

.listBox li:hover {
  background-color: #00e1ff;
  /* background-color: #00e1ff; */
  color: #127dff;
}

.mapLeft {
  float: left;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.active {
  background-color: #4590d7;
}</style>

.listBox .active {
  /* background-color: #4590d7; */
  color: #127dff;
}
</style>