北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
少年
2024-03-13 5275d044d8e1d05ac2efc7cec935c5e28f6d832d
src/components/poplayer/history2.vue
@@ -11,7 +11,9 @@
          @click="changeLeftMap(item)"
          :class="{ active: currentValue == item }"
        >
          {{ item }}
          <span>
            {{ item }}
          </span>
        </li>
      </ul>
    </div>
@@ -19,6 +21,7 @@
</template>
<script>
import _GLOBAL from "@/assets/GLOBAL";
import store from "@/utils/store2";
import { addHistoryLayer } from "@/utils/tool";
export default {
@@ -27,8 +30,8 @@
  data() {
    return {
      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,
      ],
      currentValue: 2021,
    };
@@ -36,7 +39,8 @@
  mounted() {
    store.setNavigatorShow(false);
    store.setMapToolShow(false);
    window.mapapi.getView().setCenter([4.606512, 2.621472]);
    // 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);
@@ -50,7 +54,7 @@
    close() {
      store.setHistoryShow(false);
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter([116.505348, 39.795592]);
      window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
@@ -60,40 +64,49 @@
<style scoped>
.colseBtn {
  position: absolute;
  top: 3vh;
  right: 20px;
  top: 20px;
  right: 9px;
}
.searchBtn {
  width: 40px;
  height: 40px;
  width: 0.4rem;
  /* height: 40px; */
}
.listBox {
  position: absolute;
  right: 20px;
  bottom: 0.5rem;
  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;
.listBox .active {
  /* background-color: #4590d7; */
  color: #127dff;
}
</style>