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写成的,寥寥几 ...
随机推荐
- 并行forearch的使用及测试（Parallel.Foreach）
using System; using System.Collections.Generic; using System.Diagnostics; using System.Threading.Tas ...
- VC++:创建，调用MFC动态链接库(扩展DLL)
概述 DLL(Dynamic Linkable Library)动态链接库,Dll可以看作一种仓库,仓库中包含了可以直接使用的变量,函数或类. 仓库的发展史经历了"无库" ---& ...
- Python开发【第七章】：异常处理
一.异常处理 1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! #异常处理 list = [&qu ...
- Error:Could not find method google() for arguments [] on repository container
Error:Could not find method google() for arguments [] on repository container. Consult IDE log for m ...
- Redis的bind的误区（转）
原文1:https://blog.csdn.net/cw_hello1/article/details/83444013 原文2:https://www.cnblogs.com/suiyueqiann ...
- Task执行多次
项目中,曾经出现过启动时数据库连接数瞬间增大,当时并没有注意该问题. 后期,由于Task任务多次执行,才着手查看这个问题,经排查,由于tomcat中webapp配置多次,导致webapp被扫描多次(配 ...
- IOC实现-Unity
.NET中实现IOC有很多方式,比如:Unity.Ninject.Autofac.MEFNinject的实现参考<Pro ASP.NET MVC3.5 FrameWork>下面给出的是Un ...
- 关于__new__和__init__
关于__new__和__init__ 例如一个类 class Foo(object): def __init__(self): print(1) def __new__(self): print(2) ...
- 学习笔记-Rabin-Karp哈希
在数学一本通上看过这两人名字,现在又出现了... 思想: 用一个整数表示一个字符串 \(w_{str}\)=(\(a_0\) \(p^{n-1}\)+\(a_1\) \(p^{n-2}\)+...+\ ...
- mysql8中查询语句表别名不能使用 “of”
今天在迁移一个项目的时候,发现有一个sql报错,但是语句跟迁移之前完全一样,所以想来应该是 mysql 版本差异导致的. 迁移之前版本:5.6.28(腾讯云) 迁移之后版本:8.0.16(阿里云) 新 ...