概述
Leaflet是一个开源的 Javascript 地图库，与 OpenLayers 比起来就是对移动端稍微友好一点。不过说到底还是个 JS 库，主要用在网页上的，在网页上做导航这个设定就有点蛋疼。本来的想法是用 H5 做跨平台 APP 的，既然做了，就不管他蛋疼不蛋疼有用没有用了，先写出来吧。
实现的效果如图，先搜索一个结果，然后开始导航，导航出来顺着走的时候有剩余距离和时间以及关键节点的提示。
导航数据来源
导航的服务端使用的Graphhopper，路径数据实际上使用的是 OSM 的道路数据生成的。结果的数据结构如下：instructions中的interval指该端导航的起始点，sign指行进操作比如前进，左转等。
{
"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": "继续行驶到 珞滨路",
"time": 52694,
"street_name": "珞滨路"
},
...
]
}
]
}
技术点
各种几何计算
这个其实没啥好说的，我找着找着发现了一个叫turfjs地理计算分析的js库，但是没找到之前，各种几何计算真是非常非常麻烦的存在，所以要在这里贴出来一下。
地图旋转角度
一般来说，在导航地图界面，地图应该有一定的旋转，以便向前走的时候现实中的道路与地图上看到的道路尽可能一致。
第一步，计算旋转角度。正常的地图是上北下南左西右东的，现在需要旋转到以当前道路方向为正上正下。因此首先需要计算当前道路与正北方向的夹角，使用turfjs中的bearing函数可以计算，然后用360度减去道路与正北方向的夹角，即可得到地图需要的旋转角度。
第二步，leaflet地图旋转。没有找到leaflet的旋转插件，要实现旋转，可以设置底图容器的css样式，比如。当然，这要能动态的设置。
#l_map{
transform:rotate(100deg)
}
这么旋转之后，界面上会有很多空白区。因为本来初始化的地图容器是窗口大小的矩形，现在给这个矩形旋转了一下还展示在同样大小的窗口中，就会有遮盖有空白。此处我想的办法是给地图容器的大小手动设置大一点，这样不管怎么旋转，都不会有空白。
#l_map {
position: fixed;
top: -50vh;
bottom: -50vh;
left: -50vw;
right: -50vw;
}
第三步，地图容器操作与旋转匹配。地图旋转之后，leaflet地图的部分操作并不会随着选择做相应的匹配。比如地图旋转了90度，就成了右北左南，现在向右拖动地图，我们想要的效果当然是地图向北移动，但是实际效果还是会是向东移动，在界面上的表现就是地图向下移动。旋转之后操作与地图的反应就不匹配了。这里采用的方案是重写了leaflet的Draggable中的_onMove函数，引入旋转变量。
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时引入角度变量
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;
},
})
然后在角度变化时，设置一下就行了。
this.map.dragging._draggable.setRotate(value);
当前位置
当前位置有两个点
第一个是将定位点附着到路径上。这里可以直接使用turfjs的nearestPointOnLine函数来计算，然后以这个点位基准，计算各阶段的剩余距离、时间、提醒等数据。当定位点与线路太远时，需要有偏离路径的提示。
第二个点是定位点的角度问题。这个H5有自带的传感器，需要注意的是对于不同的设备，不同的浏览器，这个传感器接口可能不太同，下面做了两种兼容。
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);
}
注
导航的写的比较简单，只有开始、结束、各段导航提醒、偏离提醒等功能，且只有一种交通方式、只选择一条路线。
注意做导航经常需要出去测试，需要用手机、公网测试，可以使用frp将本地调试端口映射出去
绝大部分浏览器在定位时除了本地地址之外，都要求是安全地址，因此服务端必须使用https启动，浏览器端必须使用https访问，至于有没有ssl证书无所谓，几乎所有的浏览器都可以强行访问。
