【MAPBOX基础功能】23、mapbox通过marker的方式绘制波纹点位

前言

官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
mapbox通过marker的方式绘制波纹点位
1
2
3

效果

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>23、通过marker方式绘制波纹点位</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #map {
        width: 100%;
        height: 100%;
      }
    </style>
    <style lang="less">
      .ripple-marker {
        background-position: center center;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .ripple-marker .animate {
        border-radius: 50%;
        animation: myfirst 1.5s infinite;
      }
      .ripple-marker .center {
        border-radius: 100%;
      }
      .ripple-marker span {
        display: inline-block;
      }
      @keyframes myfirst {
        10% {
          transform: scale(1);
        }
        20% {
          transform: scale(1.2);
        }
        30% {
          transform: scale(1.4);
        }
        40% {
          transform: scale(1.6);
        }
        50% {
          transform: scale(1.8);
        }
        55% {
          transform: scale(2);
        }
        60% {
          transform: scale(1.8);
        }
        70% {
          transform: scale(1.6);
        }
        80% {
          transform: scale(1.4);
        }
        90% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken =
        'pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'
      const map = new mapboxgl.Map({
        container: 'map', // 容器 id
        style: 'mapbox://styles/mapbox/streets-v11', // mapbox底图
        center: [108, 35], // 初始化中心点
        zoom: 2, // 初始化层级
      })
      map.on('load', () => {
        addMarkerRipplePoint()
      })
      // 绘制marker类型的波纹点位
      function addMarkerRipplePoint() {
        const dom = document.createElement('div')
        dom.className = 'ripple-marker'
        const el1 = document.createElement('p')
        el1.className = 'animate'
        const el2 = document.createElement('p')
        el2.className = 'center'
        el2.style.width = el1.style.width = '20px'
        el2.style.height = el1.style.height = '20px'
        el2.style.backgroundColor = 'unset'
        el1.style.backgroundColor = 'red'
        el1.style.opacity = '0.4'
        // el1.style.boxShadow = '0 0 2px #000'
        el2.style.position = 'absolute'
        el2.style.left = '0'
        el2.style.opacity = '0.8'
        dom.appendChild(el1)
        dom.appendChild(el2)
        const tipsOption = {
          element: dom,
          anchor: 'left',
          offset: [10, 20],
        }
        // eslint-disable-next-line no-undef
        new mapboxgl.Marker(tipsOption).setLngLat([130, 20]).addTo(map)
      }
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

相关阅读:
Vite3 + Vue2.7 环境搭建(TS)
人脸匹配——OpenCV
微服务框架 SpringCloud微服务架构 7 Feign 7.1 基于Feign 远程调用
 实体和json
雷达基础导论及MATLAB仿真
 25栈和队列-理解栈和队列
 Go:关于 Channel
【无标题】
[技术发展-22]：网络与通信技术的应用与发展快速概览-2- 通信技术
 PMP备考大全：经典题库（敏捷管理第4期）
原文地址：https://blog.csdn.net/weixin_44402694/article/details/125421441