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. kubernetes 部署ingress

    kubernetes Ingess 是有2部分组成,Ingress Controller 和Ingress服务组成,常用的Ingress Controller 是ingress-nginx,工作的原理 ...

  2. 关于db2中listagg函数开发中的体验

    一.首先解释一下可能会查询的基础问题: 1.1db2 “with ur”是什么意思: 在DB2中,共有四种隔离级:RS,RR,CS,UR.以下对四种隔离级进行一些描述,同时附上个人做试验的结果.隔离级 ...

  3. Java搭建环境和工具安装详细教程

    .一.搭建java运行环境 总体分为两个步骤 1.下载JDK( java  dovelop kit 简称 java 开发工具) 首先我们直接下载java开发工具包JDK,转到Oracle官网 下载链接 ...

  4. JDBC（Java项目使用Oracle数据库）

    Java项目中使用Oracle数据库(Eclipse) 前言 这学期选了Oracle数据库这门课,于是自己下载了Oracle11gR2版本的数据库.在这之前我一直用的是MySQL.虽然两者教程差不多, ...

  5. C# 注册windows 服务

    sc delete CCGSQueueService sc create CCGSQueueService binpath= "D:\DKX4003\services\CCGSQueueSe ...

  6. PAT-1012 The Best Rank (25 分) 查询分数对应排名(包括并列)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  7. RESTful接口开发

    package com.aaaaaa.manager.controller; import org.springframework.beans.factory.annotation.Autowired ...

  8. Docker多阶段构建实战(multi-stage builds)

    在编写Dockerfile构建docker镜像时,常遇到以下问题: RUN命令会让镜像新增layer,导致镜像变大,虽然通过&&连接多个命令能缓解此问题,但如果命令之间用到docker ...

  9. 验证 vector = 是深拷贝还是浅拷贝

    #include <vector> using namespace std; int main() { int w=1920; int h = 1080; vector<int> ...

  10. MVC，MVP 和 MVVM 的图示（原理）

    一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面. 控制器(Controller):业务逻辑 模型(Model):数据保存 各部分之间的通信方式如下. View 传送 ...