From 33ab34b1c52b8d2cad81105bbda76459a1b84e68 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 20 五月 2024 18:31:30 +0800
Subject: [PATCH] 时空缩略图
---
src/pages/character/detail.vue | 85 +++++++++++++++++++++++++++++-------------
src/pages/territory/territory.vue | 3 +
2 files changed, 61 insertions(+), 27 deletions(-)
diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue
index 7664ed8..c168845 100644
--- a/src/pages/character/detail.vue
+++ b/src/pages/character/detail.vue
@@ -384,6 +384,8 @@
getSpaceTime,
} from "@/api/index.js";
import { getImg } from "@/static/tool.js";
+import L from "leaflet";
+import "leaflet.chinatmsproviders";
export default {
components: {
@@ -754,12 +756,34 @@
};
});
// 鏃剁┖鍦板浘
- loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
- this.spaceTime(data);
- });
+ this.initMap(data[0]);
+ // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
+ // this.spaceTime(data);
+ // });
});
},
-
+ initMap(markerList) {
+ var map = L.map("spaceTime", {
+ preferCanvas: true,
+ attributionControl: false,
+ }).setView([markerList.value[1], markerList.value[0]], 13);
+ L.tileLayer
+ .chinaProvider("TianDiTu.Normal.Map", {
+ key: "76bc34ead7e30e663a4eded8aeaf5860",
+ maxZoom: 18,
+ minZoom: 3,
+ })
+ .addTo(map);
+ let icon = L.divIcon({
+ html: "<div class='map-circle-name ripple'></div>",
+ iconSize: [80, 80],
+ className: "map-circle",
+ });
+ this.map = map;
+ const temp_mark = L.marker([markerList.value[1], markerList.value[0]], {
+ icon: icon,
+ }).addTo(map);
+ },
// 鏀惧ぇ鍦板浘璺宠浆
fangdaClick(index) {
if (index == 1) {
@@ -978,28 +1002,6 @@
var myChart = echarts.init(chartDom);
var option;
- // const data = [
- // {
- // name: "娴烽棬",
- // value: [121.15, 31.89]
- // },
- // {
- // name: "閯傚皵澶氭柉",
- // value: [109.781327, 39.608266]
- // },
- // {
- // name: "鎷涜繙",
- // value: [120.38, 37.35]
- // },
- // {
- // name: "鑸熷北",
- // value: [122.207216, 29.985295]
- // },
- // {
- // name: "榻愰綈鍝堝皵",
- // value: [123.97, 47.33]
- // }
- // ];
option = {
title: {
text: "",
@@ -1400,4 +1402,35 @@
.BoxRight .box-card {
margin-bottom: 0.2rem !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>
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index 4d8a90b..e131ec5 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -199,9 +199,10 @@
<script>
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
+import "leaflet.chinatmsproviders";
+
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
-import "leaflet.chinatmsproviders";
import { getRetrieval, getDynasty } from "@/api/index.js";
export default {
data() {
--
Gitblit v1.9.1