最主要的两点，我认为是：

手绘图的都雅度、清晰度、完全度、准确度，决定了图的档次格调的高低，也是手绘设计师的技能水平、设计能力、方案能力、沟通能力等综合性表示。

如果说手绘图本身是面子，让人对舆图有第一印象和直不雅观感想熏染，那么实时导航功能则是舆图的灵魂和里子。
没有实时定位和动态路径方案导航功能的舆图，只是一个可不雅观而不可用的花瓶，没有利用代价。
没有准确的而高效的实时导航算法，就不能把舆图代价在游客手里发挥到最大。

由于多年的从业履历，我从一个纯技能的角度来分享一下如何实现这样的“聪慧导览系统”。

二、聪慧导览系统功能

先看一个参考示例图（根据实际情形，只添加了必要的功能）：

参考示例图

1.根本功能

舆图功能的设计，包括须要哪些功能，须要怎么展示，舆图点位的图标等细节，不一而足。
每个需求方可能要的也不一样。
但总体来说，可能包含如下：

景点先容：这是聪慧导览系统最根本的功能之一。
在系统后台可以在舆图上添加景点标注，并完善相应的先容信息，包括图片、笔墨、图文、语音、***等内容。

做事举动步伐：在舆图上添加区域内的做事举动步伐，如厕所、游客中央、停车场等内容。

商家书息：在舆图上添加区域内的商家，如酒店、餐饮、特产等商家。
用户可查看商家先容、商家产品，并可支付下单购买。

景区公告：在后台添加景区最新公告，如闭园关照、开园关照、最新活动等信息。

线路推举：在后台设置推举的线路及景点，游客在舆图上可点击查看，并在舆图上直不雅观的方案出推举的路径，仿照导览游览。
非常直不雅观明了。

咨询电话：可在后台设置景区的咨询、客服的联系办法，如电话、微信、微博等。

景区720：可拍摄制作景区的720全景，并在舆图上标注展示，更直不雅观的向游客展示景点的实景。

2.增强功能

聪慧导览系统还该当具备如下增强功能，才能更好的增强客户的做事能力、知足用户的利用需求。
这也是当前电子手绘舆图系统的重点和难点。

实时定位：基于客户真个位置获取接口（如上文，可能大部分是微信环境里，或者浏览器***，实时获取用户当前的位置信息。
当然，位置的精度可能会受到诸多方面成分的影响，如景象、建筑物遮挡、设备本身的性能或GPS模块的精度、网络状况等。
在空想的情形下，精度乃至可达到10到20米旁边的偏差。
这种精度，在民用已经算是极致了。
为什么不给出更精确的精度，可能一方面是设备、技能等成分限定，另一方面，从安全角度来看，可能这也超出民用的范畴。
当然，话说回来，从我们的实际利用场景来看，这样的精度实在已经远远的知足我们的需求了。
这里说个题外话，为什么我们在手机上利用舆图APP导航的时候，不管是驾车还是步辇儿，看上去都能做到精准无误呢？（如驾车，在路口转向时，基本上达到米级的精度）

关于这一点，我是这样思考的：舆图APP是基于设备的定位，然后再结合当前利用者的导航办法、路径方案、设备朝向、速率等多方面综合的成分，用强大的后台算法为用户确当前位置做了智能的“纠偏”。
那为什么我们聪慧导览系统不做这样的纠偏呢。
从实际出发，这一方面是我们的数据量远远不足丰富完善，另一方面是“性价比”不高。
在园区内的导航，不须要这样的“纠偏”已经可以知足需求，而要做这样的“锦上添花”的功能，则须要付出指数级乃至更高的本钱和代价。

动态路线方案：基于前端设备“实时定位”的能力，聪慧导览系统实时打算用户当前位置和指定目的地的路径。
指定的目的地，可以是舆图上标注的任意一个点位，如景点、做事举动步伐、商家等。
这一点，和舆图APP的导航功能非常类似。
园区内很多情形下，没有舆图APP平台采集路线，以是须要我们人工在聪慧导览系统后台标注和实际情形同等的路线，或者通过聪慧导览系统供应的路线采集工具，安排职员现场采集。
实在，舆图平台的路线采集也是这样做的。
各大舆图平台，都有国家发放的专业牌照，然后通过路线采集职员驾车或步辇儿，采集、更新每个城市的道路（仔细想想，这是一个多大的事情量和本钱，我们每个人都可以免费的利用这些做事，感谢他们的付出本钱和辛劳）。

自动触发：基于“实时定位”和“动态路线方案”能力，用户达到系统设置的点位附近时，可以自动触发后台配置的各种功能，如自动播放景点的语音讲解、展示图文内容，或推送商家的优惠券等。
为用户供应便利、人性化的聪慧做事。

多措辞：多措辞是聪慧导览系统知足国际化需求的一个增强功能。
系统具备基本的汉语、英语选择，还具备很便捷的扩展其他语种的设计和功能。

3.舆图个性化

聪慧导览系统不应该是一个纯挚的功能性的系统，还该当有更多丰富的、多元化的功能，为用户供应更多个性化、意见意义化的做事。

个人中央：系统具备用户个人中央的功能。
用户可以对舆图上的景点进行点赞、评论等操作，然后可在个人中央查看。

营销、广告：后台可在舆图上添加固定的营销、广告等信息，增强能力和知足运营需求。

优惠券：后台可设置舆图上的商家发送优惠券，吸引、导流游客进店，带动消费。

寻宝游戏等活动：后台可在舆图上添加寻宝指引点位，勾引游客到指定地点扫码积星对话奖品。

标注图标动效：所有标注点的图标，可设置一些动效，增加舆图的意见意义性和个性化。

三、技能栈的选择

从这里开始后面的内容，有一定的行业背景或履历的人，能更好的理解。
我只管即便说得普通易懂一些。
如果你以为一些专业名词不明白是什么意思，可以直接跳过。

现在绝大部分业务系统的开拓，都是基于一个成熟的技能栈来实现。
这样可以极大的节约根本举动步伐的本钱，而且效率得到极大的提高。
乃至某些系统或行业的运用及系统，不基于一些成熟的技能栈，想要完备自主开拓，险些是不可实现的。

聪慧导览系统，建议基于这样的一个技能栈：

1.做事器

利用成熟的云平台，海内成熟好用的几家，业内人都知道。

2.前端平台

如今最大的前端平台是微信小程序，还有便是浏览器直接通过链接打开。
不过就聪慧导览系统来说，大部分情形下，微信小程序也是基于Webview控件来调用，实质上和浏览器的直接打开没什么差异，便是HTML5+JavaScript+CSS3来实现。
但是微信的生态内，会有一些微信开放的额外的一些接口和功能，比如说：可以利用微信供应的位置获取接口，来为游客获取更精准的定位。

3.舆图平台

聪慧导览系统只能基于舆图的开放平台来实现。
目前海内几家大而成熟的舆图平台：高德舆图、百度舆图、腾讯舆图。
建议首选高德舆图，次选百度舆图。
为什么呢？

舆图有个“层级（Zoom）”的观点，便是用户打开舆图，放大缩小，便是显示的不同的层级。
现在舆图平台开放的层级，高德舆图最大为19级，百度舆图为18级，而同级别的情形下，高德舆图也更大一些。

因此，建议选择高德舆图，可以做更风雅化的舆图。
腾讯舆图多不做先容。
其余，如果涉及国外的景区或地点，那谷歌舆图是不二的选择。
海内的舆图在国外没有完全的内容，而且访问速率也很随缘。

四、开拓先容

详细开拓内容，这里紧张先容涉及舆图核心的部分。
其他比如数据库设计、后台管理系统等不做过多先容。

1.开拓措辞选择

后端开拓：目前盛行的开拓措辞如Java、PHP、Python等都是不错的选择，每个措辞都有自己的特色。
就个人而言，我比较喜好Java和PHP，Java纯面向工具，适宜大型项目，运行速率较快；PHP灵巧大略，开拓效率很高，现在利用有Swoole这样的扩展，也可以做到运行速率很快。

前端开拓：前端开拓旧调重弹，JavaScript+HTML5+CSS3，千年不变的三板斧。
但是可选择的框架或者库现在比较多，JavaScript有之前非常盛行的JQuery库，也有现在很火的Vue等框架。
总之，作为开拓者，你最善于的可能便是最适宜的选择。
当然，你也可以选择学习新的知识和技能代替曾经最善于的。

2.舆图根本知识

这一点，是核心，根本中的根本，事理也比较繁芜。
由于地球是一个球体，是立体的，并不是天圆地方的一个平面，以是，首先，须要引入一个叫“坐标系统”的观点。

当前常见的坐标系紧张有三种：

地球坐标系：WGS84，常见于GPS设备，Gooogle舆图（非中国区域）等国际标准的坐标体系 。

火星坐标系：GCJ-02，中国海内利用的被逼迫加密后的坐标系，如高德舆图、腾讯舆图、谷歌舆图（中国区域）的坐标就属于此类坐标系。

百度坐标系：BD-09，百度舆图所特有的坐标体系，它在火星坐标系的根本上又进行了一次加密处理。

但是我们利用舆图的时候，却又只能看到平面的舆图，因此，又有了其余一个观点：墨卡托投影。

墨卡托投影的紧张功能，便是让三维立体的舆图坐标能在二维平面上显示。
有点类似于《三体》里的二向箔的功能，把三维系统二维化。

二维化之后的平面，会被分割为一片一片的小图，或者换句话说，由一片一片的小图拼成了二维的舆图。
而这个小图，叫“瓦片图”。
这又是一个主要的观点。
后文会连续细说。

而瓦片图的开始点（最左上角，或最左下角）在地球的什么地方呢，由于坐标系的不同，每个舆图可能也不一样。
以是，同一个经纬度，在不同的舆图平台上，对应的瓦片图的序号可能都是不一样的。
个中详细的事理和规则算法，这篇文章说得比较详细：

海内紧张舆图瓦片坐标系定义及打算事理

3.舆图平台先容

高德、百度、腾讯、谷歌舆图开放平台先容。

首先祭出开放平台文档，这是基于平台开拓的根本：

高德舆图：https://lbs.amap.com/api/javascript-api/summary

百度舆图：https://lbsyun.baidu.com/index.php?title=jspopular3.0

腾讯舆图：https://lbs.***.com/webApi/javascriptGL/glGuide/glBasic

谷歌舆图：https://developers.google.com/maps/documentation/javascript

每个舆图的API，大同小异。
从细节来说，腾讯舆图的接口和高德舆图差别最小。

值得一提的是，在舆图上画线（紧张是导航的线路方案标识），谷歌舆图没有直接给出绘制虚线的接口，而海内的舆图平台都有。
这一点也表示了海内和国外的一种思维的差异。

其余还有一个细节，标注图标旋转（比如导航时，箭头图标跟随人的方向旋转）接口，高德舆图的旋转的中央点不是图标中央，而是图标外层父元素的点位，因此转向时，给人的觉得是自身的位置也在画一个圆圈，而百度舆图没有这个问题。
当然这个问题也不是无法办理，我们可以通过自己编写转向的CSS，利用JavaScript来掌握图标以中央点来转向。

图标环绕父元素边点转向

图标环绕中央点正常转向

每个舆图平台在手机真个表现和体验也有些差异。
我个人以为高德舆图最流畅顺滑，百度舆图次之。

还有其余一点细节，便是关于瓦片图（后文细说），一样的图，在腾讯舆图上会有非常细微的差别（腾讯舆图许可级别Zoom为小数，在两个级别之间，还可以有多个过度值，而其他舆图只能是整数，这是一个更人性化的设计，但却导致了瓦片图变得模糊了一点）。

4.瓦片图覆盖到舆图上

瓦片图是尺寸为256px256px的正方形图片。
这样的图片，像瓦片盖房一样，覆盖为全体舆图，以是称为“瓦片图”。

瓦片图的设计是一个非常精妙的设计，办理了舆图图片太大的根本性问题，节约了做事器、客户端设备的内存，按视觉范围内加载图片，也节约了网络流量。
这是一种前真个“

瓦片图覆盖到舆图，这是全体手绘电子舆图最核心、最根本的举动步伐和功能。
由于此，我们自己绘制的精美舆图，才能够覆盖到舆图平台上，做成我们个性化需求的舆图。
详细的实现，并没有想象的那么繁芜。
当然，履历丰富的程序员，可以设计出更科学的算法和加载逻辑。
这里抛砖引玉，做一个示例（高德舆图）：

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);

这里AMap.TileLayer.Flexible方法是核心，这是高德舆图供应的利用瓦片图的一个接口。
他供应了一个div层（className为“amap-layer amap-flexible”）覆盖在底图之上，然后许可此方法返回仁义的元素，添补在256256的瓦片图的方格里。
因此，这里实在也可以更大略的直接返回一个img元素而不用div：

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较好，毕竟这是通用的默认尺寸。
5.瓦片图的制作

既然瓦片图是根本，那么我们如何从一张完全的手绘图制作成为256256的多张瓦片图呢？可能设计师都能想到，直接用Photoshop切图即可，很大略。
是的，常理来说是这样，但这有2个问题：

（1）我们设计的图，每每不是刚好为256px的倍数，那么第一张切图，从什么地方开始？（即便是刚好为256的倍数，也不能从0像素开始切，后文细说）

（2）我们切图出来之后，结合前文的舆图根本知识，通过上面示例代码可见，最关键的是每个图的文件名，要和舆图的级别Zoom、X轴的数值x、Y轴的数值y相对应。
否则切出来的图，没有任何意义。

这两个问题，是制作有用的瓦片图的根本问题。

实在，在我们绘制手绘图片文件之前，就已经清晰的知道，我们绘制的内容到底是处于舆图的什么区域。
然后应该记录这个区域的起始点的经纬度。

前面说了瓦片图可能从舆图的最左下角或左上角开始。
详细情形是这样的：高德、谷歌、腾讯舆图是从左下角，高德舆图是从左上角开始。

然后通过经纬度、抹卡托、可见区域像素三者的转换算法，打算出当前手绘图分别在X轴和Y轴的第二张瓦片图的偏移像素，然后从此像素位置开始切图，并把打算得到的层级（Zoom）、X坐标（x）、Y坐标（y）的值作为对应的文件名保存切图。
因此，说到这里，我们便都知道，这切图事情没办法由设计师来人工实行，只能由设计的专门算法的系统实行。

这里由于一些商业保密和其他的缘故原由，我不能对这个切图算法做更仔细的讲解，非常抱歉。

瓦片图切好之后，放到专门的文件做事器，然后前端代码便可调用，实现瓦片图覆盖于舆图底图上展示。
个性又俊秀的手绘舆图便基本成型了（如上图“参考示例图”）。

6.动态方案路径的实现

俊秀个性的手绘电子舆图完成之后，这还只是一个纯纯的舆图展示，谈不上功能性的利用，更别说“聪慧”。
因此，我们还须要增加各项聪慧能力的功能。
这个中，最根本的又应该是“实时定位”及“动态路径方案”了。

实在这两项功能，便是舆图APP的根本的导航功能。
但是由于大部分我们的园区内根本没有舆图的路线，或者不全面，因此须要我们自己来实现这个功能。

详细如何实现，事理很大略。
前端通过定位接口获取到用户当前的位置（须要把稳的是，为了支持更全面的利用场景，可以考虑兼容微信及HTML5原生接口），然后系统打算当前位置与指定的点位之间的路线。

因此，这就须要我们根据实际情形，事先在系统里标注园区内的点位和路线，路线越详细越好。
而通过这些点位和路线，要打算得到最短路径，关键则在于最短路径的“寻路算法”。
算法可以自己设计，而目前很多伟大的科学家公开的很多最短路径算法则更为推举。
由于自己设计的算法难免可能会涌现一些不可预见的BUG，而这些公开的算法经由严密的证明和大量利用的验证，使得打算效率以及可靠性都有很好的担保。

这也是我的个人履历，曾经我们自己设计的一个算法，在大部分情形下都能打算出精确的最短路径结果，但在某些情形下，却得到意外的结果，或发生打算花费较多韶光，效率低下的情形。

我推举“迪杰斯特拉”算法，或“佛洛依德”算法。

//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;}

当然这些公开算法，都是最基本的核心和事理，要能让我们可在舆图上做最短路径探求，还须要我们自己根据实际业务和逻辑，做相应的变种。

根据对当前用户的实时定位，通过最短路径算法，便能实现动态路径的方案。
这便使得我们的手绘电子舆图具备了最根本、最主要的导航功能。

7.自动触发的实现

通过实时定位获取到用户当前位置，系统判断位置是否和后台设定的点位靠近。
当间隔已小于设置值的时候，电子舆图系统便自动展示当前点位的先容信息、语音讲解，或者商家推送的优惠券等。
因此，我们的电子舆图系统便越来越智能了。

而在此根本之上，我们可以相称的所有功能，都可以加载到电子舆图系统上。
由此我们的系统便优化成为真正的“聪慧导览系统”。
其他的更多的功能的实现，我便不再赘述，只对下列三个比较特殊的功能再做一些简述。

8.多措辞的实现

多措辞是一个旧调重弹的需求，也是一个别系国际化所必备的功能。
对付聪慧导览系统而言，我以为有两个值得把稳的点：

（1）舆图本身的文案，包括提示信息、按钮笔墨等。
这可以在代码层面做多措辞的配置。
（2）舆图标注点位干系的内容，包括图文先容、语音讲解等内容，这里须要在后台系统设计可添加多措辞内容的管理。

9.实现海内国外可同时访问舆图

这一点需求，是根据实际情形来提的。
由于海内和国外的舆图基本上不能互通，因此我们的聪慧导览系统应该办理这一痛点。

10.舆图路线的采集和标注

系统的“动态路径方案”功能须要园区的路线数据为根本，因此系统应该供应路线采集和标注的配套工具，方便事情职员从现场采集路线的经纬度等信息。

五、结尾

本文是我个人基于“聪慧导览系统”开拓履历的一个大致的概括。
整体来讲，写得比较粗陋和简单。
很难作为一个方案或者教程，只当是我个人做一个总结罢了。
如有不当之处，欢迎示正。
也欢迎有兴趣的一起谈论。

体验舆图