轉載註明出處 http://blog.csdn.net/dream_allday/article/details/75337115
顯示瓦片網頁地圖
瓦片網頁地圖也被稱爲OpenStreetMap術語中的滑圖。 有兩個可用於瓦片地圖服務器的免費開源JavaScript地圖庫：OpenLayer和Leaflet。 Leaflet的優點是使用起來很簡單，而且適合移動設備。
OpenLayer
要使用OpenLayer顯示滑圖，首先需要創建一個Web文件夾。
sudo mkdir /var/www/osm然後從openlayer.org下載JavaScript和CSS，並將其解壓縮到Web根文件夾。
之後創建index.html文件。
sudo nano /var/www/osm/index.html將以下HTML代碼粘貼到文件中。更換紅色文字，並根據需要調整經度，緯度和縮放級別。
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="http://your-ip/ol.css" type="text/css">
<script src="http://your-ip/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">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://your-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>保存並關閉文件。現在，可以通過在瀏覽器中輸入服務器IP地址來查看滑動地圖。
your-ip/index.html or your-ipLeaflet
要用Leaflet顯示滑動地圖，先創建一個Web文件夾。
sudo mkdir /var/www/osm然後從leftletjs.com下載JavaScript和CSS，並將其解壓縮到Web根文件夾。
接下來，創建index.html文件。
sudo nano /var/www/osm/index.html將以下HTML代碼粘貼到文件中。更換紅色文字，並根據需要調整經度，緯度和縮放級別。
<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-ip/osm_tiles/{z}/{x}/{y}.png',{maxZoom:18}).addTo(map);
</script>
</body>
</html>保存並關閉文件。現在，可以通過在瀏覽器中輸入服務器IP地址來查看滑動地圖。
your-ip/index.html or your-ip
要預渲染圖塊而不是即時渲染，請使用render_list命令。預渲染的圖塊將緩存在/ var/lib/mod_tile目錄中。-z和-Z標誌指定縮放級別。
render_list -m default -a -z 0 -Z 10