由于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命令能找到你,如下所示。
"repository" : { "type" : "git" , "url" : "http://github.com/isaacs/npm.git" }
URL应该是公开的(即便是只读的)能直接被未经过修改的版本控制程序处理的url。不应该是一个html的项目页面,因为它是给计算机看的。
这里,我们只需要将项目设置为私有即可,即在文档中添加“private”字段并设置为“true”,如下图所示。
修改PACEAGE文件
在“package.json”文件中设置完成并保存后,我们再次执行“npm install mapbox-gl --save”命令,就不会再显示警告信息了,如下图所示。
执行结果
以上就是MapBox源码下载的全过程,后面我们会专门说明如何在IIS中部署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”网站页面文件中添加卫星影像与地名标签加载代码,如下图所示。
添加影像加载代码
服务的地址可以在WeServer后台管理系统中查看,注意修改IP地址、端口号和图层名称,如下图所示。
服务地址
通过关注公号“水经注GIS”并回复“MapBox”可获取MapBox源码文件,解压后在目录中,已经为你提供了“SampleForMercator.html”源码文件,但需要特别注意的是需要将IP地址改为本机IP地址,前文我们已经提到过了获取本机IP的方法。
打开下方网址,可以显示加载本地影像如下图所示。
http://192.168.5.233/SampleForMercator.html
墨卡托卫星影像加载效果
至此,MapBox在内网中加载显示WeServer发布的离线地图的目的就达到了。
这样一来,当前这台电脑在内网中就是一台标准地图服务器,内网中任何一台电脑都可以通过打开网址离线查看地图,但需要注意的是需要将网址中的IP改为本机IP地址。
最后再次申明,由于本文中提供的数据为示例数据,旨在说明地图发布服务中间件的内网离线发布功能,因此卫星影像数据和地名标签都仅仅提供全球前10级数据。
(本文首发于“水经注GIS”公号,关注公号免费领取地图数据)