在Ubuntu16.04系统上搭建OSM 瓦片服务器

Step 1: 更新Ubuntu的软件库

    # sudo apt update

    # sudo apt upgrade

Step 2: 使用PostGIS安装PostgreSQL数据库服务器

We will usePostgreSQL to store map data. PostGIS is a geospatial extenstion to PostgreSQL.Run the following commands to install them.

# sudo apt install postgresql postgresql-contrib postgis postgresql-9.5-postgis-2.2

A usernamed postgres will be created during the installation process. Thisallows the use of peer authentication. Let’s switch tothe postgres user:

# sudo -u postgres -i

Create a PostgreSQL database user osm

    # createuser osm

Create adatabase named gis andat the same time make osm as the owner of the database. -EUTF8 specifies the character encoding scheme to be used in the database isUTF8.

# createdb -E UTF8 -O osm gis

Create hstore and postgis extension.

# psql -c "CREATE EXTENSION hstore;" -d gis

# psql -c "CREATE EXTENSION postgis;" -d gis

Exit from the postgres user.

# exit

Create osmuseruser on your operating system so the tile server can run as osmuser user.

# sudo adduser osmuser

Step 3: 下载地图样式表和地图数据

First switch to osmuser user

  # su – osmuser

Download the latest CartoCSS mapstylesheets to the osmuser user’s homedirectory.

  # wget https://github.com/gravitystorm/openstreetmap-carto/archive/v2.41.0.tar.gz

Extract it.

  # tar xvf v2.41.0.tar.gz

Next, download map data to the osmuser user’s home directory. Use the belowcommand to download the map data of the whole planet (32G).

  # wget -c http://planet.openstreetmap.org/pbf/planet-latest.osm.pbf

【If you want a map of individual country orstate, go to http://download.geofabrik.de.Also, BBBike.org provides extractsof more than 200 cities and regions world-wide in different formats.】

For example, download the map data of GreatBritain (847M).

# wget -c http://download.geofabrik.de/europe/great-britain-latest.osm.pbf

Now exit from the osmuser user.

       #exit

Step 4: 将地图数据导入PostgreSQL

To import mapdata, we need to install osm2pgsql which converts OpenStreetMap datato postGIS-enabled PostgreSQL databases.

  # sudo apt install osm2pgsql

Switch to osmuseruser again.

       #su – osmuser

Run thefollowing command to load map stylesheet and map data into the gis Database. Replace great-britain-latest.osm.pbf withyour own map data file.

# osm2pgsql --slim -d gis -C 3600 --hstore -S openstreetmap-carto-2.41.0/openstreetmap-carto.style great-britain-latest.osm.pbf

Once the import is complete, exit fromthe osmuser user.

exit

Step 5: 安装mod_tile

mod_tile 是一个瓦片服务必须的Apache模块. 目前没有二进制包可用于Ubuntu。 我们可以从Github存储库编译它。

First install build dependency.

# sudo apt install git autoconf libtool libmapnik-dev apache2-dev

Then clone the repository from Github.

# git clone https://github.com/openstreetmap/mod_tile.git

# cd mod_tile/

Compile and install

# ./autogen.sh

# ./configure

# make

# sudo make install

# sudo make install-mod_tile

Step 6: 生成Mapnik样式表

Mapnik是一个开放源代码的地图学工具集，提供基于客户端与服务器端的地图渲染使用。

Install required packages.

# sudo apt install curl unzip gdal-bin mapnik-utils node-carto

Switch to osmuseruser.

# su – osmuser

cd into the carto style directory.

# cd openstreetmap-carto-2.41.0/

Get shapefiles.

# ./get-shapefiles.sh

Now build the Mapnik xml stylesheet.

# carto project.mml > style.xml

Exit from the osmuseruser.

  # exit

Step 7:渲染配置

Edit renderd config file.

  # sudo nano /usr/local/etc/renderd.conf

In the [default] section, change the value of XML and HOSTto the following.

XML=/home/ osmuser /openstreetmap-carto-2.41.0/style.xml

HOST=localhost

In [mapnik] section, change the value of plugins_dir.

plugins_dir=/usr/lib/mapnik/3.0/input/

Save the file.

Install renderd init script by copying thesample init script.

    # sudo cp mod_tile/debian/renderd.init /etc/init.d/renderd

Grant execute permission.

    # sudo chmod a+x /etc/init.d/renderd

Edit the init script file

    # sudo nano /etc/init.d/renderd

Change the following variable.

    DAEMON=/usr/local/bin/$NAME

DAEMON_ARGS="-c /usr/local/etc/renderd.conf"

RUNASUSER=osmuser

Save the file.

Create the following file and set osmuser the owner.

    # sudo mkdir -p /var/lib/mod_tile

# sudo chown osmuser: osmuser /var/lib/mod_tile

Then start renderd service

    # sudo systemctl daemon-reload

# sudo systemctl start renderd

# sudo systemctl enable renderd (若出现错误，改用下面指令来使能renderd)

[# sudo /lib/systemd/systemd-sysv-install enable renderd]

Step 8: Apache Web服务器配置

Install Apache web server

    # sudo apt install apache2

Create a module load file.

    # sudo nano /etc/apache2/mods-available/mod_tile.load

Paste the following line into the file.

      LoadModule tile_module /usr/lib/apache2/modules/mod_tile.so

Create a symlink.

    # sudo ln -s /etc/apache2/mods-available/mod_tile.load /etc/apache2/mods-enabled/

Then edit the default virtual host file.

# sudo nano /etc/apache2/sites-enabled/000-default.conf

Paste the following lines in <VirtualHost*:80>

LoadTileConfigFile /usr/local/etc/renderd.conf

ModTileRenderdSocketName /var/run/renderd/renderd.sock

# Timeout before giving up for a tile to be rendered

ModTileRequestTimeout 0

# Timeout before giving up for a tile to be rendered that is 

otherwise missing

ModTileMissingRequestTimeout 30

Save and close the file.

Restart Apache.

# sudo systemctl restart apache2

Then in your web browser address bar, type

your-server-ip/osm_tiles/0/0/0.png

显示平铺网页地图

平铺网络地图在OpenStreetMap术语中也称为滑动地图。 有两个免费的和开放源码的JavaScript地图库可以用于你的tile服务器：OpenLayer和Leaflet。 Leaflet的优点是使用起来很简单，而且您的地图将移动流畅。

OpenLayer

Openlayers是一个开源的Javascript库（基于修改过的BSD许可发布），用来在Web浏览器显示地图。它提供API接口创建类似于Google Maps和Bing Maps的基于web的地理应用。这个库包括Rico和Prototype框架。

要使用OpenLayer显示您的滑动地图，请从openlayer.org下载JavaScript和CSS，并将其提取到Web根文件夹。

# cd /var/www/html

# sudo wget https://github.com/openlayers/openlayers/releases/download/

v4.3.4/v4.3.4.zip

# sudo unzip v4.3.4.zip

Next, create the index.html file.

# sudo nano/var/www/html/index.html

Paste the following HTMLcode in the file. Replace red-colored text and adjust the longitude, latitudeand zoom level according to your needs.

<!DOCTYPEhtml>

<html>

<head>

<title>AccessibleMap</title>

<linkrel=”stylesheet” href=”http://your-server-ip/v4.3.4/css/ol.css“type=”text/css”>

<scriptsrc=”http://your-server-ip/v4.3.4/build/ol.js“></script>

<style>

  a.skiplink {

    position: absolute;

    clip: rect(1px, 1px, 1px, 1px);

    padding: 0;

    border: 0;

    height: 1px;

    width: 1px;

    overflow: hidden;

  }

  a.skiplink:focus {

    clip: auto;

    height: auto;

    width: auto;

    background-color: #fff;

    padding: 0.3em;

  }

  #map:focus {

    outline: #4A74A8 solid 0.15em;

  }

</style>

</head>

<body>

  <a class=”skiplink”href=”#map”>Go to map</a>

  <div id=”map”class=”map” tabindex=”0″></div>

  <button id=”zoom-out”>Zoomout</button>

  <button id=”zoom-in”>Zoomin</button>

  <script>

    var map = new ol.Map({

      layers: [

        new ol.layer.Tile({

          source: new ol.source.OSM({

             url: ‘http://your-server-ip/osm_tiles/{z}/{x}/{y}.png’

          })

       })

     ],

     target: ‘map’,

     controls: ol.control.defaults({

        attributionOptions: /** @type{olx.control.AttributionOptions} */ ({

          collapsible: false

        })

     }),

    view: new ol.View({

       center: [244780.24508882355,7386452.183179816],

       zoom:5   

    })

 });

  document.getElementById(‘zoom-out’).onclick =function() {

    var view = map.getView();

    var zoom = view.getZoom();

    view.setZoom(zoom – 1);

  };

  document.getElementById(‘zoom-in’).onclick =function() {

     var view = map.getView();

     var zoom = view.getZoom();

     view.setZoom(zoom + 1);

  };

</script>

</body>

</html>

Save and close the file.

Now you can view your slippy map by typing yourserver IP address in browser.

【eg: Writein browser—> your-server-ip/index.html】

Leaflet

Leftlet 是一个开源的适合移动设备的交互式地图的JavaScrip库。

To display your slippy map with Leftlet, download JavaScript and CSSfrom leftletjs.com andextract it to the web root folder.

# cd /var/www/html/

# sudo wget http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.zip

# sudo unzip leaflet.zip

Next, create the index.html file.

# sudo nano /var/www/html/index.html

Paste the following HTML code in the file. Replace red-colored textand adjust the longitude, latitude and zoom level according to your needs.

<html>

<head>

<title>My first osm</title>

<link rel="stylesheet" type="text/css" href="leaflet.css"/>

<script type="text/javascript" src="leaflet.js"></script>

<style>

   #map{width:100%;height:100%}

</style>

</head>

<body>

  <div id="map"></div>

  <script>

    var map = L.map('map').setView([53.555,9.899],5);

    L.tileLayer('http://your-server-ip/osm_tiles/{z}/{x}/{y}.png',{maxZoom:18}).addTo(map);

</script>

</body>

</html>

Save and close the file.

Now you can view your slippy map by typing yourserver IP address in browser.

【eg: Writein browser—> your-server-ip/index.html】

转载自：https://blog.csdn.net/u012241570/article/details/80283009