在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

You may also like...