TileMill服务于openlayers客户端

TileMill是MapBox推出的一款地图样式编辑器，同时自身还提供地图瓦片服务，上一章我们已经成功的导入了OSM的地图数据，接下来我们尝试用TileMill对地图数据进行预览和编辑。

1. 安装NodeJS

因为TileMile是NodeJS的项目，所以我们要先安装NodeJS以及NPM包管理工具

1	yum install nodejs npm

2. 安装TileMill

从githup上下载TileMill项目，然后执行安装

1 2 3

git clone https: //github .com /mapbox/tilemill .git cd tilemill npm install

TileMill默认情况下，只能本机访问服务(127.0.0.1)，如果作为服务器端应用，需要指定一些启动参数才可正常访问。默认情况下端口20008提供瓦片服务，20009为前端应用服务。这个也可以自行修改决定。

1 2	cd tilemill . /index .js --server= true --listenHost=0.0.0.0 --coreUrl=${_SERVER_IP_}:20009 --tileUrl=${_SERVER_IP_}:20008

${_SERVER_IP_} 请替换为实际的服务器IP，然后在浏览器端输入 ${_SERVER_IP_}:20009 就可以访问TileMill了。如果一些顺利的话，会看到如下的场景：

TileMill项目页

如果需要变更默认项目目录的话，在启动时候可以加上 –files=/you_project_path , 来指定你自己的项目路径，更多的参数选择也可参见项目默认的配置文件：tilemill/lib/config.defaults.json

OSMBright 是我们通过 osm-bright 工具来创建出来的一个OSM数据源的项目，具体方法参见下面。其余的项目是系统自带的一些演示项目，打开时可能会因为系统缺少必要的字体而出现渲染瓦片失败的报错，可以安装对应的字体，或者修改相关的字体配置来解决。

3. 通过OSM-Bright创建第一个项目

osm-bright的下载之前已经介绍过了，现在我们可以通过osm-bright来创建一个支持OSM数据格式的TileMill项目。

3.1 下载ShapeFiles文件

因OSM Bright的需要，我们需要下载两个ShapeFiles(地图矢量要素文件？)

1 2 3 4 5 6 7

cd osm-bright mkdir shp cd shp wget http: //data .openstreetmapdata.com /simplified-land-polygons-complete-3857 .zip wget http: //data .openstreetmapdata.com /land-polygons-split-3857 .zip unzip simplified-land-polygons-complete-3857.zip unzip land-polygons- split -3857.zip

3.2 配置

1 2	cd osm-birght cp configure.py.sample configure.py

然后对 configure.py 做如下的修改配置：

1 2 3 4 5 6 7

config[ "importer" ] = "imposm" config[ "name" ] = "OSM Bright" #可以随意修改为你想要的 config[ "path" ] = path.expanduser( "/root/Documents/MapBox/project" ) #这个路径取决于TileMill的配置 config[ "postgis" ][ "dbname" ]   = "osmgis" config[ "postgis" ][ "user" ]     = "osmgis" config[ "land-high" ] = path. join (getcwd(), "shp/land-polygons-split-3857/land_polygons.shp" ) config[ "land-low" ] = path. join (getcwd(), "shp/simplified-land-polygons-complete-3857/simplified_land_polygons.shp" )

修改完配置后

1	. /make .py

没有问题的话，会在你指定的项目路径下生成一个 OSMBright 的项目，然后可以用TileMill打开该项目进行编辑了。

3. 中文支持

一般来说服务器需要有中文字体的支持，这样地图渲染出来才能正确的显示中文，否则你可能会看到各种方框乱码了，正好最近Google联合Adobe推出了一款新的开源字体：思源黑体，我们可以下载安装看一下效果。https://www.google.com/get/noto/#/

1 2 3 4 5 6

mkdir noto cd noto wget https: //www .google.com /get/noto/pkgs/Noto .zip unzip Noto.zip cd .. cp -r noto /usr/share/fonts/noto #安装字体到系统路径

安装成功后，重启一下TileMill服务器，这样就可以在WEB界面上选择，设置新安装的字体了。以下是我的palette.mss关于系统字体的配置：

1 2 3 4 5 6

@sans_lt:           "Noto Sans Regular" , "DejaVu Sans Book" , "unifont Medium" , "Noto Sans Medium" ; @sans_lt_italic:    "Open Sans Italic" , "DejaVu Sans Italic" , "unifont Medium" , "Noto Sans Medium" ; @ sans :              "Noto Sans CJK TC Black" , "DejaVu Sans Book" , "unifont Medium" , "Noto Sans Medium" ; @sans_italic:       "Open Sans Semibold Italic" , "DejaVu Sans Italic" , "unifont Medium" , "Noto Sans Medium" ; @sans_bold:         "Noto Sans CJK SC Bold" , "DejaVu Sans Bold" , "unifont Medium" , "Noto Sans Medium" ; @sans_bold_italic:  "Open Sans Bold Italic" , "DejaVu Sans Bold Italic" , "unifont Medium" , "Noto Sans Medium" ;

如果想查看当前系统支持哪些字体，可以点击编辑器左下角的 “A” 字体管理图标查看。

TileMill字体配置

至此，我们已经可以通过TileMill来编辑地图样式了，接下来我们将通过OpenLayers.js实现一个简单的WEB GIS系统。

按之前的设想，现在应该用MapProxy或TileStache来搭建WMS服务了，但TileMill本身就提供了一个看起来还不错的地图瓦片服务（XYZ模式的），而且OpenLayers本身也支持这种模式，于是打算直接用OpenLayers访问TileMill的瓦片服务接口，先看看效果再说。

OpenLayers是一个开源的为WEB GIS客户端提供的JS库，可以方便的对地图做各种处理。目前已发布3.0版本了，官网：http://openlayers.org/，上面的文档也算丰富，其中还包含了各种Example，对初学者帮助很大！

1. 简单的地图呈现

本次，我们只是简单的展现一下地图，通过官方的Example稍作修改，代码很简单，示例如下：

其中，ol.source.XYZ.url 中的IP请替换成你自己的即可。 ol.View.center/zoom 指定地图的中心点以及默认缩放级别，我们把焦点移到之前的台湾宝岛上看看！

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<! doctype html> < html lang = "en" >    < head >      < link rel = "stylesheet" href = "http://openlayers.org/en/v3.0.0/css/ol.css" type = "text/css" >      < style >        .map {          height: 600px;          width: 100%;        }      </ style >      < script src = "http://openlayers.org/en/v3.0.0/build/ol.js" type = "text/javascript" ></ script >      < title >OpenLayers 3 example</ title >    </ head >    < body >      < h2 >My Map</ h2 >      < div id = "map" class = "map" ></ div >      < script type = "text/javascript" >        var map = new ol.Map({          target: 'map',          layers: [            new ol.layer.Tile({                source: new ol.source.XYZ({                    url: 'http://xxx.xxx.xxx.xxx:20008/tile/OSMBright/{z}/{x}/{y}.png'                })            })          ],          view: new ol.View({            center: ol.proj.transform([121.11, 23.82], 'EPSG:4326', 'EPSG:3857'),            zoom: 8          })        });      </ script >    </ body > </ html >

如果没有问题的话，访问该html变可看到自己的地图了:-)

OpenLayers台湾地图示例

2. 通过GeoJson实现地图矢量要素层

有了地图的底图，我们还需要在此之上呈现一些交互，例如POI打点，绘制线，多边形等相关的应用，甚至是动态数据的呈现。

GeoJson是基于Json的数据格式为基础，专门为地理数据编码的一种载体，其中支持的几何类型有：点、线、面、多点、多线、多面以及几何数据的集合。GeoJson里包含了这些几何对象基本的特征属性。以下代码是参考 http://openlayers.org/en/v3.0.0/examples/geojson.html 的例子生成的，简单的实现了GeoJson作为载体的地图向量数据呈现的一个测试：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

<!doctype html> <html lang= "en" > <head>      <link rel= "stylesheet" href= "http://openlayers.org/en/v3.0.0/css/ol.css" type= "text/css" >      <style>          .map {              height: 600px;              width: 100%;          }      </style>      <script src= "http://openlayers.org/en/v3.0.0/build/ol.js" type= "text/javascript" ></script>      <title>OpenLayers 3 example</title> </head> <body> <h2>My Map</h2>   <div id= "map" class = "map" ></div> <script type= "text/javascript" >        var image = new ol.style.Circle({          radius: 5,          fill: new ol.style.Stroke({color: 'red' }),          stroke: new ol.style.Stroke({color: 'red' , width: 1})      });        var styles = {          'Point' : [ new ol.style.Style({              image: image          })],          'LineString' : [ new ol.style.Style({              stroke: new ol.style.Stroke({                  color: 'green' ,                  width: 1              })          })],          'Polygon' : [ new ol.style.Style({              stroke: new ol.style.Stroke({                  color: 'blue' ,                  lineDash: [4],                  width: 3              }),              fill: new ol.style.Fill({                  color: 'rgba(0, 0, 255, 0.1)'              })          })],          'Circle' : [ new ol.style.Style({              stroke: new ol.style.Stroke({                  color: 'red' ,                  width: 2              }),              fill: new ol.style.Fill({                  color: 'rgba(255,0,0,0.2)'              })          })]      };        var vectorSource = new ol.source.GeoJSON(              /** @type {olx.source.GeoJSONOptions} */              ({                  object: {                      'type' : 'FeatureCollection' ,                      'crs' : {                          'type' : 'name' ,                          'properties' : {                              'name' : 'EPSG:3857'                          }                      },                      'features' : [                          {                              'type' : 'Feature' ,                              'geometry' : {                                  'type' : 'Point' ,                                  'coordinates' : ol.proj.transform([121.11, 23.82], 'EPSG:4326' , 'EPSG:3857' )                              }                          },                          {                              'type' : 'Feature' ,                              'geometry' : {                                  'type' : 'LineString' ,                                  'coordinates' : [                                      [3e1, 1e5],                                      [4e6, 3e1]                                  ]                              }                          },                          {                              'type' : 'Feature' ,                              'geometry' : {                                  'type' : 'Polygon' ,                                  'coordinates' : [                                      [                                          [-5e6, 2e1],                                          [-4e6, 1e6],                                          [-3e6, -1e6]                                      ]                                  ]                              }                          },                      ]                  }              }));        var styleFunction = function (feature, resolution) {          return styles[feature.getGeometry().getType()];      };        var vectorLayer = new ol.layer.Vector({          source: vectorSource,          style: styleFunction      });        var map = new ol.Map({          target: 'map' ,          layers: [              new ol.layer.Tile({                  source: new ol.source.XYZ({                      url: 'http://xxx.xxx.xxx.xxx:20008/tile/OSMBright/{z}/{x}/{y}.png'                  }),              }),              vectorLayer          ],          view: new ol.View({              center: ol.proj.transform([121.11, 23.82], 'EPSG:4326' , 'EPSG:3857' ),              zoom: 2          })      }); </script> </body> </html>

效果应该是这样的：

OpenLayers GeoJson Example

到此为止，我们已经可以通过OpenLayers作一些简单的WebGIS应用了，搭建开源地图服务的话题暂且告一段落。当然我们还缺失一些关键性的服务器，例如地图瓦片的缓存，以及一些接口的标准化的处理，包括之前预想使用的MapProxy和TileStache， 或许本次的主题称之为借助TileMill实现地图服务更合适，呵呵。以上内容仅仅是记录了我个人对地图服务搭建学习过程中的一些点滴。随着以后不断深入学习，我尽量逐步完善和公布一些我对开源地图服务细节上的认知。