内网环境下的高德地图v2.0使用

一、背景

        在一个项目中，客户仅允许使用内网环境，又提出要使用高德地图的路线规划、路况、覆盖物等功能。

        本文适合场景：当前已完成外网地图整合开发，因需求需要转移至内网中的项目。

二、分析

        1、前端拦截+代理服务器

                初始的想法是部署一台代理服务器，代理服务器网络既能连接内网，又能连接外网，通过前端对指向amap固定url的请求进行拦截，将请求转发至代理服务器，由代理服务器的nginx将请求转发至高德后台获取数据，并返回到前端。

                但这种方案存在一个问题，使用高德V2.0及以上版本时，调用amap是js自动调取的，非XHR的请求，使用前端拦截器无法正常拦截到,如下图，因此，这种方案不可行。

       2、缓存JS API方式

                通过分析高德地图的整体流程，发现在地图初始化时会优先去调取一个https://webapi.amap.com/maps的接口，返回js文件，后续的瓦片、路况等等后台接口的url均暗藏在此js中，并在此js中做了负载均衡，如下图所示；

                 因此，只要复制上述的js文件，修改其中的默认请求url，理论上是可以实现将自动调取的接口定向到代理服务器的，按照此方法进行尝试。

三、尝试实现

        1、代理服务器：

              <1> 现将 https://webapi.amap.com/maps 返回的数据保存为js文件，修改其中vdata、restapi部分的代码(需要全部替换)。

 

将修改好的js保存并放到代理服务器目录，我这里放到nginx/html中，命名为map.js。(这里安装代理服务器nginx过程不再赘述，此步骤仅在测试中手动处理，后续可根据情况编写脚本实现)

                

                <2>配置代理服务，在nginx/conf/nginx.conf中添加以下配置，此处需要注意，若是在高德账号控制台中已经指定了可访问的域名，需要在转发请求规则中配置请求头(转发规则匹配map.js)。

                 <3> 前端页面配置及拦截器处理：将页面引入JS API的代码改成代理服务器的js地址，如下图：

                 完成上述步骤之后，即可实现内网环境下通过代理服务访问地图服务。

                

                <3>编写后台定时缓存服务，将map.js定时缓存并保存到对应位置，我这里每天保存一次。

整体流程如下：

          定时任务：每日更新map.js，将其中的vdata、restapi等接口改为代理服务器地址。

          前端页面：打开页面——》获取map.js——》根据map.js中的地址访问代理服务器指定的接口——》代理服务器将请求转发出去。