因为多年的从业经验,我从一个纯技术的角度来分享一下如何实现这样的“智慧导览系统”。
编辑
景点介绍:这是智慧导览系统最基础的功能之一。在系统后台可以在地图上添加景点标注,并完善相应的介绍信息,包括图片、文字、图文、语音、视频等内容。 服务设施:在地图上添加区域内的服务设施,如厕所、游客中心、停车场等内容。 商家信息:在地图上添加区域内的商家,如酒店、餐饮、特产等商家。用户可查看商家介绍、商家产品,并可支付下单购买。 景区公告:在后台添加景区最新公告,如闭园通知、开园通知、最新活动等信息。 线路推荐:在后台设置推荐的线路及景点,游客在地图上可点击查看,并在地图上直观的规划出推荐的路径,模拟导览游览。非常直观明了。咨询电话:可在后台设置景区的咨询、客服的联系方式,如电话、微信、微博等。 景区720:可拍摄制作景区的720全景,并在地图上标注展示,更直观的向游客展示景点的实景。
实时定位:基于客户端的位置获取接口(如上文,可能大部分是微信环境里,或者浏览器环境),实时获取用户当前的位置信息。当然,位置的精度可能会受到诸多方面因素的影响,如天气、建筑物遮挡、设备本身的性能或GPS模块的精度、网络状况等。在理想的情况下,精度甚至可达到10到20米左右的偏差。这种精度,在民用已经算是极致了。为什么不给出更精确的精度,可能一方面是设备、技术等因素限制,另一方面,从安全角度来看,可能这也超出民用的范畴。当然,话说回来,从我们的实际使用场景来看,这样的精度其实已经远远的满足我们的需求了。这里说个题外话,为什么我们在手机上使用地图APP导航的时候,不管是驾车还是步行,看上去都能做到精准无误呢?(如驾车,在路口转向时,基本上达到米级的精度)关于这一点,我是这样思考的:地图APP是基于设备的定位,然后再结合当前使用者的导航方式、路径规划、设备朝向、速度等多方面综合的因素,用强大的后台算法为用户的当前位置做了智能的“纠偏”。那为什么我们智慧导览系统不做这样的纠偏呢。从实际出发,这一方面是我们的数据量远远不够丰富完善,另一方面是“性价比”不高。在园区内的导航,不需要这样的“纠偏”已经可以满足需求,而要做这样的“锦上添花”的功能,则需要付出指数级甚至更高的成本和代价。 动态路线规划:基于前端设备“实时定位”的能力,智慧导览系统实时计算用户当前位置和指定目的地的路径。指定的目的地,可以是地图上标注的任意一个点位,如景点、服务设施、商家等。这一点,和地图APP的导航功能非常类似。园区内很多情况下,没有地图APP平台采集路线,所以需要我们人工在智慧导览系统后台标注和实际情况一致的路线,或者通过智慧导览系统提供的路线采集工具,安排人员现场采集。其实,地图平台的路线采集也是这样做的。各大地图平台,都有国家发放的专业牌照,然后通过路线采集人员驾车或步行,采集、更新每个城市的道路(仔细想想,这是一个多大的工作量和成本,我们每个人都可以免费的使用这些服务,感谢他们的付出成本和辛苦)。 自动触发:基于“实时定位”和“动态路线规划”能力,用户达到系统设置的点位附近时,可以自动触发后台配置的各种功能,如自动播放景点的语音讲解、展示图文内容,或推送商家的优惠券等。为用户提供便利、人性化的智慧服务。 多语言:多语言是智慧导览系统满足国际化需求的一个增强功能。系统具备基本的汉语、英语选择,还具备很便捷的扩展其他语种的设计和功能。
个人中心:系统具备用户个人中心的功能。用户可以对地图上的景点进行点赞、评论等操作,然后可在个人中心查看。 营销、广告:后台可在地图上添加固定的营销、广告等信息,增强能力和满足运营需求。优惠券:后台可设置地图上的商家发送优惠券,吸引、导流游客进店,带动消费。 寻宝游戏等活动:后台可在地图上添加寻宝指引点位,引导游客到指定地点扫码积星对话奖品。 标注图标动效:所有标注点的图标,可设置一些动效,增加地图的趣味性和个性化。
地图有个“层级(Zoom)”的概念,就是用户打开地图,放大缩小,就是显示的不同的层级。现在地图平台开放的层级,高德地图最大为19级,百度地图为18级,而同级别的情况下,高德地图也更大一些。因此,建议选择高德地图,可以做更精细化的地图。腾讯地图多不做介绍。 另外,如果涉及国外的景区或地点,那谷歌地图是不二的选择。国内的地图在国外没有完整的内容,而且访问速度也很随缘。
后端开发:目前流行的开发语言如Java、PHP、Python等都是不错的选择,每个语言都有自己的特色。就个人而言,我比较喜欢Java和PHP,Java纯面向对象,适合大型项目,运行速度较快;PHP灵活简单,开发效率很高,现在利用有Swoole这样的扩展,也可以做到运行速度很快。 前端开发:前端开发老生常谈,JavaScript+HTML5+CSS3,千年不变的三板斧。但是可选择的框架或者库现在比较多,JavaScript有之前非常流行的JQuery库,也有现在很火的Vue等框架。总之,做为开发者,你最擅长的可能就是最适合的选择。当然,你也可以选择学习新的知识和技术代替曾经最擅长的。
地球坐标系:WGS84,常见于GPS设备,Gooogle地图(非中国区域)等国际标准的坐标体系 。 火星坐标系:GCJ-02,中国国内使用的被强制加密后的坐标系,如高德地图、腾讯地图、谷歌地图(中国区域)的坐标就属于此类坐标系。 百度坐标系:BD-09,百度地图所特有的坐标体系,它在火星坐标系的基础上又进行了一次加密处理。
墨卡托投影的主要功能,就是让三维立体的地图坐标能在二维平面上显示。有点类似于《三体》里的二向箔的功能,把三维系统二维化。
高德地图:https://lbs.amap.com/api/javascript-api/summary 百度地图:https://lbsyun.baidu.com/index.php?title=jspopular3.0 腾讯地图:https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic 谷歌地图:https://developers.google.com/maps/documentation/javascript
另外还有一个细节,标注图标旋转(比如导航时,箭头图标跟随人的方向旋转)接口,高德地图的旋转的中心点不是图标中心,而是图标外层父元素的点位,因此转向时,给人的感觉是自身的位置也在画一个圆圈,而百度地图没有这个问题。当然这个问题也不是无法解决,我们可以通过自己编写转向的CSS,利用JavaScript来控制图标以中心点来转向。
图标围绕父元素边点转向
图标围绕中心点正常转向
每个地图平台在手机端的表现和体验也有些差异。我个人觉得高德地图最流畅顺滑,百度地图次之。
瓦片图的设计是一个非常精妙的设计,解决了地图图片太大的根本性问题,节约了服务器、客户端设备的内存,按视觉范围内加载图片,也节约了网络流量。 这是一种前端的“懒加载”思想的体现,也是和前端的“雪碧图”刚好相反的设计(关于“懒加载”和“雪碧图”,这里不做过多介绍)。 因此我们可以发现,不管什么解决方案,都有相应的使用场景,也有相反的局限性。不可脱离场景,一概而论。
var fileHost = 'https://yourfilehost.com/';var tileLayer = new AMap.TileLayer.Flexible({ createTile: function (x, y, zoom, success, fail) { var imagePath = fileHost + '/tilefile/' + zoom + '/x + '_' + y + '.png'; var div = document.createElement('div'); var img = document.createElement('img'); img.onload = function () { div.appendChild(img); }; img.crossOrigin = "anonymous"; img.onerror = function () { fail() }; img.src = imagePath; success(div); }});tileLayer.setMap(map);
var fileHost = 'https://yourfilehost.com/';var tileLayer = new AMap.TileLayer.Flexible({ createTile: function (x, y, zoom, success, fail) { var imagePath = fileHost + '/tilefile/' + zoom + '/x + '_' + y + '.png'; var img = document.createElement('img'); img.onload = function () { success(img); }; img.crossOrigin = "anonymous"; img.onerror = function () { fail() }; img.src = imagePath; }});tileLayer.setMap(map);
AMap.TileLayer.Flexible // 高德地图BMap.TileLayer // 百度地图TMap.ImageTileLayer // 腾讯地图google.maps.ImageMapType // 谷歌地图//需要注意的是,一些地图的接口允许传入参数:瓦片图的尺寸。不过建议默认为256较好,毕竟这是通用的默认尺寸。
前面说了瓦片图可能从地图的最左下角或左上角开始。具体情况是这样的:高德、谷歌、腾讯地图是从左下角,高德地图是从左上角开始。
这里因为一些商业保密和其他的原因,我不能对这个切图算法做更仔细的讲解,非常抱歉。
其实这两项功能,就是地图APP的基础的导航功能。但是因为大部分我们的园区内根本没有地图的路线,或者不全面,因此需要我们自己来实现这个功能。
//C语言版本的迪杰斯特拉算法int a[1000][1000];int d[1000];//d表示源节点到该节点的最小距离int p[1000];//p标记访问过的节点int i, j, k;int m;//m代表边数int n;//n代表点数int main(){ scanf("%d%d",&n,&m); int min1; int x,y,z; for(i=1;i<=m;i++) { scanf("%d%d%d",&x,&y,&z); a[x][y]=z; a[y][x]=z; } for( i=1; i<=n; i++) d[i]=max1; d[1]=0; for(i=1;i<=n;i++) { min1 = max1; for(j=1;j<=n;j++) if(!p[j]&&d[j]<min1) { min1=d[j]; k=j; } p[k] = 1; for(j=1;j<=n;j++) if(a[k][j]!=0&&!p[j]&&d[j]>d[k]+a[k][j]) d[j]=d[k]+a[k][j]; } for(i=1;i<n;i++) printf("%d->",d[i]); printf("%d\n",d[n]); return 0;}
当然这些公开算法,都是最基本的核心和原理,要能让我们可在地图上做最短路径寻找,还需要我们自己根据实际业务和逻辑,做相应的变种。
(1)地图本身的文案,包括提示信息、按钮文字等。这可以在代码层面做多语言的配置。 (2)地图标注点位相关的内容,包括图文介绍、语音讲解等内容,这里需要在后台系统设计可添加多语言内容的管理。