Java+vue天地图离线开发

一、应用场景：

基于天地图开发时需要远程调用天地图的js、css以及各层级瓦片数据，但是在内网环境或者非互联网环境下无法远程访问资源，下面详细介绍本人离线开发的步骤。

---

二、天地图资源下载

1.天地图key申请

进入天地图网址天地图API。

点击“控制台”进行账号注册，注册成功后，点击右上角“创建新应用”，得到Key名称。

2.天地图js、css资源下载

需要下载的天地图静态资源包括：

tiandituApi.js（http://api.tianditu.gov.cn/api?v=4.0&tk=）

components.js（https://api.tianditu.gov.cn/v4.0/components.js）

military.js（https://api.tianditu.gov.cn/v4.0/military.js）

service.js（https://api.tianditu.gov.cn/v4.0/service.js）

tianditu4.0.css（http://api.tianditu.gov.cn/v4.0/css/tianditu4.0.css）

将四个文件的代码复制到本地。

3.天地图瓦片数据下载

在天地图官网，点击“地图API”。

网站最下面有个瓦片数据连接地址。

但是不同的瓦片有不同的下载地址，上两张图中有瓦片的分类，包括：矢量底图、矢量注记、影像底图等等，不同的瓦片图不同的下载地址。

如果根据瓦片地址一个个去下载，工作量巨大，而且各个点位不清晰，无法采用人工方式去下载，我们可以使用java代码去统一抓取瓦片数据。

java抓取瓦片代码：

public class TileDownload {

    //不同的瓦片采用不同的下载地址，一般用的比较多的还是矢量地图
    //矢量（行政） - 等经纬度
    public static String vec_c = "http://{server}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //矢量（行政） - 墨卡托
    public static String vec_w = "http://{server}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //矢量注记（行政） - 等经纬度
    public static String cva_c = "http://{server}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //矢量注记（行政） - 墨卡托
    public static String cva_w = "http://{server}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";

    //影像 - 等经纬度
    public static String img_c = "http://{server}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //影像 - 墨卡托
    public static String img_w = "http://{server}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //影像注记 - 等经纬度
    public static String cia_c = "http://{server}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=defau