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 | 43 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 40 insertions(+), 3 deletions(-)
diff --git a/src/pages/characterMap/characterMap.vue b/src/pages/characterMap/characterMap.vue
index 8d04186..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,7 +124,6 @@
// "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
.chinaProvider("TianDiTu.Normal.Map", {
key: "76bc34ead7e30e663a4eded8aeaf5860",
@@ -137,12 +137,17 @@
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;
@@ -578,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