前面先容了《景区手绘舆图（电子舆图、聪慧导览系统）如何制作》以及《景区手绘舆图的绘制流程》，接下来先容一些手绘舆图制作的关键点。
手绘舆图最关键的一点，便是把手绘舆图准确的覆盖到舆图平台。
手绘舆图体验
一、舆图开放平台接口
这是紧张的关键点。
通过前面的先容，我们知道，手绘舆图是基于舆图平台针对某一区域进行美化及手绘，从而生产一张精美的手绘图片文件。但这个文件并不能拿来直策应用，而必须要覆盖到舆图平台之上才可发挥其代价。
要实现这个目的，我先大略先容几个观点（这些观点在前面的文章都有比较详细的先容，这里只做大略的回顾）：
1.瓦片图
瓦片图是256像素的正方形图片，全体舆图都是由瓦片图构成的。用瓦片图缘故原由是，可按须要加载（按屏幕显示范围内的区域加载），办理的问题是，做事器及客户端设备内请安题，以及网络流量问题。
2.舆图开放平台
高德、百度、腾讯、谷歌等等舆图平台，都有开放的接口。通过这些开放接口，便可实现让手绘图覆盖到舆图平台上。
高德舆图demo
二、手绘舆图覆盖到舆图平台的办法
每个舆图开放平台都供应了多种把手绘舆图覆盖到平台的实现办法。
此处以高德舆图为例解释。高德舆图一共供应了这么多接口，分别都可以实现自定义图层覆盖到舆图平台：
AMap.TileLayer.FlexibleAMap.ImageLayerAMap.CanvasLayerAMap.VideoLayerAMap.CustomLayer
根据我的履历，在手绘舆图覆盖这个场景，比较适用的是：
AMap.TileLayer.Flexible AMap.ImageLayer
这两个接口，分别对应上文描述的“瓦片图实现舆图”及“一整张图实现舆图”。ImageLayer这个接口，可以实现把整张手绘舆图覆盖到舆图平台上。事实上，依我的理解，业内也有采纳这个办理方案的系统。但是就个人而言，我更推举接口TileLayer.Flexible，此接口便是采纳瓦片图的方案来把手绘舆图覆盖到舆图平台。
ImageLayer接口代码如下所示（高德官方代码），由其图片参数可见，是一张整图：
var imageLayer = new AMap.ImageLayer({ url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', bounds: new AMap.Bounds( [116.327911, 39.939229], [116.342659, 39.946275] ), zooms: [15, 18]});
TileLayer.Flexible接口代码如下所示：
var tileLayer = new AMap.TileLayer.Flexible({ cacheSize: 30, zIndex: 200, createTile: function (x, y, zoom, success, fail) { var imagePath = tileHost + '/uploades/map/" + zoom + "/tile" + x + "_" + y + 'amap.png'; var img = document.createElement('img'); img.onload = function () { success(img); }; img.crossOrigin = "anonymous"; img.onerror = function () { fail(); }; img.src = imagePath; success(img); }});
此接口有createTile方法，开放了3个参数，便是至关主要的舆图层级zoom，以及瓦片图的坐标x/y。通过这3个参数，我们就可以把整张手绘舆图切为瓦片图来覆盖到舆图平台之上，达到用户利用时也按需加载的效果。
三个参数决定瓦片图
三、更繁芜和完善的手绘舆图覆盖的效果
高德舆图的TileLayer.Flexible接口还有一个参数，便是success这个函数。在createTile方法里，我们实在还可以自定义更加繁芜的内容，然后传入success这个函数，高德舆图会自动把传入的工具渲染到瓦片里。
根据这个事理，我们可以实现更加繁芜的需求，如：由于海内无法正常访问谷歌舆图，而高德、百度等舆图在国外访问网络延迟严重且舆图数据欠缺，以是对付国外的区域或景区这种场景，我们就可以通过此接口实现环球可访问的手绘舆图。
详细的实现办法如下：
var tileLayer = new AMap.TileLayer.Flexible({ cacheSize: 30, zIndex: 200, createTile: function (x, y, zoom, success, fail) { var div = document.createElement('div'); var img2 = document.createElement('img'); img2.setAttribute("crossOrigin", 'Anonymous'); img2.onload = function () { div.appendChild(img2); }; img2.style = "position:absolute;width:256px;height:256px;z-index:-2;"; img2.onerror = function () { fail() }; img2.src = tileHost + '/uploades/map/map_'+ mId +"/" + zoom + "/tile" + x + "_" + y + 'amapgoogle.png'; var img = document.createElement('img'); img.onload = function () { div.appendChild(img); }; img.style = "position:absolute;width:256px;height:256px;z-index:-1;"; img.crossOrigin = "anonymous"; img.onerror = function () { fail() }; img.src = tileHost + '/uploades/map/map_'+ mapId +"/" + zoom + "/tile" + x + "_" + y + 'amap.png'; success(div); }});
这样就实现了加载两个瓦片图，重叠到瓦片区里。个中除了我们自己的手绘舆图的瓦片之外，其余的瓦片图是谷歌舆图的底图瓦片。
谷歌舆图在海内无法访问，我们可以采取把它缓存到做事器的方案，这样就可以达到海内能通过高德舆图来实现访问谷歌舆图的底图。而国外区域的用户，则直接调用谷歌舆图。这样实现海内国外均能访问。
顺便说一下，谷歌舆图的瓦片图加载方案，也是大同小异的。
这里其余有一个须要把稳把稳的点便是，怎么判断当前用户是在海内还是国外。可以通过经纬度判断，可以通过IP判断。我建议通过经纬度，更加直不雅观明了且准确。但是中国的版图区域，是一个很繁芜的多边形，因此，须要一些较为繁芜的打算。这个点现在就不展开，后面有机会再细说。
繁芜的多图瓦片
四、手绘舆图覆盖到平台的关键技能点
通过上文可知，手绘舆图要覆盖到平台，最关键的点就在于瓦片图的层级、x/y坐标。
而这一点，实在质又是手绘舆图所在区域的经纬度所决定的。
因此，在《景区手绘舆图（电子舆图、聪慧导览系统）如何制作》以及《景区手绘舆图的绘制流程》都有所提及或强调，手绘舆图底图的获取，可以基于系统直接下载。然后设计师在设计手绘舆图的时候，须要特殊把稳，不能随意修正手绘舆图的像素尺寸。由于修正之后，就会导致区域发生变革，然后经纬度就会涌现偏差。
不才载舆图底图的时候，系统已知舆图的经纬度，因此系统在对完成的手绘舆图进行切片的时候，就会从默认影象的经纬度开始打算，通过地球的经纬度、墨卡托坐标、像素偏移三者的转换关系，打算出当前手绘图层的第一张瓦片的偏移位置。找到此关键之后，后面切图就非常大略，只须要以256像素为依据，进行累加切图即可。
这里须要把稳的是，实际上256像素的瓦片，在手机上的显示效果并不佳，看上去不是很清晰。这里涉及手机屏幕和PC屏幕硬件及显示像素的差异事理。办理此问题不难，这里便不展开解释了。
瓦片图准确覆盖
五、更好的图层加载体验
由于手绘舆图打开之后，要加载的瓦片图很多，即便是只加载可视区域内的瓦片图，数量也是不少。因此，为了用户在利用手绘舆图时有更好的放大、缩小查看的体验，我们可以利用预加载瓦片图方案。
详细的方案便是，系统在完成用户当前所在层级的瓦片图加载之后，便可以对相邻的大一级和小一级的瓦片图进行加载。由于知道当前层级的经纬度，因此也能打算出相邻的两个级别的经纬度，进而对相应的瓦片图进行加载。加载之后，当用户放大或缩小手绘舆图层级时，便可快速显示瓦片图而不须要再临时加载，得到“网络更快”的体验。
实现预加载的核心代码：
for (x = xMin; x <= xMax; x ++) { for (y = yMin; y <= yMax; y ++) { if (preloadPics[x + '_' + y]) { continue; } preloadPics[x + '_' + y] = true; var picUrl = tileHost + '/uploades/map/'+ zoom +'/tile'+ x +'_'+ y +'amap.png'; (new Image()).src = picUrl; }}
预加载的两个相邻层级的瓦片图
六、结尾
手绘舆图覆盖到底图的办法，实在还有更多，但根据我有限的履历，以为其他办法都没有TileLayer.Flexible接口灵巧和实用，因此不再过多赘述。
其余说一点，这个接口的繁芜效果，个人履历是高德舆图支持最完善。因此一贯以来我都首推高德舆图作为手绘舆图平台。
在本文末了，衷心感谢各大舆图开放平台。他们供应了大量可免费利用的资源，使得无数企业作为做事商可以为更多各行各业的需求方供应各种各样的办理方案，创造了无法计算的经济代价，表示了大企业的任务和担当。
末了，列一些开放舆图平台文档：
高德舆图：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
