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写成的,寥寥几 ...
随机推荐
- [转帖]linux常用命令大全（linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习）
linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...
- 华为S5700系列交换机配置文件导出、导入
一.导出 配置用户名密码,使能ftp ftp server enable aaa local-user putty password cipher putty123 local-user putty ...
- 理解Python函数和方法
什么是函数? 函数是抽象出的一组执行特定功能的重复代码,通俗理解,就是对一些重复的工作进行封装和然后直接调用,避免重复造轮子. Python中的函数如何定义? 使用def关键字,结构如下: def 函 ...
- 5-9 c语言之【文件】
最近学习了在c语言中对文件的处理(此为win10操作系统),由根据<c标准库>一书针对文件处理相关函数进行了一些总结 在这里只总结了<stdio.h>头文件内的函数,头文件&l ...
- 在Yii2中集成Markdown编辑器
安装命令: composer require ijackua/yii2-lepture-markdown-editor-widget:dev-master 可能会遇到的问题 如果在下载依赖包的过程中出 ...
- Junit 学习笔记
目录 Junit 学习笔记 1. 编写测试用例时需要注意 2. 出现结果分析 3. Junit 运行流程 4. Junit 常用注解 5. Junit 测试套件的使用 6. Junit 参数化设置 J ...
- Golang语言编程规范
Golang语言编程规范 一.说明 编程规范好,可避免语言陷阱,可有利团队协作,有利项目维护. 正常的Go编程规范有两种:编译器强制的(必须的),gofmt格式化非强制的(非必须). Go宣告支持驼峰 ...
- hdu 4333 扩展kmp+kmp重复字串去重
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4333 关于kmp next数组求最短重复字串问题请看:http://www.cnblogs.com/z ...
- sql注入测试(4)--如何防止该类缺陷发生
检查用户输入的合法性,确信输入的内容只包含合法的数据,数据检查应当在客户端和服务器端都执行之所以要执行服务器端验证,是为了弥补客户端验证机制脆弱的安全性.在客户端,攻击者完全有可能获得网页的源代码,修 ...
- springboot mvc自动配置（一）自动配置DispatcherServlet和DispatcherServletRegistry
所有文章 https://www.cnblogs.com/lay2017/p/11775787.html 正文 springboot的自动配置基于SPI机制,实现自动配置的核心要点就是添加一个自动配置 ...