mapbox展示动态图标
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展示动态图标的更多相关文章
- ViewPager使用记录2——展示动态数据
ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...
- [UE4]Throbber，横向动态图标
一.Throbber跟Circular Throbber一样,都是用来提示玩家后台有数据正在加载中. 二.Throbber是横向显示动态图标.其他方面跟Circular Throbber一样.Circ ...
- 使用tippecanoe把GeoJSON制作成供mapbox展示的矢量切片vectortile
本文记录一下把geojson格式的数据制作成本地的矢量切片,并在mapbox中展示的过程. 1.切片 1.1 矢量数据需要先转换为geojson,如果是shp格式可以使用QGIS或者下载shp2gwo ...
- Layui 解决动态图标不动的问题
<i class="layui-icon layui-icon-face-smile" style="color: red; font-size: 100px;&q ...
- Latex中也能展示动态图？
技术背景 在学术领域,很多文档是用Latex做的,甚至有很多人用Latex Beamer来做PPT演示文稿.虽然在易用性和美观等角度来说,Latex Beamer很大程度上不如PowerPoint,但 ...
- iOS - 开发一套代码多个app展示不同图标和名称
引言 公司项目重构之后,有了相对比较完善的开发体系,首先git分支分为日常.预发.生产三个主要分支,开发阶段都在日常(daily)分支下开相应功能的feature分支,开发完再合并. 我的iOS工程需 ...
- 简单的Django向HTML展示动态图片 案例——小白
目标:通过Django向HTML传送图片展示 我的天哪,真是膈应人,网上的案例都不适合我,感觉所有的解决办法在我这里都不行. 好吧~ 是我菜,看不懂人家的代码,那句话叫啥来着?一本好经被傻和尚念歪了. ...
- 129_Power Pivot&Power BI DAX不同维度动态展示&动态坐标轴
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 某天在和那还是叫我大铁吧 交流关于季度&月度同时展示的问题,感概中国式报表真的需求很微妙. 下面来看看到 ...
- 酷炫的SVG 动态图标
在 loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几 ...
随机推荐
- [转帖]Pivotal Greenplum 6.0 新特性介绍
Pivotal Greenplum 6.0 新特性介绍 https://cloud.tencent.com/developer/news/391063 原来 greenplum 也是基于pg研发的. ...
- Selenium绕过登录的实现
1.使用命令行启动Chrome:Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -remote-debugging ...
- 《Mysql 锁 - 概述》
一:锁类型(加锁范围区分类型) - MySQL里面的锁可以分为:全局锁.表级锁.行级锁. 二:全局锁 - 作用 - 对整个数据库实例加锁. - 加锁方式 - MySQL提供加全局读锁的方法:Flus ...
- PHP和Memcached - Memcached的介绍及常用命令
1.什么是Memcached 自由开源的,高性能,分布式内存对象缓存系统,分布式是基于客户的缓存系统,服务器之间是不相互通讯的. 2.Memcached的使用场景 储存session. 缓存数据. 解 ...
- 解读PHP面试-高并发解决方案类考察点
整理自慕课网360大牛全面解读PHP面试 ,购买链接:https://coding.imooc.com/class/133.html 1.高并发和大流量解决方法 真题回顾 PHP如何解决高并发大流量问 ...
- Yii2 基于header 实现接口版本控制
Yii2 官方给出的方案是基于url的版本控制,但是我们的versoin放在header里面,需要通过header来进行版本控制,实现如下: 首先在基类中实现actions,actions是针对con ...
- Lucene全文检索_分词_复杂搜索_中文分词器
1 Lucene简介 Lucene是apache下的一个开源的全文检索引擎工具包. 1.1 全文检索(Full-text Search) 1.1.1 定义 全文检索就是先分词创建索引,再执行搜索的过 ...
- MyBatis_02 框架
今日内容 动态SQL语句 Xml方式 注解方式 MyBatis的缓存 MyBatis的关联查询 MyBatis逆向工程 动态SQL语句 动态SQL是什么 就是相对与固定SQL.就是通过传入的参数不一样 ...
- MySQL NULL 使用带来的坑
MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...
- 【转载】Java枚举的使用
枚举类型可以取代以往常量的定义方式,即将常量封装在类或接口中.此外,枚举类型还提供了安全检查功能.枚举类型本质上还是以类的形式存在. 1.使用枚举类型设置常量以往设置常量,通常将常量放置在接口中,这样 ...