Visualizing OpenStreetMap Nanjing Contribution

早上在prismatic上看到mapbox的一篇博客,介绍通过TileMill可视化OSM的贡献者,非常酷。于是我在南京的地图上也做了一个这样的可视化。

一个详细的大图在这里。虽然只做了南京的五个主要贡献者,基本上涵盖了大部分数据。

图例就不专门输出了
[user = 'Sunng'] { marker-fill: @magenta;}
[user = 'fuwuyuan'] { marker-fill: @blue;}
[user = 'sinopitt'] {marker-fill: @yellow;}
[user = 'larryy'] {marker-fill: @green;}
[user = 'zhengz'] {marker-fill: @red;}

MapBox家的东西真的非常酷,这家的技术以nodejs为主,围绕osm开发了不少产品。最近比较大的新闻,比如4sq转到osm上,其实就是转到这家的osm服务上。有兴趣你可以关注一下!

GPS数据采集与OpenStreetMap编辑

简单介绍一下通过GPS采集道路数据并上传到OpenStreetMap的流程。

采集

首先你需要一个GPS数据记录器,或者叫做GPS Logger。这类产品在淘宝上可以找到很多,台湾的长天(HOLUX)是相对价廉物美的品牌。我的设备是HOLUX m1000c,下文以此为例。

m1000c的使用非常简单。开机之后,指示GPS的黄灯点亮,设备开始搜索GPS卫星。根据你所出的位置、遮挡情况以及天气情况,搜星的时间略有不同。当GPS黄灯开始闪烁时Logger即开始记录数据,默认情况下m1000c每隔5秒记录一次数据。每次重启后,Logger都会新开一条记录。

导入

对Windows用户,将Logger通过USB线与电脑连接后,可以利用随机附带的软件将数据导入为GPX格式。对Linux用户,可以利用gpsbabel导入数据:
gpsbabel -t -i m241 -f /dev/ttyACM0 -o gpx -F myfile.gpx

其中:

  • -t 表示数据为track类型
  • -i m241 输入格式为HOLUX m241,m1000c使用的是这种格式
  • -f /dev/ttyACM0 输入设备是/dev/ttyACM0
  • -o gpx 输出格式是gpx
  • -F 输出文件myfile.gpx

在一些发行版上,需要root权限访问/dev/ttyACM0,所以不要忘记将输出的文件chown给普通用户。

导入完成后可以利用下面的命令清空Logger
gpsbabel -i m241,erase_only=1 -f /dev/ttyACM0

在Windows和Linux上都可以使用Viking查看导入的数据:

  • 启动viking
  • 添加一个OSM地图图层: Layers->New Map Layer
  • 导入GPX数据: File->Append File…
  • 下载OSM地图,右键点击左侧的Map图层,Download Missing Onscreen Maps

Screenshot at 2011-10-05 09:45:20

编辑

Windows和Linux用户都可以通过Merkaartor编辑OSM数据。

启动Merkaartor,导入GPS数据: File->Import。
选择左侧的GPS图层,对需要导入的数据,右键点击Extract Drawing Layer将GPS转换为可编辑数据。
Screenshot at 2011-10-05 10:57:17

根据实际情况编辑道路数据的属性。对GPS转换的数据,选择菜单Feature->Force Upload,将其加入dirty set准备上传。点击Upload即可将数据上传到OpenStreetMap。

OpenLayers extension for HeatCanvas

As the screenshot shows, now you can embed HeatCanavs in your OpenLayers application, as well as OpenSteetMap.

Three steps to create such kind of map:

1. Create HeatCanvas layer:

// constructor params:
// name, OpenLayers map instance, OpenLayers layer options, HeatCanvas options
var heatmap = new OpenLayers.Layer.HeatCanvas("HeatCanvas", map, {},
        {'step':0.3, 'degree':HeatCanvas.QUAD, 'opacity':0.8});

2. Feed some data on layer:

heatmap.pushData(latitude, longitude, value);

3. Add layer to map:

map.addLayer(heatmap);

The live demo is hosted on github:
http://sunng87.github.com/heatcanvas/openstreetmap.html

HeatCanavs is a heat map implementation on HTML5 canvas and WebWorker API.