菜单 搜索
首页 前端知识 Java vue天地图离线开发

Java vue天地图离线开发

2024-11-05 23:11:28 前端知识 前端哥 249 396 我要收藏

一、应用场景：

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

二、天地图资源下载

1.天地图key申请

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

af0184187280420d9118911b85560b81.jpeg

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

00eeedf8a8454a4e9105b8183c1185fa.jpeg

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”。

51baf6104c6f4f55bcf3a004bd317557.jpeg

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

45178b2cf2fb4c99baa3e3a84476326a.jpeg

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

如果根据瓦片地址一个个去下载，工作量巨大，而且各个点位不清晰，无法采用人工方式去下载，我们可以使用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=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //影像注记 - 墨卡托
    public static String cia_w = "http://{server}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
 
    //地形 - 等经纬度
    public static String ter_c = "http://{server}.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //地形 - 墨卡托
    public static String ter_w = "http://{server}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //地形注记 - 等经纬度
    public static String cta_c = "http://{server}.tianditu.gov.cn/cta_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
    //地形注记 - 墨卡托
    public static String cta_w = "http://{server}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={tk}";
 
    public static String[] servers = {"t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"};
 
 
    public static void main(String[] args){
        String basePath = "D:/lianyungangtianditu";//设置下载的路径
 
        //这里放你的天地图开发者秘钥，注意天地图API访问次数限制
        String tk = "1125258295c5d403d7fbf5e096***";
 
        //将需要下载的图层地址放到一个数组中，不需要下载的可以去掉
        String[] urlArr = {vec_c, vec_w, cva_c, cva_w, img_c, img_w, cia_c, cia_w, ter_c, ter_w, cta_c, cta_w};
 
        //天地图一共有18个图层，从1-18，越往后，瓦片数据量越大
        int minZoom = 1;
        int maxZoom = 18;
        //中国的经纬度
        //double startLat = 53.58;//开始纬度（从北到南）
        //double endLat = 2.7;//结束纬度（从北到南）
        //double startLon = 73.2;//开始经度（从西到东）
        //double endLon = 135.15;//结束经度（从西到东）
        //江苏连云港的经纬度，这边经纬度可以根据自己需要下载的地市或者省份去百度查询经纬度信息，我这边只下载连云港
        double startLat = 35.07;//开始纬度（从北到南）
        double endLat = 34.12;//结束纬度（从北到南）
        double startLon = 118.24;//开始经度（从西到东）
        double endLon = 119.48;//结束经度（从西到东）
 
        ExecutorService exe = Executors.newFixedThreadPool(15);
        for(int i=0; i<urlArr.length; i++){
            String url = urlArr[i].replace("{tk}", tk);
            System.out.println(url);
            String layerName = url.split("tianditu.gov.cn/")[1].split("/wmts?")[0];
            System.out.println(layerName);
            if(layerName.endsWith("c")){
 
                for(int z=minZoom; z<=maxZoom; z++){
                    double deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
                    int startX = (int)((startLon + 180) / deg / 256);//减数取整
                    int endX = (int)((endLon + 180) / deg / 256);//加数取整
                    int startY = (int)((90 - startLat) / deg / 256);
                    int endY = (int)((90 - endLat) / deg / 256);
                    for(int y=startY; y<=endY; y++){
                        for(int x=startX; x<=endX; x++){
                            final String newUrl = url.replace("{server}", servers[(int) (Math.random()*servers.length)]).replace("{z}", z+"").replace("{y}", y+"").replace("{x}", x+"");
                            final String filePath = basePath + "/" + layerName + "/" + z + "/" + y + "/" + x + ".png";
                            exe.execute(new Runnable() {
                                @Override
                                public void run() {
                                    File file = new File(filePath);
                                    if(!file.exists()){
                                        if(!file.getParentFile().exists()){
                                            file.getParentFile().mkdirs();
                                        }
                                        boolean loop = true;
                                        int count = 0;
                                        while(loop && count<5){
                                            count++;
                                            try {
                                                InputStream in = getFileInputStream(newUrl);
                                                OutputStream out = new BufferedOutputStream(new FileOutputStream(file));
                                                byte[] b = new byte[8192];
                                                int len = 0;
                                                while((len = in.read(b)) > -1){
                                                    out.write(b, 0, len);
                                                    out.flush();
                                                }
                                                out.close();
                                                in.close();
                                                loop = false;
                                            } catch (Exception e) {
                                                loop = true;
                                            }
                                        }
                                        if(loop){
                                            System.out.println("下载失败："+newUrl);
                                            System.exit(0);//下载失败后停止任务
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            }else{
                //墨卡托
                if(startLat > 85.051128){
                    startLat = 85.051128;
                }
                if(endLat <- 85.051128){
                    endLat = -85.051128;
                }
 
                for(int z=minZoom; z<=maxZoom; z++){
                    double deg = 360.0 / Math.pow(2, z) / 256;
                    int startX = (int)((startLon + 180) / deg / 256);
                    int endX = (int)((endLon + 180) / deg / 256);
                    int startY = (((int)Math.pow(2, z) * 256 / 2) - (int)((Math.log(Math.tan((90 + startLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256;
                    int endY = (((int)Math.pow(2, z) * 256 / 2) - (int)((Math.log(Math.tan((90 + endLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256;
                    for(int y=startY; y<=endY; y++){
                        for(int x=startX; x<=endX; x++){
                            final String newUrl = url.replace("{server}", servers[(int) (Math.random()*servers.length)]).replace("{z}", z+"").replace("{y}", y+"").replace("{x}", x+"");
                            final String filePath = basePath + "/" + layerName + "/" + z + "/" + y + "/" + x + ".png";
                            exe.execute(new Runnable() {
                                @Override
                                public void run() {
                                    File file = new File(filePath);
                                    if(!file.exists()){
                                        if(!file.getParentFile().exists()){
                                            file.getParentFile().mkdirs();
                                        }
                                        boolean loop = true;
                                        int count = 0;
                                        while(loop && count<5){
                                            count++;
                                            try {
                                                InputStream in = getFileInputStream(newUrl);
                                                OutputStream out = new BufferedOutputStream(new FileOutputStream(file));
                                                byte[] b = new byte[8192];
                                                int len = 0;
                                                while((len = in.read(b)) > -1){
                                                    out.write(b, 0, len);
                                                    out.flush();
                                                }
                                                out.close();
                                                in.close();
                                                loop = false;
                                            } catch (Exception e) {
                                                loop = true;
                                            }
                                        }
                                        if(loop){
                                            System.out.println("下载失败："+newUrl);
                                            System.exit(0);//下载失败后停止任务
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            }
        }
        exe.shutdown();
        while (true) {
            try {
                Thread.sleep(1000L);
            } catch (InterruptedException e) {
            }
            if (exe.isTerminated()) {
                break;
            }
        }
    }
 
 
    public static InputStream getFileInputStream(String url) throws Exception{
        InputStream is = null;
        CloseableHttpClient httpclient = HttpClients.createDefault();
        HttpGet request = new HttpGet(url);
        request.setHeader("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
        HttpResponse response = httpclient.execute(request);
        response.setHeader("Content-Type", "application/octet-stream");
        int statusCode = response.getStatusLine().getStatusCode();
        if (statusCode == HttpStatus.SC_OK) {
            HttpEntity entity = response.getEntity();
            is = entity.getContent();
        }
        return is;
    }
 
 
 
 
}
复制

下载的时间会特别长，下载后的文件路径如下：

c8c68d55f4214f4e996a3078bfdf20d5.jpeg

4.瓦片下载问题汇总

问题一：下载失败

解决：将代码中tk变量改成自己申请的key。

问题二：下载中断

解决：下载中断的原因是key的访问次数受限制，个人key每天只能访问1万次，如果中途下载终端，只需要再次新建应用，采用新应用的key进行再次访问，每个账号可以申请五个key信息。

问题二：中断后重新下载，又会重头开始下载

解决一：根据下载的瓦片层级，需要手动调整代码，如果需要可以直接问我；

解决二：采用下面的实时加载方法，下面有介绍。

三、Java后端读取瓦片数据

瓦片数据下载成功后，前端需要访问数据库加载瓦片信息，代码如下：

@GetMapping("getTiles/{LAYER}")
    public void getTiles(HttpServletResponse response, @PathVariable("LAYER") String LAYER,
                         @RequestParam("TILECOL") String TILECOL,
                         @RequestParam("TILEROW") String TILEROW,
                         @RequestParam("TILEMATRIX")String TILEMATRIX) throws IOException {
 
        String tilesPath = "D:\\lianyungangtianditu";
        String tk = "e4237d5eefb7b69a4a472fd64f***";
        ServletOutputStream out = null;
        try {
            BufferedImage image = ImageIO.read(Files.newInputStream(Paths.get(tilesPath + "/" + LAYER + "/" + TILEMATRIX + "/" + TILEROW + "/" + TILECOL + ".png")));
            response.setContentType("image/png");
            response.setHeader("Cache-Control", "public");
            out = response.getOutputStream();
            ImageIO.write(image, "png", out);
        } catch (Exception e) {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
        } finally {
            if (out != null) {
                out.flush();
                out.close();
            }
        }
    }
复制

代码采用restful风格，四个参数分别为：

LAYER：瓦片类型（cva_c、cva_w、vec_c等）

TILEMATRIX、TILEROW代表：当前瓦片类型下的文件夹

TILECOL代表：瓦片号

四、Vue前端静态资源修改

1.引入天地图.js

在vue的index.html中分别引入之前下载的4个js文件和css文件。

<script type="application/javascript" src="./tiandituApi.js"></script>
<script type="application/javascript" src="./components.js"></script>
<script type="application/javascript" src="./military.js"></script>
<script type="application/javascript" src="./service.js"></script>
<link href="./tdt/tianditu4.0.css" rel="stylesheet">
复制

2.修改tiandituApi.js

天地图js文件默认远程访问瓦片数据，需要将远程访问瓦片的方式改成访问本地瓦片。

0c2cdb2993c04fefbe37f6fdeb423a26.jpeg

定义一个本地服务器的变量，将需要访问的瓦片请求链接修改成刚刚我们自己写的后端请求路径。

//定义一个本地服务器地址变量
window.TMAP_URL = 'http://localhost:8080/tiles';
 
 
//修改js中瓦片访问地址，本人只用了天地图的矢量瓦片，所以其他的就不需要修改了
r:function(){return window.TMAP_URL+"/getTiles/vec_c?"},
T:function(){return window.TMAP_URL+"/getTiles/cva_c?"},
t:function(){return window.TMAP_URL+"/getTiles/vec_w?"},
Y:function(){return window.TMAP_URL+"/getTiles/cva_w?"}
复制

以上就是整个方案的修改。

 

五、瓦片实时加载（有需要再用）

问题：当使用java方法进行下载瓦片数据时，受限于key的访问次数限制、天地图图层数等原因，尤其是到最后面，图层越高，瓦片数据量越大，会导致下载中断。

解决：可以采用按需加载的方式，在地图进行访问的时候，根据访问的位置，进行实时下载瓦片到本地。代码如下：

@RestController
public class MapController {
 
 
 
    /**
     *
     * @param response
     * @param LAYER
     * @param TILECOL
     * @param TILEROW
     * @param TILEMATRIX
     * @throws IOException
     */
    @GetMapping("getTiles/{LAYER}")
    public void getTiles(HttpServletResponse response, @PathVariable("LAYER") String LAYER,
                         @RequestParam("TILECOL") String TILECOL,
                         @RequestParam("TILEROW") String TILEROW,
                         @RequestParam("TILEMATRIX")String TILEMATRIX) throws IOException {
 
        String tilesPath = "D:\\lianyungangtianditu";
        String tk = "e4237d5eefb7b69a4a472fd64f***";
        ServletOutputStream out = null;
        try {
            BufferedImage image = ImageIO.read(Files.newInputStream(Paths.get(tilesPath + "/" + LAYER + "/" + TILEMATRIX + "/" + TILEROW + "/" + TILECOL + ".png")));
 
            if(null!=imageGary){
                image=imageGary;
            }*/
 
            response.setContentType("image/png");
            response.setHeader("Cache-Control", "public");
            out = response.getOutputStream();
            ImageIO.write(image, "png", out);
        } catch (Exception e) {
            //如果没有找到图片，就去下载，然后保存进去
            //response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            this.saveImg(tilesPath, LAYER, TILEMATRIX, TILEROW, TILECOL, tk);
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
        } finally {
            if (out != null) {
                out.flush();
                out.close();
            }
        }
    }
 
    public void saveImg(String path, String layer, String TILEMATRIX, String TILEROW, String TILECOL, String tk){
        StringBuffer sb = new StringBuffer();
        sb.append("http://t0.tianditu.gov.cn/")
                .append(layer);
        if (layer.equals("cva_w") || layer.equals("cva_c")){
            sb.append("/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles");
        }else {
            sb.append("/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles");
        }
        sb.append("&TILEMATRIX=").append(TILEMATRIX)
                .append("&TILEROW=").append(TILEROW)
                .append("&TILECOL=").append(TILECOL)
                .append("&tk=").append(tk);
        System.out.println(sb.toString());
 
        String filePath = path + "/" + layer + "/" + TILEMATRIX + "/" + TILEROW + "/" + TILECOL + ".png";
 
        File file = new File(filePath);
        if(!file.exists()){
            if(!file.getParentFile().exists()){
                file.getParentFile().mkdirs();
            }
            try {
                InputStream in = getFileInputStream(sb.toString());
                OutputStream out = new BufferedOutputStream(new FileOutputStream(file));
                byte[] b = new byte[8192];
                int len = 0;
                while((len = in.read(b)) > -1){
                    out.write(b, 0, len);
                    out.flush();
                }
                out.close();
                in.close();
            } catch (Exception e) {
            }
        }
 
    }
 
    public static InputStream getFileInputStream(String url) throws Exception{
        InputStream is = null;
        CloseableHttpClient httpclient = HttpClients.createDefault();
        HttpGet request = new HttpGet(url);
        request.setHeader("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
        HttpResponse response = httpclient.execute(request);
        response.setHeader("Content-Type", "application/octet-stream");
        int statusCode = response.getStatusLine().getStatusCode();
        if (statusCode == HttpStatus.SC_OK) {
            HttpEntity entity = response.getEntity();
            is = entity.getContent();
        }
        return is;
    }
 
 
}
复制

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/20011.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【Qt开发教程】JSON处理QJsonDocument、QJsonObject、QJsonArray类详解及实战应用：用于解析JSON数据字符串，转换为Qt对象，转换Qt对象为JSON格式字符串

2025-02-22 16:02:22

浅谈C#库之Newtonsoft.Json‌

2025-02-22 16:02:22

第十天：数据提取-JsonPath

2025-02-22 16:02:21

【漏洞复现】5. Fastjson 1.2.24反序列化漏洞（CVE-2017-18349）复现

2025-02-22 16:02:21

Linux网络 | 网络计算器客户端实现与Json的安装以及使用

2025-02-22 16:02:20

解决docker不加载 /etc/docker/daemon.json文件的问题

2025-02-22 16:02:19

nlohmann/json安装与使用

2025-02-22 16:02:19

mapbox基础，使用geojson加载line线图层，实现纯色填充、图片填充、虚线和渐变效果

2025-02-22 16:02:18

鸿蒙HarmonyOS 5.0开发：应用配置文件（Stage模型）-app.json5配置文件

2025-02-22 16:02:18

记录小白C 学习之路--熟悉C VScode的json配置文件篇

2025-02-22 16:02:17

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！