概述
关于切片下载以及切片的本地部署的问题，本来我觉得挺简单的，但是一直会有有好多童鞋问我，所以借此文章，将这件事情在此说明清楚一下。
工具
1. qgis
借助qgis的插件QMetaTiles插件实现第三方地图的切片下载。
2. nginx
通过nginx，将下载的切片提供xyz的服务出来。
3.mapboxGL
通过mapboxGL调用发布的切片服务。
实现效果
image.png
操作
1.qgis中添加xyz服务
浏览器——>XYZ Tiles——>右键——>新建连接，输入连接名称，在URL框中输入服务地址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;
#允许跨域请求的域，*代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法，比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;
#切片服务
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;
}
}
}
说明：
- 配置中端口默认为8080，为防止端口冲突，将端口改为为8089；
-
D:/test2/nav/vec/nav_vec/为切片下载的存放地址； - 调用中为了防止出现跨域，在配置中加入允许跨域配置；
4.mapboxGL中调用实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' 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>
网友评论