最近在开发个人项目中遇到了这样一个问题，即：本地开发使用天地图在线地图服务，部署到线上时，突然想到——天地图提供的开放地图服务是需要申请秘钥key才能够使用的，而且需要连接外网，同时也是有访问次数限制的，那么，如果是在内网环境中如何进行迁移呢？
其实解决方案很简单：通常在项目开发中，我们是通过第三方地图数据下载器进行遥感影像/电子地图/矢量数据下载，然后将其处理之后，发布到自己的专用服务器上。但是对于个人开发者而言，数据下载第一步往往最为艰难，因为不仅要考虑数据可靠性、现势性、完备性等，还要考虑坐标系是否正确，如果不正确的话，还要进行坐标系转换、影像纠偏处理等等，很是麻烦。
然而如果有WMS/WFS/WMTS等地图服务发布经验的小伙伴，脑瓜一拍，立刻就明白常规地图服务是怎么回事了。天地图提供的WMTS服务也不例外，其实就是通过建立影像金字塔，然后逐层切分，转换为256*256的n张图片，供前端地图开发使用。
于是，按照天地图的瓦片剖分规则（更为详细的可以自行深入研究哈），在第level层级，对应的行列数分别是：
int rowCount = (int) Math.pow(2, level); //行数 int colCount = (int) Math.pow(2, level); //列数
对于条件有限的小伙伴来讲，可以通过网络编程简单抓取前几级的地图瓦片，然后进行使用即可。当然，只是兴趣使然，拿本篇文章做一下日常开发记录，我个人是不建议这样做的哈，毕竟有“盗用他人劳动成果”，即：白嫖的嫌疑，相比之下，更为推荐通过Nginx代理天地图服务，将其丝滑的缓存到本地的方案。
基于Java的下载第8层级的示例代码如下，可根据需要自行调节参数。
package com.example.xwd;
import java.io.*;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
public class DownloadTIles {
public static void main(String[] args) {
String outPath = "D:\\文档资料\\tiles\\";
downWorld1To3(outPath,8,8);
}
//计算瓦片范围-世界范围-[1-TopLevel级]
private static void downWorld1To3(String basePath, int lowLevel, int TopLevel) {
System.out.println("basePath=" + basePath);
for (int level = lowLevel; level <= TopLevel; level++) {
int rowCount = (int) Math.pow(2, level); //行数
int colCount = (int) Math.pow(2, level); //列数
System.out.println("level:" + level + "row:" + rowCount + ",col:" + colCount);
//下载瓦片
for (int j = 0; j < colCount; j++) {
for (int i = 0; i < rowCount; i++) {
String url_tilePath = "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=您的天地图key=" + i +
"&TILECOL=" + j
+ "&TILEMATRIX=" + level;//拼接请求路径
String save_tilePath = level + "/" + j + "/";//拼接存储路径
String save_fileName = +i + ".png";//拼接存储名称
String fullFolder = basePath + save_tilePath;
File folder = new File(fullFolder);
System.out.println(folder.getAbsolutePath());
if (!folder.exists()) {
folder.mkdirs();
}
File file = new File(folder, save_fileName);
System.out.println("存储路径:" + file.getAbsolutePath());
downloadTilePNG(url_tilePath, file);
}
}
}
}
private static void downloadTilePNG(String tileUrl, File outFile) {
URL url = null;
URLConnection urlConnection = null;
InputStream inputStream = null;
OutputStream outputStream = null;
int len = -1;
byte[] buffer = new byte[1024];
try {
url = new URL(tileUrl);
urlConnection = url.openConnection();
urlConnection.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.1.5162 SLBChan/111");
inputStream = urlConnection.getInputStream();
outputStream = new FileOutputStream(outFile);
while ((len = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, len);
}
System.out.println("success:" + tileUrl);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
System.out.println("error:" + tileUrl);
} finally {
if (outputStream != null) {
try {
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
然后得到如下所示的瓦片结果，并将其使用Nginx进行资源发布，
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
add_header 'Access-Control-Allow-Origin' '*';
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
}
}
最终使用Cesium.js做本地测试示例代码以及效果如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Document</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="../../Build/Cesium/Cesium.js"> </script>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
#map{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
Cesium.Ion.defaultAccessToken = "Your AccessToken"
const viewer = new Cesium.Viewer("map")
viewer.scene.imageryLayers.removeAll();
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url: "http://localhost:80/tiles/" + '/{z}/{x}/{y}.png',
minimumLevel: 0,
maximumLevel: 7
}));
</script>
</body>
</html>
