技术 | Mapbox 教你如何实现地理围栏功能

地理围栏（Geo-fencing）是 LBS 的一种新应用，就是用一个虚拟的栅栏围出一个虚拟地理边界。当手机或者其它带 GPS 定位的设备进入、离开某个特定地理区域，或在该区域内活动时，平台可以接收通知和警告。

地理围栏应用非常广泛，下面列举了一些地理围栏的应用场景：

• 车辆监控与管理

• 线下区域社交活动

• 儿童区域报警

• 商场发送的优惠券push消息

• ...

今天我们就教大家使用 Mapbox GL JS 去做一个地理围栏应用。

应用场景

本示例中，我们在上海的南京西路划了一块收费区域，当有车辆进入这个区域时通知并计入费用，当有车辆离开这个区域的时候也进行通知。

1. 添加收费区域

创建一块收费的区域（地理围栏）。在这里我们使用 geojson 格式定义了一块多边形，点击这里下载示例多边形下载，下面的代码块演示了怎么将这个这块区域加入我们的地图中：

map.on('load', function() {    // initialize the congestion zone data and layer    map.addSource('zone', {      type: 'geojson',      data: turf.merge(buffered)    });
   map.addLayer({      id: 'zone-line',      source: 'zone',      type: 'line',      paint: {        'line-width': 5,        'line-opacity': .5,        'line-color': '#C96F16'      }    }); });

2. 判断车辆是否在区域内

我们使用了turf.js 作为我们图形算法库，使用 turf.within 去测试多个点是否在一个多边形内，或者使用 turf.insidex 去测试一个点是否在多边形内。并在使用turf 的时候设置通知函数来通知用户。

if (!current_car.inside && turf.inside(p, zone)) {    ... }

3. 示例中的车辆路径 

在上面的示例中我们使用Mapbox的Direction API 接口来实现了车辆的行走和模拟，有兴趣的同学可以去我们的网站上去查看文档。

4. 地理围栏示例

https://v.qq.com/txp/iframe/player.html?vid=j1322q8bwxv&width=500&height=375&auto=0

是不是非常酷炫啊，您还可以通过Mapbox微信公众号跟我们分享您对地理围栏（Geo-fencing）的见解和应用。