等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围。前段时间看到一个站点,该站点能够计算自驾、骑行、步行三种方式的等时圈。效果如下图
image
mapbox出品的图还是相当漂亮的,但毕竟是别人的东西,能自己做出来当然是好的(这个功能还是学生的时候就想做)。那就试试呗。
当然先看看mapbox是怎么做的,查看站点使用什么接口,如下图发生数据请求,接口连接:
image
对所有接口坐标进行分析,发现所有坐标的分布如下图:
image
从这些点就能猜出mapbox实现思路
image.png
参照这个思路,借助mapbox的接口完全能够自己实现等时圈功能。
生成网格,使用turf实现,上代码:
var centerPoint = turf.point([116.46, 39.92]);
//生成缓冲区
var buffered = turf.buffer(centerPoint, 12, {units: 'kilometers'});
//根据缓冲区生成bbox
var bbox = turf.bbox(buffered);
var cellSide = 1;
var options = {units: 'kilometers'};
//生成网格
var grid = turf.pointGrid(bbox, cellSide, options);
利用mapbox接口计算网格各点时间属性。
/**
*
* @param startPoint
* @param endPoints
* @param travelType walking driving,cycling
*/
function makeRequest(