使用node-mapnik和OpenStreetMap Carto发布在线瓦片地图服务

2018-07-10

OpenStreetMap Carto是OpenStreetMap的开源配图样式，可以转换成Mapnik的XML配图文件，进而通过node-mapnik加载并发布在线瓦片地图服务。

下面通过几个方面介绍如何实现地图发布：
1.代码准备
2.数据准备
3.字体准备
4.转换Mapnik XML
5.发布地图服务及前端查看
6.发布高清地图服务

1.代码准备

从Github上下载最新的OpenStreetCarto代码，解压。下文中所有代码目录都特指解压后的目录位置。

接下来的准备工作可以参考官方提供的安装文档。

2.数据准备

数据准备工作可以分为两种：一种是小比例尺下全球的大陆、国家等点、线、面、标注信息，shapefile格式；另一种是详细的基础数据，需要导入到postgresql数据库中使用。

2.1 shapefile数据准备

执行代码目录下scripts/get-shapefile.py脚本可以下载shapefile数据，但是下载可能比较慢，这里提供了百度网盘分享(链接：https://pan.baidu.com/s/1mvKCdjHPsU-hZZ1xTFhu1w 密码：l2vf)，如果离数据日期(2018年7月10日)不是太远，可以使用，差的太久还是用脚本下载吧。

下载完成之后解压到代码目录下data文件夹中。
shapefile准备完成

2.2 postgresql数据准备

postgresql数据处理流程是先下载osm格式数据，准备数据库，再通过osm2pgsql工具将其导入到postgresql中。

下载OSM数据

首选到这里下载OSM数据(china-latest.osm.pbf)到代码目录。
本例中使用的是中国大陆地区的数据，如果有兴趣可以下载其它区域数据。

准备数据库

postgresql数据库安装完成(安装过程参考：这里)之后，使用如下命令创建名为gis的数据库：

1	sudo -u postgres createdb gis

为gis数据库安装postgis和hstore扩展：

1	sudo -u postgres psql -d gis -c 'CREATE EXTENSION postgis; CREATE EXTENSION hstore;'

安装osm2pgsql工具

Ubuntu下使用如下命令安装：

1	sudo apt-get install osm2pgsql

导入postgresql

在代码目录下使用如下命令：

1	sudo -u postgres osm2pgsql -G --hstore --style openstreetmap-carto.style --tag-transform-script openstreetmap-carto.lua -d gis china-latest.osm.pbf

在我的机器上会报错，提示Node cache size is too small to fit all nodes. Please increase cache size，需要在命令中加入--cache 1600，即可正常导入，完整命令如下：

1	sudo -u postgres osm2pgsql -G --hstore --style openstreetmap-carto.style --tag-transform-script openstreetmap-carto.lua -d gis china-latest.osm.pbf --cache 1600

导入完成：
postgresql准备完成

创建索引

创建索引不是必须的，但是可以加快渲染速度，在代码目录下执行如下命令：

1	sudo -u postgres psql -d gis -f indexes.sql

3.字体准备

根据安装文档，执行如下命令安装字体：

1	sudo apt-get install fonts-noto-cjk fonts-noto-hinted fonts-noto-unhinted fonts-hanazono ttf-unifont

4.转换Mapnik XML

OpenStreetMap Carto是使用TileMill工具配置的，其项目文件是project.mml，我们需要将这个工程转成Mapnik的XML配置文件。

这里使用的转换工具是node模块carto，使用如下命令全局安装carto模块：

1	sudo npm install -g carto

转换之前需要将project.mml中postgresql连接参数修改为本机数据库参数：
修改数据库连接参数

然后就可以在代码目录下使用如下命令将project.mml转为mapnik.xml：

1	carto project.mml > mapnik.xml

转换完成之后，可以使用node-mapnik提供的例子测试xml配置文件是否正常，如果正常则会生成如下图片：
修改数据库连接参数

5.发布地图服务及前端查看

可以参考这里，发布瓦片服务及前端查看。
发布服务

6.发布高清地图服务

正常发布的瓦片地图，在高清屏上看起来比较模糊，需要发布高清地图才能适应这类屏幕，首先看一下效果：
OpenStreetMap官方地图在Macbook Pro上的显示效果：
OpenStreetMap官网
自己发布的普通地图服务在Macbook Pro上的显示效果：

自己发布的高清地图服务在Macbook Pro上的显示效果：

高清版的配置过程包括两方面：1）TileStrata支持512*512大小瓦片；2）OpenLayers支持显示512*512大小瓦片；

TileStrata配置

TileStrata已经给出例子：

var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var sharp = require('tilestrata-sharp');
var mapnik = require('tilestrata-mapnik');
var dependency = require('tilestrata-dependency');
var strata = tilestrata();
// define layers
strata.layer('basemap')
    .route('tile@2x.png')
        .use(disk.cache({dir: '/var/lib/tiles/basemap'}))
        .use(mapnik({
            pathname: '/path/to/map.xml',
            tileSize: 512,
            scale: 2
        }))
    .route('tile.png')
        .use(disk.cache({dir: '/var/lib/tiles/basemap'}))
        .use(dependency('basemap', 'tile@2x.png'))
        .use(sharp(function(image, sharp) {
            return image.resize(256);
        }));
// start accepting requests
strata.listen(8080);

但是这里生成普通瓦片是通过512压缩而成，效果并不是很好，所以我这里512和256都是通过Mapnik进行绘制，高清版命名为tile@2x.png，普通版命名为tile.png。

var tilestrata = require('tilestrata');
var disk = require('tilestrata-disk');
var mapnik = require('tilestrata-mapnik');
var strata = tilestrata();
strata.layer('map')
  .route('tile@2x.png')
    .use(disk.cache({dir: './tilecache'}))
    .use(mapnik({
      pathname: '/home/paiconor/mapnik/openstreetmap-carto-master/mapnik.xml',
      tileSize: 512,
      scale: 2
    }))
  .route('tile.png')
    .use(disk.cache({dir: './tilecache'}))
    .use(mapnik({
      pathname: '/home/paiconor/mapnik/openstreetmap-carto-master/mapnik.xml'
    }));
strata.listen(8099);

Openlayers配置

在Openlayers请求tile@2x.png，并设置tilePixelRatio为2，示例如下：

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>Mapnik地图服务示例</title>
    <link href="./css/ol.css" rel="stylesheet" type="text/css" />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var tileStrataMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://192.168.1.140:8099/map/{z}/{x}/{y}/tile@2x.png',
            tilePixelRatio: 2
        })
    });
    new ol.Map({
        layers: [
            tileStrataMapLayer
        ],
        view: new ol.View({
            center: [0, 0],
            projection: 'EPSG:3857',
            zoom: 2
        }),
        target: 'map'
    });
</script>
</body>
</html>

此篇博文参考think8848的博客，特此感谢！