From 33ab34b1c52b8d2cad81105bbda76459a1b84e68 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 20 五月 2024 18:31:30 +0800
Subject: [PATCH] 时空缩略图

---
 src/pages/characterMap/characterMap.vue |   56 ++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/pages/characterMap/characterMap.vue b/src/pages/characterMap/characterMap.vue
index e9a18d3..84100fd 100644
--- a/src/pages/characterMap/characterMap.vue
+++ b/src/pages/characterMap/characterMap.vue
@@ -77,6 +77,7 @@
 import * as echarts from "echarts";
 import "echarts/extension/bmap/bmap";
 import { loadBMap } from "@/static/map.js";
+import "leaflet.chinatmsproviders";
 import L from "leaflet";
 import { getPersonInfo } from "@/api/index.js";
 export default {
@@ -123,27 +124,30 @@
       //   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
       // ).addTo(map);
 
-      L.tileLayer(
-        "https://t{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=76bc34ead7e30e663a4eded8aeaf5860",
-        {
+      L.tileLayer
+        .chinaProvider("TianDiTu.Normal.Map", {
+          key: "76bc34ead7e30e663a4eded8aeaf5860",
           maxZoom: 18,
-          attribution: "Map data &copy; 2012-2019, TianDiTu",
-          id: "tdtAnnoLayer",
-          accessToken: "your.mapbox.public.access.token",
-        }
-      ).addTo(map);
+          minZoom: 5,
+        })
+        .addTo(map);
       let DefaultIcon1 = L.icon({
         iconUrl: this.icoName,
         iconSize: [24, 41], //  鍥炬爣鐨勫ぇ灏�    銆愬��1锛屽��2銆� 涓哄叿浣撲綘鑷畾涔夊浘鏍囩殑灏哄锛屾瘮濡傛垜鍥炬爣灏哄鏄�32脳52锛岃〃绀鸿鍥炬爣锛氬搴�32鍍忕礌锛岄珮搴︼細52鍍忕礌锛岄偅涔堝��1:灏辨槸32锛屽��2锛氬氨鏄�52
         iconAnchor: [24, 41], //  鍥炬爣灏嗗搴旀爣璁扮偣鐨勪綅缃� 杩欎釜鏄噸鐐癸紝 銆愬��1锛屽��2銆戯紝鍊�1锛氫负鍥炬爣鍧愭爣绗竴涓��(鍗�32)鐨勪竴鍗婏紝鍊�2锛氫负鍥炬爣鍧愭爣绗簩涓��(鍗�52)
         popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗ｉ粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
       });
+      let icon = L.divIcon({
+        html: "<div class='map-circle-name ripple'></div>",
+        iconSize: [80, 80],
+        className: "map-circle",
+      });
       this.map = map;
       if (info && info.length) {
         for (let i = 0; i < info.length; i++) {
           const item = info[i];
           const marker1 = L.marker([item.ycoord, item.xcoord], {
-            icon: DefaultIcon1,
+            icon: icon,
           }).addTo(map);
           marker1.on("click", (e) => {
             this.menuNav = true;
@@ -579,9 +583,41 @@
   height: 100%;
 }
 #map {
-  height: 1080px;
+  height: 100%;
   width: 100%;
   margin: 0 auto;
   font-size: 14px !important;
 }
+::v-deep .map-circle-name {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: rgb(222, 142, 102);
+}
+
+::v-deep .ripple {
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+::v-deep .ripple::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 150%; /* Ensure it covers the entire parent */
+  height: 150%;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  animation: ripple-animation 1s infinite linear;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
 </style>

--
Gitblit v1.9.1