景区手绘图（景区手绘推荐图）

2024-10-27 旅游攻略

1、智能导航系统介绍

手绘电子地图就是将手绘地图叠加在地图上。游客或普通用户可以通过手机上地图（或热门小程序）的链接打开并使用。它是一款使用非常方便，集“看、听、路径规划、实时导航”等多项功能为一体的智能导航系统。也是很多景区为游客提供的一项功能，以增加便利性和游玩体验。

我认为最重要的两点是：

1。手绘图本身

手绘图的美观、清晰、完整、准确，决定了图画的档次和风格，也是手绘设计师技术水平、设计能力、策划能力、沟通能力的综合体现能力。

2.实时导航功能

如果手绘地图本身就是脸，让人有第一印象、直观地图的感觉，那么实时导航功能就是地图的灵魂和内核。没有实时定位和动态路线规划和导航功能的地图只是一个没有使用价值的废花瓶。没有准确、高效的实时导航算法，地图在游客手中就无法发挥最大的价值。

由于多年的行业经验，我将从纯粹的技术角度来分享如何实现这样一个“智能导航系统”。

二、智能导航系统的功能

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

参考示例图

1.基本功能

地图功能的设计，包括需要哪些功能，如何显示，以及地图点的图标等细节。每个需求方可能想要的不同。但总的来说，可能包括以下内容：

吸引力简介ons：这是智能导航系统最基本的功能之一。在系统后台，您可以在地图上添加景点，并完善相应的介绍信息，包括图片、文字、图形、音频、视频等内容。

服务设施：在地图上添加该区域的服务设施，如卫生间、游客中心、停车场等。

商户信息：在地图上添加该区域的商户，如宾馆、饭店、特产等企业。用户可以查看商家介绍、商家产品、支付下单。

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

路线推荐：后台设置推荐路线和景点，游客可以在地图上点击查看，直观地在地图上规划推荐路线，模拟进行导游服务。非常简单。

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

景区720：可以可以拍摄制作景区720全景图，并在地图上进行标注，更直观地向游客展示景区的真实场景。

2.增强功能

智能导航系统还应具有以下增强功能，以便更好地增强客户服务能力，满足用户需求。这也是当前电子手绘地图系统的重点和难点。

实时定位：基于客户端的位置获取接口（如上，大部分可能是在微信环境或者浏览器环境），实时获取用户当前的位置信息。当然，定位的准确性可能会受到很多因素的影响，比如天气、建筑物遮挡、体育等。设备本身的性能或者GPS模块的精度、网络状况等。在理想情况下，精度甚至可以达到10到20米左右的偏差。这种精度被认为是民用领域的终极精度。为什么不给出更精确的精度呢？一方面可能受到设备、技术等因素的限制。另一方面，从安全角度来看，也可能超出民用范围。当然，话虽如此，从我们的实际使用场景来看，这样的准确率已经远远满足了我们的需求。这里扯个题外话，为什么我们在手机上使用地图APP导航时，无论是开车还是步行，看起来都很准确？（比如开车的时候，路口转弯的时候，精度基本达到米级）

我是这样想的：地图APP是根据设备的定位，然后结合当前用户的导航综合因素模式、路径规划、设备方位、速度等，利用强大的后台算法，智能“修正”用户当前位置。那为什么我们的智能导航系统不做这样的偏差修正呢？从实践来看，一方面我们的数据体量还远远不够丰富和完善，另一方面“性价比”不高。园区内的导航不需要这样的“纠偏”来满足需求，但要做这样的“锦上添花”的功能，则需要付出指数级甚至更高的成本和代价。

动态路线规划：智能导航系统基于前端设备的“实时定位”能力，实时计算用户当前位置以及到达指定目的地的路线。指定的目的地可以是地图上标注的任意点，比如景点、服务设施、商户等，这和手机的导航功能非常相似。应用程序。园区内很多情况下没有地图APP平台采集路线，需要我们在智能导航系统后台手动标记符合实际情况的路线，或者安排人员通过路线现场采集智能导航系统提供的采集工具。事实上，地图平台的路线采集也是这样完成的。各大地图平台都有国家颁发的专业牌照，然后路线采集员开车或者步行去采集并更新各个城市的道路（仔细想想，这是多么大的工作量和成本，我们每个人都可以免费使用这些服务，谢谢他们的成本和辛勤工作）。

自动触发：基于“实时定位”和“动态路线规划”能力，当用户到达系统设定的地点时，可以自动触发后台配置的各种功能，例如如自动播放景区语音解说、显示铺设图文内容，或者推送商家优惠券等，为用户提供便捷、人性化的智能服务。

多语言：多语言是智能导航系统适应国际化需求的增强功能。系统有基本的中文和英文选项，还具有非常方便扩展其他语言的设计和功能。

3.地图个性化

智能导航系统不应该是一个纯粹的功能系统，还应该具有更加丰富、多元化的功能，为用户提供更加个性化、有趣的服务。

个人中心：系统具有用户个人中心功能。用户可以对地图上的景点进行点赞和评论，然后在个人中心查看。

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

优惠券：在后台，m地图上的商家可以设置发送优惠券，吸引和引导游客进店，带动消费。

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

标记图标动态效果：所有标记点的图标都可以设置一些动态效果，增加地图的趣味性和个性化。

三、技术栈的选择

从这里开始，有一定行业背景或经验的人可以更好地理解。我会尝试尽可能简单。如果你觉得有些专业术语不明白什么意思，可以直接跳过。

大多数业务系统的开发都是基于成熟的技术栈。这样可以大大节省基础设施的成本，并且大大提高效率。甚至一些应用程序和系统系统或者行业并不是基于一些成熟的技术栈，完全独立开发几乎是不可能的。

智能导航系统建议基于这样的技术栈：

1．服务器

采用成熟的云平台，在国内成熟好用，业内人士都知道。

2.前端平台

当今最大的前端平台是微信小程序，浏览器直接通过链接打开。不过，就智能导航系统而言，大多数情况下也是基于Webview控件来调用微信小程序，本质上和浏览器直接打开没有什么区别，都是通过HTML5+JavaScript+CSS3实现的。不过，在微信生态内，还会有一些微信额外开放的接口和功能。例如，可以利用微信提供的位置获取接口，为游客获取更精准的定位。

3。地图平台

智能导航系统只有基于地图开放平台才能实现。目前国内有几个大型成熟的地图平台：高德地图、百度地图、腾讯地图。建议首选高德地图，其次选择百度地图。为什么？

地图有一个“级别（Zoom）”的概念，即用户打开地图，放大缩小来显示不同的级别。目前地图平台开放级别，高德地图最高级别为19级，百度地图级别为18级。同等级别，高德地图也更大。

所以建议选择高德地图，可以做出更加精细的地图。腾讯地图不做介绍。另外，如果涉及到国外的景点或者地点，谷歌地图是最好的选择。国内的地图没有国外的内容完整，访问速度也很随意。

四、开发介绍

具体开发内容，这里ma只介绍与地图核心相关的部分。其他如数据库设计、后台管理系统等就不过多介绍了。

1.开发语言选择

后端开发：目前流行的开发语言如Java、PHP、Python等都是不错的选择，每种语言都有自己的特点。就我个人而言，我更喜欢 Java 和 PHP。 Java是纯面向对象的，适合大型项目，运行速度更快； PHP灵活简单，开发效率高。现在有了Swoole这样的扩展，它也可以运行得非常快。快的。

前端开发：前端开发是老生常谈，JavaScript+HTML5+CSS3，千年不变的三招。但有很多框架或库可供选择。 JavaScript有以前很流行的JQuery库，也有现在很流行的Vue等框架。简而言之，作为一名开发人员，你最擅长的是什么是最好的选择。当然，你也可以选择学习新的知识和技术，而不是你以前最擅长的。

2.地图基础知识

这是核心，基础中的基础，原理比较复杂。因为地球是一个球体，是三维的，而不是圆形天空中的一个平面，所以，首先需要引入一个概念，叫做“坐标系”。

目前常见的坐标系有三种：

地球坐标系：WGS84，常用于GPS设备、Google地图（非中国地区）等国际标准坐标系。

火星坐标系：GCJ-02，国内使用的强制加密坐标系，如高德地图、腾讯地图、谷歌地图（中国地区）的坐标都属于此类坐标系。

百度坐标系：BD-09，百度地图独有的坐标系，在火星坐标系的基础上进行了加密。

但是当我们使用地图时，我们只能看到平面地图。因此，就有了另一个概念：墨卡托投影。

墨卡托投影的主要作用是使三维地图坐标能够显示在二维平面上。它有点类似于《三体》中双向箔的作用，使三维系统二维化。

二维化后的平面会被一张一张地分割成小图，或者说，它将由一张张小图组成二维地图。而这张小图就被称为“平铺图”。这是另一个重要的概念。文章将继续详细阐述。

瓦片地图的起点（左上角或左下角）在地球上的哪里？由于坐标系不同，每张地图可能会有所不同。因此，对于相同的经纬度，在不同的地图平台上，公司的编号是不同的。对应的平铺图像可能不同。具体的原理和规则算法在这篇文章中有更详细的描述：

中国主要地图瓦片坐标系的定义和计算原理

3.地图平台介绍

高德、百度、腾讯、谷歌地图开放平台介绍。

首先给出开放平台文档，这是平台开发的基础：

黄金地图：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

Google 地图：https://developers.google.com/maps/documentation/javascript

每个地图的 API 都类似。从细节上看，腾讯地图和高德地图的界面差异最小。

值得一提的是，在地图上画线时（主要是导航的路线规划标志），谷歌地图并不直接ly提供了绘制虚线的接口，国内地图平台都有。这也体现了国内外思维的差异。

还有一个细节，图标旋转（比如导航时，箭头图标随着人的方向旋转）界面，高德地图的旋转中心点不是中心点图标，而是图标的外层父元素，因此在转弯时，人们感觉自己的位置也在画一个圆圈，但百度地图不存在这个问题。当然，这个问题并非无法解决。我们可以自己编写转向CSS，并使用JavaScript来控制图标以中心点转动。

图标围绕父元素的边缘点转动

图标围绕中心点正常转动

性能和各个地图平台在手机上的表现体验也有所不同。个人认为高de地图最流畅，其次是百度地图。

还有一个细节点，就是关于瓦片地图（稍后详细），同一张地图，在腾讯地图上会有非常细微的差别（腾讯地图允许缩放级别为小数，在两个级别之间，还可以有多个过渡值，而其他贴图只能是整数（这是更人性化的设计，但会导致平铺贴图变得有点模糊）。

4.瓦片图像叠加在地图上

瓦片图像是一个方形图像，尺寸为256px*256px。这样的图，就像用瓦片盖起来的房子一样，覆盖了整个地图，所以被称为“瓦片图”。

瓦片地图的设计是一个非常精巧的设计，解决了地图图片过大的根本问题，节省了服务器和客户端设备的内存，并且按照可视范围加载图片，还可以节省网络流量。这是前端“延迟加载”思想的体现，也是一个还有一个和前端“雪碧图”正好相反的设计（关于“延迟加载”和“雪碧图”，这里就不做过多介绍了）。因此，我们可以发现，无论是什么解决方案，都有相应的使用场景和相反的限制。不能脱离场景而一概而论。

瓦片地图覆盖了地图，是整个手绘电子地图最核心、最基本的设施和功能。正因为如此，我们自己绘制的精美地图才可以叠加在地图平台上，制作出适合我们个性化需求的地图。具体实现并没有想象的那么复杂。当然，有经验的程序员可以设计出更科学的算法和加载逻辑。这是一个示例（Gaumap）：

这里的核心是AMap.TileLayer.Flexible方法，它是高德提供的使用瓦片地图的接口。他提供了一个div图层（className是“amap-layer amap-flexible”）叠加在底图上，然后让这个方法返回仁慈的元素，这些元素填充在256*256瓦片地图的方格内。因此，不带div直接返回img元素其实更简单：

上面是高德地图的例子，其他地图的原理没有太大区别，就不赘述了。当然，这里只给出了最基本的加载瓦片图片的逻辑。其实根据实际情况，还会有很多必要的其他业务逻辑判断。例如，系统应该存储当前地图的瓦片图像范围。如果超出范围，则不加载图片，或者加载透明小图等。

这里列出了地图平台瓦片地图的接口名称，方便查找和使用：

AMap.TileLayer.Flexible // 高德地图 BMap.TileLayer // 百度地图 TMap.ImageTileLayer //腾讯地图 google.maps.ImageMapType // 谷歌地图 //需要注意的是，有些地图接口允许传入参数：瓦片图片的大小。不过，建议默认为256，毕竟这是一般默认大小。

5.瓦片图片的制作

既然瓦片图片是基础，那我们怎样才能把一张完整的手绘图制作成多张256*256的瓦片图片呢？也许设计师能想到，直接用Photoshop把图片剪下来就可以了，非常简单。是的，这是常识，但是有2个问题：

（1）我们设计的图片往往不完全是256px的倍数，那么第一张切图从哪里开始呢？（即使只是256的倍数，也无法从0像素开始切割，这一点后面会详细介绍）

（2）我们切割完图后，结合基础知识上面的地图，我们通过上面的示例代码可以看到，最重要的是每个地图的文件名，它应该对应地图的级别Zoom，X轴的x值，以及Y 轴。否则，剪下来的图片就没有任何意义。

这两个问题是让我们有效的瓷砖地图。

其实，在我们绘制手绘图片文件之前，我们就已经清楚地知道我们绘制的内容是在地图的哪个区域了，这个区域的起点的经纬度应该是然后被记录下来。

如前所述，图块地图可能从地图的左下角或左上角开始。具体情况是这样的：高德、谷歌、腾讯地图从左下角开始，高德地图从左上角开始。

然后通过经纬度、Makato、可见区域像素的转换算法，计算出第二个瓦片地图在当前手绘图的X轴和Y轴上的偏移像素，并然后从此像素位置开始切割图片，并将切割后的图片以计算出的级别（Zoom）、X坐标（x）、Y坐标（y）作为对应的文件名保存。因此，说到这里，我们都知道切割工作不能由人力来完成。通常由设计者完成，但只能由采用特殊算法设计的系统来执行。

由于一些商业机密等原因，我无法更详细地解释这个图像切割算法，非常抱歉。

瓦片图片切割完成后，放到专门的文件服务器上，然后调用前端代码即可实现瓦片图片叠加在地图底图上的显示。一张个性化、精美的手绘图就基本形成了（如上面的“参考示例图”所示）。

6.动态规划路径的实现

精美、个性化的手绘电子地图完成后，只是纯粹的地图展示，谈不上功能使用，更谈不上“智慧”。因此，我们还需要增加各种智能能力的功能。其中，最基本的应该是“实时定位”和“动态路径规划”。

其实这两个功能就是地图的基本导航功能应用程序。但由于我们大多数公园根本没有地图路线，或者不全面，所以我们需要自己实现这个功能。

如何实现呢，原理很简单。前端通过定位接口获取用户当前位置（需要注意的是，为了支持更全面的使用场景，可以考虑兼容微信和HTML5原生接口），然后系统计算当前位置之间的路线和指定点。

因此，这就需要我们根据实际情况提前在系统中标记园区内的点位和路线。路线越详细越好。而通过这些点和路线，来计算出最短路径，最短路径的关键就在于“寻路算法”。算法可以自己设计，很多伟大的科学家公开的很多最短路径算法更值得推荐。因为o设计的算法我们自己难免会存在一些不可预知的BUG，而这些公共算法都经过了广泛使用的严格证明和验证，使得计算效率和可靠性得到了很好的保证。

这也是我的亲身经历。我们曾经设计了一种算法，可以在大多数情况下计算出正确的最短路径结果，但在某些情况下，我们会得到意想不到的结果。或者计算花费大量时间，效率低下。

我推荐“Dijkstra”算法，或者“Freud”算法。

//C语言版本的Dijkstra算法 int a[1000][1000]; int d[1000];//d表示源节点到该节点的最小距离 int p[1000];//p标记访问过的节点整数 i、j、k； int m;//m代表边数 int n;//n代表点数 int main() { scanf("%d%d",&n,&m); int min1; 整数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++） { 最小值1 = 最大值1； for(j=1;j<=n;j++) if(!p[j]&&d[j]

当然，这些公共算法是最基本的核心和原理。为了让我们能够在地图上找到最短路径，我们需要根据实际业务和逻辑做出相应的变体。

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

7.自动触发的实现

通过实时定位获取用户当前位置，系统判断该位置是否接近后台设置的点。当距离小于设定值时，电子地图系统会自动显示当前点的介绍信息，语音说明，或者商家推送的优惠券。因此，我们的电子地图系统越来越智能化。

基于此，我们可以将所有功能加载到电子地图系统中。结果，我们的系统经过优化，成为真正的“智能导航系统”。其他更多功能的实现我就不赘述了，只简单介绍一下以下三个特殊功能。

8.多语言实现

多语言是一个普遍的需求，也是一个系统国际化的必备功能。对于智能导航系统，我认为有两点值得注意：

（1）地图本身的文案，包括提示信息、按钮文字等，这样就可以在代码处进行多语言配置等级。 (2)对于地图标记点相关的内容，包括图文介绍、音频讲解等，需要在后台系统设计中添加多语言配合内容管理。

9.实现国内外地图同时访问的需要

是根据实际情况而定的。因为国内外地图基本不互通，所以我们的智能导航系统应该解决这个痛点。

10.地图路线采集与标注

系统的“动态路线规划”功能需要园区的路线数据作为依据，因此系统应提供路线采集与标注的配套工具，方便工作人员从园区采集路线场景纬度和经度信息。