时空缩略图

杨磊

2024-05-20 33ab34b1c52b8d2cad81105bbda76459a1b84e68

 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 © 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>