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. Word 英语单词前面的汉字间距变大、Word 英文断词

    1. 前言 在写文档时,在用word穿插敲汉字和英语时,会出现英语单词前面的汉字间的间距突然变大的情况,如何解决? 2. 步骤 1.选中间隙变大的段落,然后右键点击段落 2.然后点击中文版式,把允许西 ...

  2. day0~day13

    day0 day1 day2 day4 day5 day7 day9 day10 day12 day13

  3. python学习-11 运算符2

    布尔值 1.真 true 假false name = 'abc' c = 'c' in name print(c) 运算结果: True Process finished with exit code ...

  4. Asp.net core 学习笔记 2.2 migration to 3.0

    Ef core 3.0 一些要注意的改变 refer : https://docs.microsoft.com/en-us/ef/core/what-is-new/ef-core-3.0/breaki ...

  5. hdu 6208 上一个kmp模板

    #include <cstdio> #include <cstring> #include <iostream> #include <queue> #i ...

  6. Flash播放控件属性详解

    Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写)  语法:AlignMode As Long  说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

  7. TensorType

  8. 关于element ui滚动条使用

    element ui 自带的滚动条使用 在容器的直接外层添加 (需要展现滚动条的那一级) <el-scrollbar style="height:100%"></ ...

  9. Java 之 Hashtable 集合

    Hashtable 集合  java.util.Hashtable<K,V>集合 implements Map<K,V>接口  Hashtable:底层也是一个哈希表,是一个线 ...

  10. Array + two points leetcode.15-3Sum

    题面 Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Fi ...