基于MapBox源码在内网中加载离线卫星地图的方法

前段时间，给大家介绍了WeServer在内网中离线发布全国影像及高程DEM数据并在OsgEarth中调用的方法【点击回顾】和在开源三维地球Cesium中如何离线加载卫星影像及高程DEM数据的方法【点击回顾】。

其中，OsgEarth是一个基于桌面端的三维地球开源平台，而Cesium则是基于Web端的三维地球开源平台。

同样地，我们也可以基于二维的开源平台并结合WeServer在内网中离线发布全国卫星影像。

关于二维的WebGIS开源平台，我们推荐OpenLayers和MapBox两种。

其中，二维开源平台OpenLayers在内网中离线加载卫星影像的方法已经作过分享了【点击回顾】，现在我们再来分享一下MapBox在内网中加载显示WeServer发布的离线卫星影像的方法。

在开始之前，需要先准备离线数据发布软件、离线卫星影像示例数据、MapBox开发源码和本机IP地址等。

地图发布软件：需要在内网发布离线卫星影像，请确保地图发布服务中间件版本为4.0.5以上，如果低于该版本，请通过扫一扫二维码关注微信公众号“水经注GIS”并回复“中间件”免费获取最新版本安装包，也可以直接在官网下载。

离线示例数据：本文提供的离线示例数据包括墨卡托投影和WGS84投影的卫星影像与地名标签数据，由于这里主要是为了进行功能性演示，因此只提示前10级影像数据。

卫星影像示例数据

另外，由于MapBox默认仅支持墨卡托投影数据，不支持WGS84坐标系经纬度正投的影像数据，因此这里只需要从百度网盘的共享数据中下载“SatelliteForMercator”和“LabelFroMercator”文件夹中的数据即可。

百度网盘的示例数据下载地址如下所示（如果链接失效请联系我们获取）。

MapBox开发源码：MapBox源码可以从MapBox官网下载最新版，但由于下载的方法略微有点复杂（后面会介绍方法），因此也可以通过扫一扫二维码关注微信公众号“水经注GIS”并回复“MapBox”获取MapBox开发源码文件。

本机IP地址：由于会用到本机IP作为访问地址，可以通过在DOS窗口中运行“IPConfig”命令或其它方式获取本机IP地址以备用，如下图所示。

获取本机IP地址

由于MapBox的源码下载略微有点复杂，我们有必要在这里为大家分享一下它的下载的方法，如果你已经从百度网盘下载了MapBox源码，请略过本节。

首先打开MapBox官网，然后点击“Documentation\Mapbox GL js”，如下图所示。

MapBox官网

在显示的页面点击“Install”按钮，如下图所示。

开始下载安装

从显示的提示可以看出，这里下载代码需要执行一个CMD命令“npm install mapbox-gl --save”进行下载，如下图所示。

下载方法

打开CMD命令窗口，并进入到需要下载保存的目录路径，这里我们将下载内容保存到“F:\MapBox”目录，如下图所示。

执行下载

执行下载后的结果，如下图所示。

下载结果

CMD命令窗口中的警告信息提示缺少“package.json”文件，我们可以通过执行“npm init -f”命令，将会在目录中自动生成该文件，如下图所示。

生成PACKAGE文件

成功生成了“package.json”文件之后，又提示缺少了描述信息和“repository”字段，如下图所示。

警告提示信息

我们打开“package.json”文件，发现“description”字段为空，且没有“repository”字段，如下图所示。

PACKAGE原文件内容

为了避免出现警告信息，可以为“description”添加描述内容，并添加“repository”字段。

“repository”用于指定你的代码存放的地方，这个对希望贡献的人有帮助。

如果git仓库在github上，那么npm docs命令能找到你，如下所示。

URL应该是公开的（即便是只读的）能直接被未经过修改的版本控制程序处理的url。不应该是一个html的项目页面，因为它是给计算机看的。

这里，我们只需要将项目设置为私有即可，即在文档中添加“private”字段并设置为“true”，如下图所示。

修改PACEAGE文件

在“package.json”文件中设置完成并保存后，我们再次执行“npm install mapbox-gl --save”命令，就不会再显示警告信息了，如下图所示。

执行结果

以上就是MapBox源码下载的全过程，后面我们会专门说明如何在IIS中部署MapBox源码的方法。

软件的安装与离线卫星影像的发布方法，请参阅“全球卫星影像离线发布神器《水经注地图发布服务中间件4.0》正式发布”一文【点击回顾】。

由于MapBox是二维应用，因此这里不需要发布高程。

但需要注意的是，要将投影设置为“Web_Mercator”，且确保设置的端口号没有被其它程序占用，如下图所示。

安装配置

安装完成后，会显示如下图所示信息。

安装完成

打开Windows任务管理器，如果WeServer服务的状态显示“正在运行”，则说明中间件服务安装成功并已经正常运行，如下图所示。

服务运行正常

WeServer成功发布后，接下来我们需要将下载的MapBox在本地进行部署。

我们通过IIS对MapBox源码进行本地化部署，如果你对IIS网站部署非常熟悉，请略过本节。

MapBox源码解压之后，如下图所示。

MapBox源码目录

在Windows控制面板中打开“管理工具”，如下图所示。

管理工具

打开IIS网站管理器，如下图所示。

打开IIS

在“网站”树节点单击鼠标右键，然后选择“添加网站”菜单，如下图所示。

添加网站

网站名称可以任意取，这里我们取名为“MapBox”，物理路径设置为MapBox源码的“node_modules\mapbox-gl”文件目录，并将端口号设置为没有被其它程序或Web站点所占用的端口号，这里默认为“80”，如下图所示。

配置网站参数

配置完成并点击“确定”按钮之后完成MapBox源码的本地网站配置，如下图所示。

完成配置

现在，MapBox源码在本地就离线部署好了，但还需要新建一个卫星影像的离线加载显示页面才可以进行访问。

在MapBox源码目录“F:\MapBox\node_modules\mapbox-gl”中新建一个“SampleForMercator.html”Web页面页文件，如下图所示。

新建Web页面文件

在“SampleForMercator.html”网站页面文件中添加卫星影像与地名标签加载代码，如下图所示。

添加影像加载代码

通过扫一扫二维码关注微信公众号“水经注GIS”并回复“MapBox”可获取MapBox源码文件，解压后在目录中，已经为你提供了“SampleForMercator.html”源码文件，但需要特别注意的是需要将IP地址改为本机IP地址，前文我们已经提到过了获取本机IP的方法。

打开网址“http://192.168.0.5/SampleForMercator.html”，可以显示加载本地影像如下图所示。

WGS84卫星影像加载效果

至此，MapBox在内网中加载显示WeServer发布的离线地图的目的就达到了。

这样一来，当前这台电脑在内网中就是一台标准地图服务器，内网中任何一台电脑都可以通过打开网址离线查看地图，但需要注意的是需要将网址中的IP改为本机IP地址。

最后再次申明，由于本文中提供的数据为示例数据，旨在说明地图发布服务中间件的内网离线发布功能，因此卫星影像数据和地名标签都仅仅提供全球前10级数据。

你可以通过扫一扫二维码关注微信公众号“水经注GIS”并回复“免费数据”，领取一个省的高清卫星影像数据，然后更新到对应的数据目录即可！