移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 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>