【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的方式绘制波纹点位

效果

代码实现

<!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><linkhref="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', // 容器 idstyle: '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-undefnew mapboxgl.Marker(tipsOption).setLngLat([130, 20]).addTo(map)}</script></body>
</html>

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

【MAPBOX基础功能】24、mapbox通过canvas方式绘制波纹点位
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】31、实现mapbox的测面功能
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】09、mapbox绘制线图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】32、实现mapbox的测距功能
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】25、mapbox地图基础工具 - 缩放
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】29、mapbox地图基础工具 - 获取当前地图层级
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】26、mapbox地图基础工具 -定位到指定的位置
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】28、mapbox地图基础工具 -获取当前地图中心点
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】30、mapbox地图基础工具 - 将360度范围内的经纬度转换为180度范围
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...

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

前言

效果

代码实现

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

最新文章

热门文章