在做与交通有关的项目时，往往要做一些轨迹数据的可视化，这里介绍了利用Mapbox平台加OSRM进行轨迹数据可视化的方法。首先需要利用OSRM生成轨迹数据，然后把轨迹数据或者说是路径存储至mysql数据库，最后提取相应数据传入Mapbox，完成可视化的工作。

author: @Huji

版权归作者所有，任何形式转载请联系作者。

最近在做自行车调度方面的项目，希望能够呈现现有的调度轨迹，用可视化的方法让我们能够对现有的调度有一个直观的感受。选择 Mapbox 这一平台主要是看到了一家叫做urbica的可视化公司做的一个 自行车trip的可视化系统 ，这个系统的实现参考了一篇国外的硕士论文Rebalancing Citi Bike——A geospatial analysis of bike share redistribution in New York City，论文内容倒是比较简单，关键还是在实现，下面先放两张图仰慕一下效果。

其实现主要利用了 Mapbox 和 OSRM ，P.S. 另外还采用了 D3.js 来绘制一些滑动条啊、图表啊之类的，这个暂时还没研究，恩，列入to do list。

Mapbox

Mapbox国内13年就有报道过了，感兴趣的同学可以点下面的链接。 创立3年没要投资人一分钱，没销售人员——个性定制地图网站Mapbox是如何服务900家付费客户，并养活30号员工的

也可以直接点 这里 前往 Mapbox 的官方网站，可以看到很多很漂亮的应用。

Mapbox 实际上是一个平台，提供免费创建并定制个性化地图的服务，可以根据用户需要定制不同风格的地图，在上面加载你的数据图层等等。而上面的这个项目实际使用了 Mapbox GL JS API来进行地图方面的可视化。注意， Mapbox GL JS 是Mapbox提供的一个库，让用户可以方便地将生成的地图嵌入到自己的web应用中。当然，也支持导入到其他地图方案，如ios和android。

可以看到第一张图里面显示了一些自行车和调度车的轨迹，然而原始数据中只有轨迹的起止点，也就是从哪个站点出发，哪个站点还车。

那么，如何将这样的数据匹配到路网上呢？

这就需要用到 Open Source Routing Machine (OSRM) 。这是一个开源的路线生成引擎，给定起止点后，能够在路网中生成一条两点之间的最短路径，其基于的路网数据来自于 OpenStreetMap 。

利用OSRM生成轨迹数据

这一段我们具体来介绍怎么利用OSRM生成轨迹数据。

ORSM开放的api ^[1] 如下

1




    

http://{server}/{service}/{version}/{profile}/{coordinates}[.{format}]?option=value&option=value

在求取路径的时候，还有一些其他的options：

这里给出最基本的python示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13

import requests
def calRoutes(start, stop):
    url = 'http://router.project-osrm.org/route/v1/driving/' + start + ';' + stop + '?geometries=geojson&overview=simplified&steps=false'
    response = requests.get(url)
    data = response.json()
    routes = data["routes"][0]
    return routes
start = '120.38609,30.29742'
stop = '120.32375,30.2905'
routes = calRoutes(start, stop)
print(routes)

输出的结果为：

1

{'duration': 463.1, 'distance': 7129.5, 'legs': [{'distance': 7129.5, 'duration': 463.1, 'summary': '', 'steps': []}], 'geometry': {'type': 'LineString', 'coordinates': [[120.386362, 30.297321], [120.382159, 30.288818], [120.379259, 30.289752], [120.377031, 30.289848], [120.347114, 30.289887], [120.336178, 30.291638], [120.328133, 30.295271], [120.325014, 30.290114], [120.323842, 30.29065]]}}

其实返回的data变量是一个json格式的数据，其中包含三个部分：

因为我们api中没有设置返回多条路径，所以默认返回一条，但是要取出这条路径要访问 data["routes"][0] 。

路径包含的信息参见上面的输出结果，包含了路径的长度，耗时，和各个节点的信息。

将轨迹数据（路径）存入mysql数据库

轨迹数据生成好之后，就需要进行存储，否则每次都要重新再算太麻烦了。 mysql遵守OGC的OpenGIS Geometry Model，支持Point、LineString等多种数据对象，我们这里用到的是LineString。

创建可以存储轨迹这类空间数据的表

当前只有MyISAM引擎的数据表支持地理空间数据的存储，所以在创建数据表的时候必须进行声明。

1
2
3
4
5
6
7

CREATE TABLE driving_routes(
  stationA VARCHAR(16),
  stationB VARCHAR(16),
  duration VARCHAR(32),
  distance VARCHAR(32),
  routes LINESTRING
)ENGINE=MyISAM;

创建后的表结果如下图

插入一条数据

插入数据要用到ST_GeomFromText的函数，将数据转化为数据库内部的几何格式。

1
2
3
4
5
6
7

INSERT INTO `driving_routes` VALUES(
'3942',
'3218',
'239.3',
'3295.2',
ST_GeomFromText('LINESTRING(120.7205165 27.98760837, 120.719859 27.987895, 120.73371 27.987744)')
);

提取数据则相反，

1

SELECT ST_AsText(routes) from `driving_routes`;

其实存为linestring类型之后还可以在sql中进行一些其他操作

例如需要查找一辆车在某一段时间内是否在一段区域内经过，用点来说明的话，就是一个空间坐标点在一个特定时间段内是否包含在一个特定的矩形区域内。 MBRWithin(g1,g2) 函数应该能达到这个功能:

1

SELECT AsText(pnt) FROM `gis` WHERE MBRWithin(pnt,GeomFromText('Polygon(1 1,0 30,30 30,30 0，1 )'))

利用Mapbox进行可视化

请将鼠标移动到图片上并点击可看到大图！！！！

注册并进入studio

首先当然是注册一个mapbox的账号，点击 注册链接 ，在这个页面输入用户名、邮箱、密码进行注册。

完成注册后登陆mapbox，就会进入到studio的界面，如下图所示。

被打码的区域，上面的是用户名，下面这个 access token 是所谓的访问令牌，也就是说，这是每个账户独一无二的一个码，是标明身份的一串字符，在使用Mapbox的API和库函数都需要先提供这个token。

左边一栏中有Home, Styles, Tilesets, Datasets, Status, Classic等选项卡，其功能分别是：

创建一个style

进入studio之后，下面就可以创建一个style。

首先，在home页面下，点击 Go to styles 的按钮或者直接单击左侧的 Styles 选卡。

进入到Styles的页面如下图所示，可以看到6个自带的Style，可以直接编辑使用，但是推荐还是点击圆圈处的 New style 按钮，以这些自带的Style为基础创建自己的Style。

在弹出的窗口中，输入自己的Style的名字，例如Test，然后选择下面的某个自带的Style作为模板，单击create。

单击后就会进入到Style的编辑页面，如下图所示。

双击地图进行放大，我们找到要编辑的区域，例如杭州，然后对某个图层进行编辑。

这里以更改道路名称的颜色为例进行讲解，单击某条道路，就会显示出此处包含的图层，这里包含文字的图层是 road_label_large ，单击此图层或者在左侧找到这一图层，就可以点开此图层的编辑页面，要更改颜色就直接在 color 那一栏选择自己喜欢的颜色即可，地图上会实时的跟随编辑进行调整。

注意 ：这里做的所有操作都会自动保存，想撤销上一步操作的话可以按下 crtl+Z ，为了熟悉studio，你可以先随便试试各种功能，比如字体大小，线型，透明度，icon，placement等等，地图上几乎一切元素都是可以根据需要调整的。点击左侧侧边栏中油漆桶状的Style图标，回到Style界面，能够看到自己刚才创建的 Test Style，在Test右边的选项中点击 Revert to last publish ，即可恢复成上一次 pulish 的样子。

因此，pulish等于说是手动保存的意思！！没事的话不需要publish，确定修改已经完成，并且没有问题的时候才点击编辑界面的左栏右上角的publish按钮进行发布！

上传自己的数据

基本的调整熟悉了之后，下一步就可以上传数据啦！

Mapbox支持多种格式的数据，如GeoJson或者CSV等等，这里我们采用GeoJson为例。把刚才得到的轨迹数据处理成GeoJson的格式 ^[2] 。下面给出一个比较短的GeoJson的文件示例，其中包含两条轨迹数据，属于LineString的类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

{
  "features": [
    {
      "properties": {
        "prop0": "value0"
      },
      "id": "{feature_id}",
      "geometry": {
        "coordinates": [
          [
            120.382304,
            30.288768
          ],
          [
            120.379259,
            30.289752
          ],
          [
            120.377224,
            30.289839
          ],
          [
            120.377248,
            30.30479
          ]
        ],
        "type": "LineString"
      },
      "type": "Feature"
    },
    {
      "properties": {
        "prop0": "value0"
      },
      "id": "{feature_id}",
      "geometry": {
        "coordinates": [
          [
            120.344083,
            30.309248
          ],
          [
            120.344496,
            30.303979
          ],
          [
            120.343989,
            30.303754
          ],
          [
            120.333314,
            30.303028
          ]
        ],
        "type": "LineString"
      },
      "type": "Feature"
    }
  ],
  "type": "FeatureCollection"
}

将上述轨迹数据存为test_routes.geojson文件，然后进行上传。上传之前可以先在这个 检测网站 把内容粘贴进去进行检测，如果格式正确就能绘制出轨迹。

上传数据的步骤如下：

其实可以直接在tileset里面上传geojson文件，或者直接在style中add new layer中上传geojson文件，从dataset里面上传，然后一步步创建tileset，添加到style中，这是最基本最复杂的步骤。熟悉后可以采用更直接的方法。

贴一段网站上的说明： Datasets vs Tilesets Tilesets are fast light, and easy to style. Datasets are lossless, editable, and can’t be styled. Think of Tilesets as the delivery format for the data in your Datasets.

加载数据，发布style

数据上传好了，下一步就是加载。

先回到Style页面，点击 Test 后面的 Edit ，回到刚才创建的 Test Style里面。

点击左侧上方的 + New layer 按钮，再点击 No tileset 处，就可以选择已经有的一些tileset添加到该style中，这里我们选择刚才创建的 test_routes ，然后再点击 create layer （选择 test_routes 之后左边会出现一些filter啊之类的选项，可以做一些设置，感兴趣的话可以再查文档，这里先略过，直接点create就好。）

创建完毕会出现style编辑的页面，双击地图放大到杭州区域，找到我们绘制的两条轨迹，然后可以改变其颜色，还可以做其他设置。

至此，数据的加载就完成了，单击左上角的 publish 按钮就即可完成该style的发布。

创建可视化web端

发布完成后的页面如上图所示，点击 Preview, develop & use ，可以看到使用的相关信息，如下图所示。可以将网页进行分享，可以将生成的style展示到web端，嵌入到Android或者ios的app中等等。其中，我们需要的两条信息是 Style URL 和 Access token 。

另外还需要在style中取得map的经纬度信息和缩放倍数信息，如下图标注的部分。

新建html文件，插入以下内容，按照已经准备好的四条信息替换需要的部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!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.23.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.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 = '您的access token';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: '您的style url', //hosted style id
    center: [120.353031, 30.294875], // starting position，可替换为您自己的地图中心坐标
    zoom: 12.6 // starting zoom，可替换为您自己的地图缩放倍数
});
</script>
</body>
</html>

双击html文件，就可以在浏览器中看到您的web端可视化结果啦。

当然，本教程只是实现了显示了两条轨迹数据在地图上的一个web端，要想实现丰富生动的可视化效果需要更多的数据，并需要更复杂的技术知识：需要将要点线结合，添加icon，在数据的propoties里面添加相关属性，给不同的属性设置不同的style等等。关于Mapbox GL JS如何使用的更多的例子请参见 example ，对example中的功能进行复杂的组合就可以得到类似于开篇中的效果啦~ fighting！