youhua

少年

2024-03-13 290aa4c2bcd83c584e0b10cab76131c069bf64b7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <div class="historyBox">
    <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 }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store2";
import { addHistoryLayer } from "@/utils/tool";
export default {
  name: "historyBox",
  components: {},
  data() {
    return {
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
      currentValue: 2021,
    };
  },
  mounted() {
    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: {
    changeLeftMap(item) {
      this.currentValue = item;
      addHistoryLayer(this.currentValue);
    },
    close() {
      store.setHistoryShow(false);
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
  },
};
</script>
<style scoped>
.colseBtn {
  position: absolute;
  top: 20px;
  right: 9px;
}
 
.searchBtn {
  width: 0.4rem;
  /* height: 40px; */
}
 
.listBox {
  position: absolute;
  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 {
  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; */
  color: #127dff;
}
 
 
.active {
  /* background-color: #4590d7; */
  color: #127dff;
}
</style>