制作自己的Web服务瓦片地理底图
最近的Web服务开发过程中遇到的问题是：如何制作自己的瓦片地理底图。
因为：1）在单位内网中使用，不能通过外网直接调用高德、百度、或者谷歌的在线地图；2）主要涉及海域的中、小比例尺应用，即使有高德离线地图，也不实用；3）只涉及轻量级、简单的Web服务，不想用ArcGIS Server 等高端系统作为后端支撑。
最后拟定的实施方案：1）采用ETOPO1、GEBCO_2014网格地形数据作为基础数据，绘制地理底图；2）通过Global Mapper软件将地理底图切割成OpenStreetMap（OSM）方式组织的瓦片地图；3）利用免费开源的Leaflet JS库实现地图交互。
下面一一道来，供作参考。
1.绘制地图
1.1 下载ETOPO1数据
首先从美国国家海洋和大气管理局（NOAA）的环境信息中心下载ETOPO1全球地形数据，网址https:///mgg/global/global.html。
ETOPO1的分辨率为1个弧分（约1.8公里），下载数据地理范围为：经度 60°E～ 180°E，纬度 20°S～60°N，图1为Sufer绘制的地形晕渲图。
（注：如果机器内存及软件处理能力足够，可全部采用GEBCO_2014数据绘图，不一定需要ETOPO1数据。
）
图1：ETOPO1地形晕渲图
1.2 下载GEBCO_2014数据
从英国海洋数据中心（BODC）下载最新的通用大洋水深图数据GEBCO_2014，网址/data_and_products/gridded_bathymetry_data。
GEBCO制图项目由国际水道测量组织（IHO）和联合国教科文组织下属的政府间海洋学委员会（IOC）联合指导，并由英国海洋数据中心（BODC）负责更新与维护。
GEBCO_2014网格数据的分辨率为30弧秒（约0.9公里），下载数据地理范围为：经度 102°E～ 140°E，纬度 0°～42°N，图2为Sufer绘制的地形晕渲图。
图2：GEBCO_2014地形晕渲图
1.3 配色方案
为了让出来的图美观实用，地图的配色方案很重要，可以根据Web服务目的制定不同的配色方案，图1、图2的RGB配色方案如下（参考NOAA/NGDC的配色方案），仅供参考。
1.4 绘制基础地图
将图1、图2的Sufer配色方案保存为*.clr文件，然后在Global Mapper中加载数据、调用Sufer 的clr配色方案（Custom Shader）、添加山体阴影（Enable Hill Shading），得到基础地图，见图3与图4。
图3：ETOPO1基础地图
图3：GEBCO_2014基础地图
1.5 拟定地理底图内容
OpenStreetMap（OSM）方式的Web服务瓦片地图可分为0～19个放大级别（Zoom Level），用于构建瓦片金字塔。
根据实际的Web服务需求，选取放大级别3～8，不同放大级别采用的基础地图及其上叠加的图层见下表，其中的城市与海域注记随着比例尺加大逐渐增多。
1.6 绘制地理底图
根据拟定的地理底图内容，利用Global Mapper将需要叠加的矢量图层添加到ETOPO1或GECBO_2014基础地图上，绘制出不同比例尺的地理底图。
此时的地理底图采用WGS84地理坐标成图，不涉及投影。
2.地图切片
2.1 Global Mapper输出瓦片
在Global Mapper中选择：File → Export → Export Web Format… ，在弹出窗口中选择输出格式“OSM (Open Street Map) Tiles”,然后在“OSM Tiles Export Options”窗口中选择输出瓦片的放大级别，点击OK后系统即执行地图瓦片切割操作。
2.2 瓦片目录结构
OpenStreetMap（OSM）的地图瓦片（tile）以地图左上角为起点切割，从西到东、从北到南将地图切割为256×256像素（pixel）的PNG格式文件，然后每一个放大级别的地图瓦片保存为一个目录，每一
列地图瓦片保存为一个子目录，每一地图瓦片是子目录中的文件。
2.3 瓦片地图投影
Global Mapper会自动将原地图转换为Web Mecator投影的瓦片地图，Web Mecator投影是一种在WGS84椭球上采用圆球体墨卡托投影公式计算的近似墨卡托投影，Web Mecator投影的代号为EPSG 3857，ArcGIS中的投影名为：WGS_1984_Web_Mercator_Auxiliary_Sphere。
3.瓦片地图调用
3.1 下载LeafletJS
下载最新的LeafletJS（目前是1.0.3），网址
将其中的leaflet.css放到服务根目录的css目录下（实际服务时可将leaflet.css压缩一下，采用压缩文件leaflet.min.css提供服务）；将其中的leaflet.js放到服务根目录的js目录下。
如果不想让浏览图的右下角出现“Leaflet”标志，可以在leaflet.js中搜索“Leaflet”（区分大小写），将<a href="" title="A JS library for interactive maps">Leaflet</a>代码中的“Leaflet”删除即可。
3.2 编写HTML、CSS及JS代码
假设瓦片地图服务的HTML文件名maptiles.html（表达网页内容），目录结构按下图设置,其中mosic目录放置瓦片地图， css代码设置网页静态样式，js代码让网页具有交互能力：
则HTML5示例代码如下：
HTML代码中link的 css/style.css 设置地理底图的窗口大小，CSS3示例代码如下：
HTML代码中link的 js/maptiles.js 调用瓦片地图，假设瓦片地图放在服务根目录的mosic目录下，放大倍数最小3、最大8，起始放大倍数3，起始窗口中心点坐标为纬度25°、经度120°，则基于Leaflet API的JS示例代码如下：
3.3 浏览地理底图
在浏览器中打开maptiles.html文件即可浏览地图，下面分别是放大级别为4，6，8的显示结果。
戴勤奋 2017-3-30。