概述
關(guān)于切片下載以及切片的本地部署的問(wèn)題，本來(lái)我覺(jué)得挺簡(jiǎn)單的，但是一直會(huì)有有好多童鞋問(wèn)我，所以借此文章，將這件事情在此說(shuō)明清楚一下。
工具
1. qgis
借助qgis的插件QMetaTiles插件實(shí)現(xiàn)第三方地圖的切片下載。
2. nginx
通過(guò)nginx，將下載的切片提供xyz的服務(wù)出來(lái)。
3.mapboxGL
通過(guò)mapboxGL調(diào)用發(fā)布的切片服務(wù)。
實(shí)現(xiàn)效果
image.png
操作
1.qgis中添加xyz服務(wù)
瀏覽器——>XYZ Tiles——>右鍵——>新建連接，輸入連接名稱，在URL框中輸入服務(wù)地址http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8。
image.png
2. 下載切片
image.png
3. 部署切片
修改nginx配置文件conf/nginx.conf,修改配置文件如下：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8089;
server_name localhost;
#允許跨域請(qǐng)求的域，*代表所有
add_header 'Access-Control-Allow-Origin' *;
#允許帶上cookie請(qǐng)求
add_header 'Access-Control-Allow-Credentials' 'true';
#允許請(qǐng)求的方法，比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允許請(qǐng)求的header
add_header 'Access-Control-Allow-Headers' *;
#切片服務(wù)
location ~ .*\.(gif|jpg|jpeg|png)$ {
expires 24h;
root D:/test2/nav/vec/nav_vec/;#指定圖片存放路徑
access_log D:/test2/nav/vec/nav_vec/log;#圖片路徑
proxy_store on;
proxy_store_access user:rw group:rw all:rw;
proxy_temp_path D:/test2/nav/vec/nav_vec/;#圖片路徑
proxy_redirect off;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 1280k;
proxy_connect_timeout 900;
proxy_send_timeout 900;
proxy_read_timeout 900;
proxy_buffer_size 40k;
proxy_buffers 40 320k;
proxy_busy_buffers_size 640k;
proxy_temp_file_write_size 640k;
}
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
說(shuō)明：
- 配置中端口默認(rèn)為8080，為防止端口沖突，將端口改為為8089；
-
D:/test2/nav/vec/nav_vec/為切片下載的存放地址； - 調(diào)用中為了防止出現(xiàn)跨域，在配置中加入允許跨域配置；
4.mapboxGL中調(diào)用實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel='stylesheet' />
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script>
var style = {
"version": 8,
"name": "lzugis",
"sources": {
"XYZTile": {
"type": "raster",
"tiles": ['http://localhost:8089/{z}/{x}/{y}.png'],
"tileSize": 256
}
},
"layers": [{
"id": "XYZTile",
"type": "raster",
"source": "XYZTile",
"minzoom": 0,
"maxzoom": 8
}]
}
window.map = new mapboxgl.Map({
container: 'map',
style: style,
center: [103.081163, 37.1612],
zoom: 3.45,
minZoom: 2,
maxZoom: 8
});
</script>
</body>
</html>
