概述

Leaflet是一個(gè)開(kāi)源的 Javascript 地圖庫(kù)，與 OpenLayers 比起來(lái)就是對(duì)移動(dòng)端稍微友好一點(diǎn)。不過(guò)說(shuō)到底還是個(gè) JS 庫(kù)，主要用在網(wǎng)頁(yè)上的，在網(wǎng)頁(yè)上做導(dǎo)航這個(gè)設(shè)定就有點(diǎn)蛋疼。本來(lái)的想法是用 H5 做跨平臺(tái) APP 的，既然做了，就不管他蛋疼不蛋疼有用沒(méi)有用了，先寫(xiě)出來(lái)吧。

實(shí)現(xiàn)的效果如圖，先搜索一個(gè)結(jié)果，然后開(kāi)始導(dǎo)航，導(dǎo)航出來(lái)順著走的時(shí)候有剩余距離和時(shí)間以及關(guān)鍵節(jié)點(diǎn)的提示。

leaflet

導(dǎo)航數(shù)據(jù)來(lái)源

導(dǎo)航的服務(wù)端使用的Graphhopper，路徑數(shù)據(jù)實(shí)際上使用的是 OSM 的道路數(shù)據(jù)生成的。結(jié)果的數(shù)據(jù)結(jié)構(gòu)如下：instructions中的interval指該端導(dǎo)航的起始點(diǎn)，sign指行進(jìn)操作比如前進(jìn)，左轉(zhuǎn)等。

{
  "hints": { "visited_nodes.average": "66.0", "visited_nodes.sum": "66" },
  "info": {
    "copyrights": ["GraphHopper", "OpenStreetMap contributors"],
    "took": 269
  },
  "paths": [
    {
      "distance": 3321.841,
      "weight": 2266.07186,
      "time": 2391699,
      "transfers": 0,
      "points_encoded": false,
      "bbox": [114.340236, 30.52873, 114.366329, 30.536199],
      "points": {
        "type": "LineString",
        "coordinates": [
          [114.366313, 30.533614],
          [114.366329, 30.533927],
          ...
        ]
      },
      "instructions": [
        {
          "distance": 73.188,
          "heading": 2.54,
          "sign": 0,
          "interval": [0, 2],
          "text": "繼續(xù)行駛到 珞濱路",
          "time": 52694,
          "street_name": "珞濱路"
        },
        ...
      ]
    }
  ]
}

技術(shù)點(diǎn)

各種幾何計(jì)算

這個(gè)其實(shí)沒(méi)啥好說(shuō)的，我找著找著發(fā)現(xiàn)了一個(gè)叫turfjs地理計(jì)算分析的js庫(kù)，但是沒(méi)找到之前，各種幾何計(jì)算真是非常非常麻煩的存在，所以要在這里貼出來(lái)一下。

地圖旋轉(zhuǎn)角度

一般來(lái)說(shuō)，在導(dǎo)航地圖界面，地圖應(yīng)該有一定的旋轉(zhuǎn)，以便向前走的時(shí)候現(xiàn)實(shí)中的道路與地圖上看到的道路盡可能一致。

第一步，計(jì)算旋轉(zhuǎn)角度。正常的地圖是上北下南左西右東的，現(xiàn)在需要旋轉(zhuǎn)到以當(dāng)前道路方向?yàn)檎险?。因此首先需要?jì)算當(dāng)前道路與正北方向的夾角，使用turfjs中的bearing函數(shù)可以計(jì)算，然后用360度減去道路與正北方向的夾角，即可得到地圖需要的旋轉(zhuǎn)角度。

第二步，leaflet地圖旋轉(zhuǎn)。沒(méi)有找到leaflet的旋轉(zhuǎn)插件，要實(shí)現(xiàn)旋轉(zhuǎn)，可以設(shè)置底圖容器的css樣式，比如。當(dāng)然，這要能動(dòng)態(tài)的設(shè)置。

#l_map{
    transform:rotate(100deg)
}

這么旋轉(zhuǎn)之后，界面上會(huì)有很多空白區(qū)。因?yàn)楸緛?lái)初始化的地圖容器是窗口大小的矩形，現(xiàn)在給這個(gè)矩形旋轉(zhuǎn)了一下還展示在同樣大小的窗口中，就會(huì)有遮蓋有空白。此處我想的辦法是給地圖容器的大小手動(dòng)設(shè)置大一點(diǎn)，這樣不管怎么旋轉(zhuǎn)，都不會(huì)有空白。

#l_map {
    position: fixed;
    top: -50vh;
    bottom: -50vh;
    left: -50vw;
    right: -50vw;
}

第三步，地圖容器操作與旋轉(zhuǎn)匹配。地圖旋轉(zhuǎn)之后，leaflet地圖的部分操作并不會(huì)隨著選擇做相應(yīng)的匹配。比如地圖旋轉(zhuǎn)了90度，就成了右北左南，現(xiàn)在向右拖動(dòng)地圖，我們想要的效果當(dāng)然是地圖向北移動(dòng)，但是實(shí)際效果還是會(huì)是向東移動(dòng)，在界面上的表現(xiàn)就是地圖向下移動(dòng)。旋轉(zhuǎn)之后操作與地圖的反應(yīng)就不匹配了。這里采用的方案是重寫(xiě)了leaflet的Draggable中的_onMove函數(shù)，引入旋轉(zhuǎn)變量。

import * as L from "leaflet"

L.Draggable.include({

    _rotate:0,

    _onMove: function (e) {
        if (e._simulated || !this._enabled) { return; }

        if (e.touches && e.touches.length > 1) {
            this._moved = true;
            return;
        }

        var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
        var offset = new L.Point(first.clientX, first.clientY)._subtract(this._startPoint);

        if (!offset.x && !offset.y) { return; }
        if (Math.abs(offset.x) + Math.abs(offset.y) < this.options.clickTolerance) { return; }

        var x = offset.x/this._parentScale.x;
        var y = offset.y/this._parentScale.y;

        // 在offset時(shí)引入角度變量
        var rad = this._rotate/180*Math.PI;
        offset.x = Math.cos(rad) * x + Math.sin(rad) * y;
        offset.y = Math.cos(rad) * y - Math.sin(rad) * x;

        L.DomEvent.preventDefault(e);

        if (!this._moved) {
            this.fire('dragstart');

            this._moved = true;
            this._startPos = L.DomUtil.getPosition(this._element).subtract(offset);

            L.DomUtil.addClass(document.body, 'leaflet-dragging');

            this._lastTarget = e.target || e.srcElement;
            if ((window.SVGElementInstance) && (this._lastTarget instanceof window.SVGElementInstance)) {
                this._lastTarget = this._lastTarget.correspondingUseElement;
            }
            L.DomUtil.addClass(this._lastTarget, 'leaflet-drag-target');
        }

        this._newPos = this._startPos.add(offset);
        this._moving = true;

        L.Util.cancelAnimFrame(this._animRequest);
        this._lastEvent = e;
        this._animRequest = L.Util.requestAnimFrame(this._updatePosition, this, true);
    },
    setRotate:function(rotate){
        this._rotate = rotate;
    },
})

然后在角度變化時(shí)，設(shè)置一下就行了。

this.map.dragging._draggable.setRotate(value);

當(dāng)前位置

當(dāng)前位置有兩個(gè)點(diǎn)

• 第一個(gè)是將定位點(diǎn)附著到路徑上。這里可以直接使用turfjs的nearestPointOnLine函數(shù)來(lái)計(jì)算，然后以這個(gè)點(diǎn)位基準(zhǔn)，計(jì)算各階段的剩余距離、時(shí)間、提醒等數(shù)據(jù)。當(dāng)定位點(diǎn)與線路太遠(yuǎn)時(shí)，需要有偏離路徑的提示。

• 第二個(gè)點(diǎn)是定位點(diǎn)的角度問(wèn)題。這個(gè)H5有自帶的傳感器，需要注意的是對(duì)于不同的設(shè)備，不同的瀏覽器，這個(gè)傳感器接口可能不太同，下面做了兩種兼容。

let _this = this;
this.deviceorientationEventHandle = function(e) {
    if (e.webkitCompassHeading) {
        // iOS
        _this.deviceorientation = e.webkitCompassHeading;
    } else if (e.absolute && e.alpha) {
        // Android
        _this.deviceorientation = 360 - e.alpha;
    }
    _this.refreshLocationMarker();
};
if ('ondeviceorientationabsolute' in window) {
    L.DomEvent.on(window, 'deviceorientationabsolute', this.deviceorientationEventHandle, this);
} else if ('ondeviceorientation' in window) {
    L.DomEvent.on(window, 'deviceorientation', this.deviceorientationEventHandle, this);
}

注

導(dǎo)航的寫(xiě)的比較簡(jiǎn)單，只有開(kāi)始、結(jié)束、各段導(dǎo)航提醒、偏離提醒等功能，且只有一種交通方式、只選擇一條路線。

注意做導(dǎo)航經(jīng)常需要出去測(cè)試，需要用手機(jī)、公網(wǎng)測(cè)試，可以使用frp將本地調(diào)試端口映射出去

絕大部分瀏覽器在定位時(shí)除了本地地址之外，都要求是安全地址，因此服務(wù)端必須使用https啟動(dòng)，瀏覽器端必須使用https訪問(wèn)，至于有沒(méi)有ssl證書(shū)無(wú)所謂，幾乎所有的瀏覽器都可以強(qiáng)行訪問(wèn)。