mapbox-gl通过为marker设置css动画，实现动态闪烁效果，先放个效果图 。

1.主要就是为元素设置一个动画，

myfirst动画让元素随时间放大
 .marker {

             /* background: url("./image/loc.png"); */

             background-position: center center;

             width:20px;

             height:20px;

             display: flex;

             display: -webkit-flex;

             align-items: center;

             justify-content: center;

         }

         .marker p{

             background-color: rgba(250, 0, 0, 0.2);

             width: 10px;

             height: 10px;

             border-radius:50%;

             animation: myfirst 1.5s infinite;

             box-shadow: 0px 0px 2px #f00;

         }

         @keyframes myfirst{

             10% {transform: scale(1.2);}

             20% {transform: scale(2);}

             40% {transform: scale(3);}

             60% {transform: scale(4);}

             80% {transform: scale(6);}

             100% {transform: scale(8);}

         }

2.创建一个marker，其元素应用上述样式即可

完整代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset='utf-8' />

     <title>Add custom icons with Markers</title>

     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

     <script src="style/MapStyle.js"></script>

     <script src="style/dynamic-traffic-info.js"></script>

     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>

     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />

     <style>

         body { margin:0; padding:0; }

         #map { position:absolute; top:0; bottom:0; width:100%; }

         *{

             margin: 0;

             padding: 0;

         }

         .dd{

             height: 50px;

             background-color: #aaa;

         }

         .marker {

             /* background: url("./image/loc.png"); */

             background-position: center center;

             width:20px;

             height:20px;

             display: flex;

             display: -webkit-flex;

             align-items: center;

             justify-content: center;

         }

         .marker p{

             background-color: rgba(250, 0, 0, 0.2);

             width: 10px;

             height: 10px;

             border-radius:50%;

             animation: myfirst 1.5s infinite;

             box-shadow: 0px 0px 2px #f00;

         }

         @keyframes myfirst{

             10% {transform: scale(1.2);}

             20% {transform: scale(2);}

             40% {transform: scale(3);}

             60% {transform: scale(4);}

             80% {transform: scale(6);}

             100% {transform: scale(8);}

         }

     </style>

 </head>

 <body>

 <div id='map'></div>

 <script>

 mapboxgl.accessToken = 'pk.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ';

 var map = new mapboxgl.Map({

     container: 'map',

     // // style: getTrafficStyle(),

     // style: 'mapbox://styles/mapbox/navigation-preview-day-v2',

     style: 'mapbox://styles/mapbox/light-v10',

     center: [116.270169, 40.087127],

     zoom: 4

 });

 map.on('click', function(event){

     let lng = event.lngLat.lng.toFixed(6)

     let lat = event.lngLat.lat.toFixed(6)

     let zoom = map.getZoom()

     console.log('Clicked at : ' + lng + ', ' + lat + '. Zoom: ' + zoom)

   // var style = map.getStyle();

   //   console.info(JSON.stringify(style));

 });

 var geojson = {

   "type": "FeatureCollection",

   "features": [

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           120.1904296875,

           30.391830328088137

         ]

       }

     },

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           121.44287109374999,

           31.16580958786196

         ]

       }

     },

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           118.828125,

           32.18491105051798

         ]

       }

     },

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           117.11975097656249,

           31.812229022640704

         ]

       }

     },

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           116.45507812500001,

           40.07807142745009

         ]

       }

     },

     {

       "type": "Feature",

       "geometry": {

         "type": "Point",

         "coordinates": [

           113.35693359375,

           23.160563309048314

         ]

       }

     }

   ]

 };

 geojson.features.forEach(function(marker) {

     var el = document.createElement('div');

     el.className = 'marker';

     var el1 = document.createElement('p');

     el.appendChild(el1);

     var el2 = document.createElement('span');

     el1.appendChild(el2);

     new mapboxgl.Marker(el)

         .setLngLat(marker.geometry.coordinates)

         .addTo(map);

 });

 </script>

 </body>

 </html>

mapbox展示动态图标的更多相关文章

  1. ViewPager使用记录2——展示动态数据

    ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...

  2. [UE4]Throbber，横向动态图标

    一.Throbber跟Circular Throbber一样,都是用来提示玩家后台有数据正在加载中. 二.Throbber是横向显示动态图标.其他方面跟Circular Throbber一样.Circ ...

  3. 使用tippecanoe把GeoJSON制作成供mapbox展示的矢量切片vectortile

    本文记录一下把geojson格式的数据制作成本地的矢量切片,并在mapbox中展示的过程. 1.切片 1.1 矢量数据需要先转换为geojson,如果是shp格式可以使用QGIS或者下载shp2gwo ...

  4. Layui 解决动态图标不动的问题

    <i class="layui-icon layui-icon-face-smile" style="color: red; font-size: 100px;&q ...

  5. Latex中也能展示动态图？

    技术背景 在学术领域,很多文档是用Latex做的,甚至有很多人用Latex Beamer来做PPT演示文稿.虽然在易用性和美观等角度来说,Latex Beamer很大程度上不如PowerPoint,但 ...

  6. iOS - 开发一套代码多个app展示不同图标和名称

    引言 公司项目重构之后,有了相对比较完善的开发体系,首先git分支分为日常.预发.生产三个主要分支,开发阶段都在日常(daily)分支下开相应功能的feature分支,开发完再合并. 我的iOS工程需 ...

  7. 简单的Django向HTML展示动态图片 案例——小白

    目标:通过Django向HTML传送图片展示 我的天哪,真是膈应人,网上的案例都不适合我,感觉所有的解决办法在我这里都不行. 好吧~ 是我菜,看不懂人家的代码,那句话叫啥来着?一本好经被傻和尚念歪了. ...

  8. 129_Power Pivot&Power BI DAX不同维度动态展示&动态坐标轴

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 某天在和那还是叫我大铁吧 交流关于季度&月度同时展示的问题,感概中国式报表真的需求很微妙. 下面来看看到 ...

  9. 酷炫的SVG 动态图标

                                                      在  loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几 ...

随机推荐

  1. Java操作word转pdf

    如果转换后出现乱码,是doc格式的文档的话请转换为docx!!! 下载相关jar包和一个授权到2099年的凭证文件. 链接: https://pan.baidu.com/s/1xudkKqR1-TLL ...

  2. Message高级特性

    一.延迟和定时消息投递 1 xml中配置schedulerSupport属性为true 2 每小时都会发生消息被投递10次,延迟1秒开始,每次间隔1秒: TextMessage message = s ...

  3. RDS for MySQL 逻辑备份文件恢复到自建数据库

    使用MySQL自带的 mysqldump 工具可以通过逻辑备份文件恢复数据库,本文将介绍详细的逻辑备份恢复数据库操作步骤. 说明 通过物理备份文件恢复到自建数据库请参见RDS for MySQL 物理 ...

  4. pymongo基础使用方法

    本文通过文章同步功能推送至博客园,排版可能会有所错误,敬请见谅! 1.客户端初始化 初始化MongoDB客户端 client = pymongo.MongoClient('localhost',270 ...

  5. sping+redis实现消息队列的乱码问题

    使用spring支持redis实现消息队列,参考官方样例:https://spring.io/guides/gs/messaging-redis/ 实现后在运行过程中发现消费者在接收消息时会出现乱码的 ...

  6. CCF 201803-1 跳一跳

    题目: 问题描述 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱. 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游戏结束. 如果跳到了方块上,但没有跳到方块 ...

  7. matlab cell

    cell元包是matlab中提供的一种数据类型,功能强大. 关于cell的创建: 1.跟一般创建举证一样,直接使用C = {A B D E}这种形式,不过这里把"[]"改成了}&q ...

  8. Go 修改字符串中的字符（中文乱码）

    问题复现:修改字符串的第一个中文 先对原字符串做切片,然后进行拼接,得到新的字符串 func ModifyString(str string) string { tempStr := str[1:] ...

  9. 安装mysql采坑记录

    安装之前彻底卸载之前的mysql,再次安装,初始化数据库那一步失败. 再次彻底卸载mysql,把原先的安装路径的文件夹删除,文件夹路径:C:\ProgramData,再次安装,成功. 总结:重装mys ...

  10. 关于vue.js的部分总结

    1.MVVM和MVC的区别: MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型 模型:后端传递的数据 试图:所看到的页面 视图模型:mvvm模式的核心,它是连接vie ...