最近在开发个人项目中遇到了这样一个问题,即:本地开发使用天地图在线地图服务,部署到线上时,突然想到——天地图提供的开放地图服务是需要申请秘钥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做本地测试示例代码以及效果如下,
- 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>Documenttitle>
- <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>