From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端
---
src/components/poplayer/history.vue | 139 +++++++++++++++++++++++-----------------------
1 files changed, 70 insertions(+), 69 deletions(-)
diff --git a/src/components/poplayer/history.vue b/src/components/poplayer/history.vue
index 046f495..3d45518 100644
--- a/src/components/poplayer/history.vue
+++ b/src/components/poplayer/history.vue
@@ -1,37 +1,36 @@
<template>
<div class="historyBox">
- <div class="leftBox">
- <div id="mapContainer" class="mapLeft"></div>
- <!-- <div class="colseBtn">
- <img class="searchBtn" 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 id="mapContainer" class="mapLeft"></div>
+ <div class="closeWrapper" @click="close(false)">
+ <img class="colseBtn" 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>
</template>
<script>
+import store from "@/utils/store.js";
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 { 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";
-let view = new ol.View({
- center: ol.proj.fromLonLat([4.606512, 2.621472]),
+let view = new View({
+ center: olProj.fromLonLat([4.606512, 2.621472]),
zoom: 13,
enableRotation: false,
});
@@ -43,14 +42,14 @@
resolutions.push(topResolution / Math.pow(2, zoom));
matrixIds[zoom] = zoom;
}
-let LwSource = new ol.layer.Tile({
- source: new ol.source.WMTS({
+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 ol.tilegrid.WMTS({
+ tileGrid: new WMTSTileGrid({
extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
origin: [0, 688194],
resolutions: resolutions,
@@ -80,7 +79,7 @@
},
mounted() {
this.mapList = mapType;
- this.tileLayer1 = new ol.layer.Tile({
+ this.tileLayer1 = new Tile({
source: this.mapList.find((e) => e.id == this.locaMap1).value,
});
// this.tileLayer2 = new Tile({
@@ -90,7 +89,7 @@
},
methods: {
initMap() {
- new ol.Map({
+ new Map({
target: "mapContainer",
layers: [
this.tileLayer1,
@@ -108,6 +107,9 @@
changeLeftMap(item, index) {
this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
this.currentIndex1 = index;
+ },
+ close(val) {
+ store.setHistoryShow(val);
},
// changeRightMap(item, index) {
// this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
@@ -128,56 +130,55 @@
<style scoped>
.historyBox {
position: absolute;
- z-index: 2;
+ z-index: 20;
width: 100%;
height: 100%;
background-color: #fff;
- margin-top: 0.43rem;
- height: calc(100% - 0.43rem);
display: flex;
-}
-.colseBtn {
- position: absolute;
- top: 10vh;
- left: 0;
-}
-.leftBox {
- position: relative;
- width: 100%;
-}
-.rightBox {
- position: relative;
- width: 50%;
-}
-.listBox {
- position: absolute;
- right: 20px;
- bottom: 10px;
- background-color: #373737;
-}
-.listBox li {
- padding: 2px;
- border: 1px solid #000;
- color: white;
-}
-.listBox li:hover {
- background-color: #00e1ff;
}
.mapLeft {
width: 100% !important;
- float: left;
- position: absolute;
height: 100%;
background-color: #fff;
}
-.mapRight {
- width: 100% !important;
- float: right;
+.closeWrapper {
position: absolute;
- height: 100%;
- background-color: #fff;
+ top: 20px;
+ right: 9px;
}
-.active {
- background-color: #4590d7;
+.colseBtn {
+ 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 {
+ color: #127dff;
+}
+
+.listBox .active {
+ color: #127dff;
}
</style>
--
Gitblit v1.9.3