[Mapbox GL]点的动画效果

更新每帧的GeoJSON资源实现点的动画效果

<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title></title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style>
</head>
<body><div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v9',center: [0, 0],zoom: 2
});var radius = 20;function pointOnCircle(angle) {return {"type": "Point","coordinates": [       /* 计算坐标 */Math.cos(angle) * radius,Math.sin(angle) * radius]};
}map.on('load', function () {   /* 添加load事件监听器 */// Add a source and layer displaying a point which will be animated in a circle.map.addSource('point', {"type": "geojson",     /* geojson类型数据 */"data": pointOnCircle(0)});map.addLayer({"id": "point","source": "point","type": "circle",     /* circle类型layer */"paint": {"circle-radius": 10,      /* circle半径，单位像素 */"circle-color": "#007cbf" /* circle颜色 */}});function animateMarker(timestamp) {// Update the data to a new position based on the animation timestamp. The// divisor in the expression `timestamp / 1000` controls the animation speed.map.getSource('point').setData(pointOnCircle(timestamp / 1000));  /* getSource(id)获取id的source，setData()设置source的数据*/// Request the next frame of the animation.requestAnimationFrame(animateMarker); /* requestAnimationFrame() 可以实现动画效果，本例即使典型用法，当然也可以返回一个句柄，必要时取消动画 */}// Start the animation，执行函数实现动画animateMarker(0);
});
</script></body>
</html>

[Mapbox GL]点的动画效果相关推荐

初识mapbox GL
一.概述最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发.有 ...
GIS开发：推荐Mapbox gl解决方案
在二维地图的开发中,实现类似于百度.高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案. https://docs.mapbox.com/mapbox-gl-js/api/ 类似 ...
Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...
Mapbox GL JS介绍及使用
Mapbox GL JS介绍及使用:(以web端基本交互实现为例) Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox st ...
Mapbox GL可视化之热力图
本篇使用Mapbox GL JS实现数据的热力图可视化,以截止到2020-03-01日的新冠疫情作为示例数据. 一什么是热力图热力图使用颜色的深浅表示数值的变化,从而表示数据的分布情况,这使得用户 ...
喜大普奔——Mapbox GL JS支持多种投影了
1. 写在前面 Mapbox GL JS 在v2.6.0之前不支持投影,默认地图是Mercator投影方式,如果项目中使用其他类型的投影(比如加载经纬度直投4326的地图切片),必须通过修改源码的方式 ...
android+酷炫动画效果,Android酷炫动画效果之3D星体旋转效果
在Android中,如果想要实现3D动画效果一般有两种选择:一是使用Open GL ES,二是使用Camera.Open GL ES使用起来太过复杂,一般是用于比较高级的3D特效或游戏,并且这个也不是 ...
Mapbox GL JS实现移动端H5实时多边形（涂鸦）绘制
关于使用MapBox GL进行图形绘制,很多人都在使用mapbox-gl-draw.但是它只是封装了一些简单的点.线.面的绘制功能.最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制,要求实 ...
001：Mapbox GL加载基础的地图
第001个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载最基础的 Mapbox GL地图 . 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目 ...

[Mapbox GL]点的动画效果

[Mapbox GL]点的动画效果相关推荐

最新文章

热门文章