From 4a5af28ba9fc254b81aae7345ae936cbaf0716be Mon Sep 17 00:00:00 2001
From: 少年 <1392120328@qq.com>
Date: 星期一, 04 三月 2024 15:33:56 +0800
Subject: [PATCH] youhua
---
src/components/poplayer/history2.vue | 139 ++++++++-------------------------------------
1 files changed, 26 insertions(+), 113 deletions(-)
diff --git a/src/components/poplayer/history2.vue b/src/components/poplayer/history2.vue
index cd947d5..641ad0c 100644
--- a/src/components/poplayer/history2.vue
+++ b/src/components/poplayer/history2.vue
@@ -1,142 +1,54 @@
<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 }">
- {{ item }}
- </li>
- </ul>
- </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)"
+ :class="{ active: currentValue == item }"
+ >
+ {{ item }}
+ </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 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,
],
- 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();
+ window.mapapi.getView().setCenter([4.606512, 2.621472]);
+ addHistoryLayer(this.currentValue);
},
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;
- // },
+ },
},
- // 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;
@@ -174,4 +86,5 @@
.active {
background-color: #4590d7;
-}</style>
+}
+</style>
--
Gitblit v1.9.3