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写成的,寥寥几 ...
随机推荐
- 正则与re模块
一.正则表达式 在线测试工具 http://tool.chinaz.com/regex/ 1.字符组 在同一个位置可能出现的各种字符组成一个字符组,在正则表达中用[ ]表示 一个正则就是一条匹 ...
- python_openCV例程遇到error: (-215) !empty() in function cv::CascadeClassifier::detectMultiScale的简单解决方法
需要把haar分类器训练的结果xml数据放在名为haarcascades的文件夹下进行调用. 将: face_cascade = cv2.CascadeClassifier('haarcascade_ ...
- S03_CH06_AXI_VDMA_OV7725摄像头采集系统
S03_CH06_AXI_VDMA_OV7725摄像头采集系统 本课程将对Xilinx提供的一款IP核--AXI VDMA(Video Direct Memory Access) 进行详细讲解,为后续 ...
- eclipse智能提示报错(to avoid the message, disable the...)
然后这里可能会再报别的错误 我的做法是 再重新将 code recommenders 打开 ********************************** 为什么会出现 这样错误呢 ? 简 ...
- C#项目中窗体的ShowDialog()和show()的区别
ShowDialog()弹出的窗体为模式化窗体: show()弹出的窗体为非模式化窗体: 模式化窗体与非模式化窗体的区别: 模式化窗体会使程序中断,直到关闭窗体: 打开窗体后不能替换到其他窗体: 子窗 ...
- spring.factories配置文件的工厂模式
在springboot的各个依赖包下,我们经常看到META-INF/spring.factories这个文件.spring.factories文件的内容基本上都是这样的格式: # Initialize ...
- 关于element ui滚动条使用
element ui 自带的滚动条使用 在容器的直接外层添加 (需要展现滚动条的那一级) <el-scrollbar style="height:100%"></ ...
- vue去哪儿网项目环境配置
一.首先安装node.js 根据自己的(windows或mac)系统进行安装node,在开发环境中一般安装LTS版本.安装成功后,在终端输入"node -v"和"npm ...
- 【shell】shell基础
一.数据类型 1.shell变量 运行shell时,会同时存在三种变量: 1) 局部变量 局部变量在脚本或命令中定义,仅在当前shell实例中有效,其他shell启动的程序不能访问局部变量. 2) 环 ...
- 【python+ddt】DDT模块的使用
ddt模块包含了一个类的装饰器ddt和两个方法的装饰器: data:包含多个你想要传给测试用例的参数: file_data:会从json或yaml中加载数据: unpanck:通常data中包含的每一 ...