交互式地图上可视化街道方向

原文地址 交互地图上可视化街道方向

不同的规划与建设赋予城市不同的灵魂,自然也会给人以不同的感受，尤其在你通过地图来观察城市的时候。一些城市严格的网格化排列，另一些似乎看不出其结构，一些情况下只有当你仔细观察一个城市时，模式才会出现，每个街区都有自己独特的风格。我们能可视化这些模式吗？
Seth Kadish和Geoff Boeing向我们展示了一种很棒的方式可视化这些模式。他们将一个圆分成许多朝向不同角度相同的扇形范围，根据扇形的方向判断有多长的道路段落在这个范围内，制作了极性柱状图，让我们深入了解每个特定城市的街道模式：

道路行驶方向可视化 by

底特律城市街道方向
当我看到他们工作的时候，我豁然开朗，多好的反映城市变化的可视化方法啊！但是我想更深一步探索。我生活的城市基辅如果以这种方式可视化会是什么样的？还有哪些非常喜欢的但知名度稍弱的城市？同一个城市不同街区？或者，在更大的尺度上，整个欧洲的道路网将是什么样的？

对每个你感兴趣的城市提取并处理道路数据明显是一个耗时的工作。我能够在一个交互式地图上以这种方式可视化吗？这对mapbox 矢量地图来说一个完美的应用实例——由于地图数据在客户端，我们能够迅速分析与可视化世界上任何地点的道路方向。下面是这个demo的链接

How I build it

完整的项目大概有80行代码，初始化地图之后，每次改变当前浏览器窗口地图范围我们就会更新可视化结果

map.on('load', function () {updateOrientations();map.on('moveend', updateOrientations);
});

每次地图范围更新，我们用一行代码就可以取到当前浏览器范围内所有数据,数据以GeoJSON格式返回以便于处理

var features = map.queryRenderedFeatures({layers: ['road']});

为了确保我们仅仅可视化当前浏览器视图范围内的道路，我们使用一个lineclipJS库用屏幕视图范围对道路要素进行此裁剪

var clippedLines = [];
for (var j = 0; j < lines.length; j++) {clippedLines.push.apply(clippedLines, lineclip(lines[j], bbox));
}

计算每一条道路线段的倾向与长度在当前视图道路线段较多时是十分耗时的。所以我们使用cheap-ruler,一个快速计算距离的JS库，其代码样例如下：

var ruler = cheapRuler(map.getCenter().lat);
...
for (var i = 0; i < line.length - 1; i++) {var bearing = ruler.bearing(line[i], line[i + 1]);var distance = ruler.distance(line[i], line[i + 1]);...

对每一条道路线段，我们根据其倾向对其进行归类放入相应的“箱子”（这里指的是上图中每一个小扇形），统计落入每个“箱子”里的道路线段总长度进而计算每个“箱子”半径（小扇形的半径），注意双行道统计两次，代码样例如下：

var k0 = Math.round((bearing + 360) * numBins / 360) % numBins;
var k1 = Math.round((bearing + 180) * numBins / 360) % numBins;
bins[k0] += distance;
if (isTwoWay) bins[k1] += distance;

最终我们得到了表示一个city道路倾向的直观图表，这便是可视化的力量！

坚持翻译一些JS实现的GIS相关的有趣的例子

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！