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写成的,寥寥几 ...
随机推荐
- 了解 DML、DDL、DCL
一.DML DML(Data Manipulation Language)数据操纵语言: 最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些操作 S ...
- 方法区（关于java虚拟机内存的那些事）
<深入理解 java 虚拟机> 读书扩展 作者:淮左白衣 写于 2018年4月13日21:26:05 目录 方法区 图例(方法区中都保存什么) 类型信息 类型的常量池 (即运行时常量池) ...
- PAT（B）1003 我要通过！（Java）
1003 我要通过! 题目 判断字符串是否符合给定的规则.更多内容点击标题. 参考博客 ValarMorghulis的博客 分析 规律:num_a * num_b = num_c.字符串a中字 ...
- CentOS7 服务器连接超时自动断开问题解决
背景 现在的客户们都开始使用云服务器了,还要通过堡垒机才给访问权限,这种方式访问方式以前都是银行的"专利",不过也间接说明其他行业的信息化也越来越普及了.今天主要是因为分配给我的这 ...
- Win10安装PyQt5与Qt Designer
1.直接在cmd中通过pip安装PyQt5 1 pip install pyqt5 会自动下载PyQt5以及sip并安装,因为PyQt5不再提供Qt Designer等工具,所以需要再安装pyqt5- ...
- 详解为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- 微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...
- [LeetCode] 219. Contains Duplicate II ☆(存在重复元素2)
每天一算:Contains Duplicate II 描述 给出1个整形数组nums和1个整数k,是否存在索引i和j,使得nums[i] == nums[j] 且i和j之间的差不超过k Example ...
- Netty——基本使用介绍
https://blog.csdn.net/haoyuyang/article/details/53243785 1.为什么选择Netty 上一篇文章我们已经了解了Socket通信(IO/NIO/AI ...
- innodb是如何巧妙实现事务隔离级别-转载
原文地址:innodb是如何巧妙实现事务隔离级别 之前的文章mysql锁机制详解中我们详细讲解了innodb的锁机制,锁机制是用来保证在并发情况下数据的准确性,而要保证数据准确通常需要事务的支持,而m ...