leaflet做导航
概述
Leaflet是一个开源的 Javascript 地图库,与 OpenLayers 比起来就是对移动端稍微友好一点。不过说到底还是个 JS 库,主要用在网页上的,在网页上做导航这个设定就有点蛋疼。本来的想法是用 H5 做跨平台 APP 的,既然做了,就不管他蛋疼不蛋疼有用没有用了,先写出来吧。
实现的效果如图,先搜索一个结果,然后开始导航,导航出来顺着走的时候有剩余距离和时间以及关键节点的提示。
导航数据来源
导航的服务端使用的Graphhopper,路径数据实际上使用的是 OSM 的道路数据生成的。结果的数据结构如下:instructions中的interval指该端导航的起始点,sign指行进操作比如前进,左转等。
{ |
技术点
各种几何计算
这个其实没啥好说的,我找着找着发现了一个叫turfjs地理计算分析的js库,但是没找到之前,各种几何计算真是非常非常麻烦的存在,所以要在这里贴出来一下。
地图旋转角度
一般来说,在导航地图界面,地图应该有一定的旋转,以便向前走的时候现实中的道路与地图上看到的道路尽可能一致。
第一步,计算旋转角度。正常的地图是上北下南左西右东的,现在需要旋转到以当前道路方向为正上正下。因此首先需要计算当前道路与正北方向的夹角,使用turfjs中的bearing函数可以计算,然后用360度减去道路与正北方向的夹角,即可得到地图需要的旋转角度。
第二步,leaflet地图旋转。没有找到leaflet的旋转插件,要实现旋转,可以设置底图容器的css样式,比如。当然,这要能动态的设置。
#l_map{ |
这么旋转之后,界面上会有很多空白区。因为本来初始化的地图容器是窗口大小的矩形,现在给这个矩形旋转了一下还展示在同样大小的窗口中,就会有遮盖有空白。此处我想的办法是给地图容器的大小手动设置大一点,这样不管怎么旋转,都不会有空白。
#l_map { |
第三步,地图容器操作与旋转匹配。地图旋转之后,leaflet地图的部分操作并不会随着选择做相应的匹配。比如地图旋转了90度,就成了右北左南,现在向右拖动地图,我们想要的效果当然是地图向北移动,但是实际效果还是会是向东移动,在界面上的表现就是地图向下移动。旋转之后操作与地图的反应就不匹配了。这里采用的方案是重写了leaflet的Draggable中的_onMove函数,引入旋转变量。
import * as L from "leaflet" |
然后在角度变化时,设置一下就行了。
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证书无所谓,几乎所有的浏览器都可以强行访问。