从拿到班车手册.xls到搜索附近班车地点

起因

七月份要去某厂报道了，异地租房的时候发现想租一个有公司班车的地方，却不知道哪里有班车。辗转流传出班车手册后发现搜索实在是太不方便了，于是有了一个主义，想做一个可以搜索房子地址，找出附近班车点（类似大众点评的定位搜索附近餐馆的功能）。现在做的差不多了，发现好像本来公司就有做这个东西。。权当学一下一些位置匹配的技术了。
最后成果是这样子的：

大头针是输入的位置（福田中学），附近的蓝点就是一个一个站点。由于一个站点他会在上班下班夜班不同的线路的不同站点位置，会在不同时刻到达，因此聚合为多个同一站点的数据会聚合为一个点。点击蓝色的站点就会在下面显示出这个站点所在的所有线路。

具体实现

下面将分为几个步骤讲一下具体使用了什么方法什么技术：

1. 原始数据转换成我们需要的数据

一开始拿到的是excel手册，所以我们有的原始数据是长成这样的（忽略的从excel中导出的步骤）：
['A(B门口)(07:30)→C(政府前100米天桥下)(07:45)→D(2站台前10米)→E→F(09:12)', ...路线二, ...路线三]
然后我们需要做的事情是：

1. 从数组里把每一条线路的站点拆分成一个个独立的单元
   这一步比较简单，str.split('→')

2. 每一个单元分离出站点和时间
   这一步要做的就多一点点了，需要用到正则匹配，而且因为站点的名字其实是有多种的，需要考虑到多种情况。因此我的方法是：

   1. 先用/(.*)(\([0-9:]*\))/分离时间和站点，因为只有时间是左右括号内只包含数字和:的。
   2. 实际上站点名称里有一些非法字符，因此还需要进行一步过滤station.replace(/([^\u4e00-\u9fa5\(\)\d])/g, '')
3. 每一个站点获取到经纬度
   这个就没啥好说的了。。调用腾讯地图的api，不过由于调用api有每秒请求数和每日请求数的限制，用异步回调加定时器的方式模拟了休眠，然后运行脚本慢慢等结果返回就好了。

2. 怎么在一堆经纬度表示的点里找出附近的点呢（geohash）

我参考的资料
简单介绍一下geohash就是，把经纬度按照一定的规则去映射出一个hash字符串，在后续搜索的时候，只要hash字符串匹配程度足够高就可以认为这两个点是相近的。具体的内容可以阅读上面的参考资料。下面给我javascript代码的实现。

function geoHashCode (num, range) {
    range = [-range, range]
    let retCode = []
    for (let i = 1; i <= 20; i++) {
        let middle = (range[0] + range[1]) / 2
        let code = num < middle ? '0' : '1'
        if (code === '0') {
            range[1] = middle
        } else {
            range[0] = middle
        }
        retCode.push(code)
    }
    return retCode
}
function geoHash ({ lng, lat }) { // lng: 经度， lat： 纬度
    let lngCode = geoHashCode(lng, 180)
    let latCode = geoHashCode(lat, 90)

    // 偶数位放经度，奇数位放纬度，把2串编码组合生成新串
    let code = []
    for (let i = 0; i < 40; i++) {
        if (i % 2 === 0) { // 偶数
            code[i] = lngCode[i / 2]
        } else {
            code[i] = latCode[(i - 1) / 2]
        }
    }

    const base32 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

    let newCode = []
    const splitLen = 5
    for (let i = 0; i < 8; i++) {
        newCode.push(code.slice(i * 5, i * 5 + 5).join(''))
    }

    // base32编码
    newCode = newCode.map(item => base32[parseInt(item, 2)]).join('')

    return newCode
}

经过上述步骤，我们可以得到什么呢？
一个很大的list，每一个单元为

{
    station:班车名字,
    location:该点的经纬度,
    name:属于上班下班夜班中的哪一个,
    lineIndex:属于该班车类型的拿一条线路,
    stationIndex:属于该线路里的第几个站点,
    time:到站时间,
    geohash:该点经纬度映射出的的geohash
}

到这一步其实已经可以做到输入一个点，匹配出附近班车的点了，只要把输入的点通过api查询出经纬度，再转化成geohash，最后遍历这个list把匹配程度足够高的点挑出来就可以了。
但是其实我们有5000个这样的点，在页面上不断做这种遍历匹配我觉得挺蠢的，于是我想到构建一个匹配树。把一组hash映射成一个匹配森林，然后输入点的geohash不断寻找匹配节点去遍历这个森林的时候可以完全避开不匹配的项去提高匹配效率。举个例子就是:

我们根据左侧的hashList映射出右侧的匹配森林，由于geohash的精度关系是会出现多个站点的geohash是一样的。因此我在叶子节点里用一个数组存放所有的对应站点信息。当我们要匹配'wsc2'时我们可以一直搜索到叶子节点，取出‘站点1，站点2’,但是有时候我们要搜索的geohash没办法匹配到叶子节点，我们就要先判断当前精度是否足够高，误差会不会太大，比如我们认为匹配了三个前缀字符的时候精度就足够高了，那么搜索'ws11'的时候由于只匹配到两个，不应返回结果。而匹配'wsc3'的时候，可以匹配到前缀字符'wsc'，虽然没有到叶子节点，但是我们可以认为以'wsc'为根（大概是那个意思你们应该明白）的树的所有叶子节点都可以认为是这个geohash的附近节点，也就是返回'站点1，站点2，站点6'。至于误差范围可以看上面的参考文献。

3.构建页面需要的内容

1. 腾讯地图或者其他地图的开放接口
2. 获取输入地址转化为经纬度和geohash
3. 查找树获取匹配的地址在list中的index
4. 聚合相同经纬度的点为一个绘制点
   将经纬度作为键名构建一个map
5. 绘制，附近的点为蓝色，输入的点为大头针，绑定附近的点的点击事件（渲染列表，生成该点的所有线路信息）

其他

这个小玩具就这么结束了，中间其实还有一些值得一提的地方。我也就一起记下来了，感觉还是挺有趣的，做一些好玩的东西。

定时器+异步模拟休眠

• 必备知识点： sync/await（只是因为这么写看起来很爽，没有别的意思

---

function sleep () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 500)
    }) 
}
(async function () {
    let i = locationList.length // 计数器
    let newList = []
    while (i !== -1) {
        let item = locationList.pop() // 取出要查询的点
        let location
        try {
            if (locationMap[item.station]) { // 如果这个点请求过了就直接用缓存信息
                location = locationMap[item.station]
            } else {
                location = await getXY(item.station) // 调用api获取经纬度
                locationMap[item.tation] = location // 缓存经纬度信息
                await sleep() // 休眠
            }
            item.location = location
            item.geoHash = geoHash(location) // 获取geohash
            newList.push(item)
        } catch (e) { // 请求失败了，把这个点推回去重新请求
            console.log(e)
            locationList.push(item)
            i++
        }
        i--
        console.log(i)
    }
})()

数据劫持

其实一开始设计的时候没有查询地点附近的班车站点功能的。而是显示上班线路下班线路的功能。不同线路之间的转换用了数据劫持的方式，也就是vue实现数据绑定的Object.defineProperty，还真的挺有意思的，建议大家也可以用这个试一下。另外还有单页应用路由里面的hashchange事件。这些都是些可以再创造的api。