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. jmeter BeanShell实例-----两个变量之间的断言对比(转)

    jmeter BeanShell实例-----两个变量之间的断言对比 在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行,总是有人来问怎么写呢.这里写一个简 ...

  2. AtCoder练习

    1. 3721 Smuggling Marbles 大意: 给定$n+1$节点树, $0$为根节点, 初始在一些节点放一个石子, 然后按顺序进行如下操作. 若$0$节点有石子, 则移入盒子 所有石子移 ...

  3. LOJ6583 ICPC World Finals 2019何以伊名始（广义后缀自动机）

    对trie建SAM,询问串倒过来跑到的节点的|right|即为答案. #include<bits/stdc++.h> using namespace std; #define ll lon ...

  4. Merkle树

    在分布式系统.P2P应用中或者是区块链中,会经常使用一种数据结构Merkle tree(默克尔树),这里我们将详细讨论一下这个常用数据结构. Merkle tree Merkle树看起来非常像二叉树, ...

  5. （十四）SpringBoot之事务处理

    一.简介 ssh ssm都有事务管理service层通过applicationContext.xml配置,所有service方法都加上事务操作: 用来保证一致性,即service方法里的多个dao操作 ...

  6. JSON和XML格式与对象的序列化及反序列化的辅助类

    下面的代码主要是把对象序列化为JSON格式或XML格式等 using System; using System.Collections.Generic; using System.Globalizat ...

  7. Python练习_Python初识_day1

    题目 1.作业 1.简述变量命名规范 2.name = input(“>>>”) name变量是什么数据类型? 3.if条件语句的基本结构? 4.用print打印出下面内容: ⽂能提 ...

  8. Marketing Cloud contact主数据的csv导入

    使用这个mock数据生成器网站https://www.mockaroo.com/b6790790,创建一个基于Marketing Cloud contact schema的csv文件. 如果偷懒的话, ...

  9. [LeetCode] 17. 电话号码的字母组合 ☆☆☆(回溯) ###

    描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23"输出:[&q ...

  10. Linux下源码包安装Swoole及基本使用 转

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/msllws/article/details ...