Openlayer4加載離線瓦片地圖總結(jié)
步驟1:下載離線地圖(我是通過自己寫的代碼下載的，具體過程見上一篇文章)
說明：（1）下載瓦片時可以將瓦片按照ArcGIS方式組織，也可以按照自定義方式組織
（2）由于大小的原因,我們選擇前10級下載
ArcGIS組織方式：
image.png
image.png
自定義方式：
image.png
image.png
步驟2:復(fù)制出我們想要的地圖瓦片文件，將下載好的瓦片進(jìn)行發(fā)布
方式（1）利用GeoWebCache進(jìn)行發(fā)布（GeoWebCache發(fā)布配制見其他文章）
方式（2）利用nginx或者Tomcat進(jìn)行發(fā)布
將下載好的瓦片目錄直接拷貝到nginx或者tomcat下，啟動服務(wù)即可
步驟3:通過Openlayer4加載顯示
以下為示例代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol加載本地切片</title>
<link rel="stylesheet" href="js/ol.css">
<script src="js/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 設(shè)置地圖中心，此處進(jìn)行坐標(biāo)轉(zhuǎn)換， 把EPSG:4326(經(jīng)緯度坐標(biāo))，轉(zhuǎn)換為EPSG:3857(WGS84網(wǎng)絡(luò)墨卡托(輔助球))坐標(biāo)，因?yàn)閛l默認(rèn)使用的是EPSG:3857坐標(biāo)
//[106.677, 36.7388]是下載地圖的中心經(jīng)緯度
var centerPos = ol.proj.transform([108.9, 34.2], "EPSG:4326", "EPSG:3857");
//創(chuàng)建地圖
var map = new ol.Map({
view: new ol.View({
center: centerPos,//地圖中心位置
zoom: 10//地圖初始層級
}),
//添加地圖圖層
//這里注銷在下面添加新的離線地圖圖層
/*layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
],*/
//將地圖添加到的map容器中
target: 'map'
});
//給8位字符串文件名補(bǔ)0
function zeroFill(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
// ol.source.XYZ添加瓦片地圖的層
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileUrlFunction: function (coordinate) {
//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
//以下加載ArcGIS格式的瓦片
var x = 'C' + zeroFill(coordinate[1], 8, 16);
var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
var z = 'L' + zeroFill(coordinate[0], 2, 10);
//以下加載一般自定義格式的瓦片
//var x = '' + zeroFill(coordinate[1], 8, 10);
//var y = '' + zeroFill(-coordinate[2] - 1, 8, 10);
//var z = '' + zeroFill(coordinate[0], 2, 10);
return 'http://192.168.1.161:5000/tiles/' + z + '/' + y + '/' + x + '.png';//這里可以修改地圖路徑(目前利用nginx將地圖瓦片發(fā)布成靜態(tài)服務(wù))
},
projection: 'EPSG:3857'
})
});
map.addLayer(tileLayer);//添加到map里面
</script>
</body>
</html>
加載效果如下：
image.png
