Vue + 天地图 （离线加载）

已于 2024-08-16 14:13:56 修改
阅读量1.2k 收藏 18
点赞数 9
文章标签： vue.js 前端 javascript 天地图
于 2024-08-01 11:49:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javallu/article/details/140842908
版权

最近项目上由于要内网使用所以要修改之前地图加载方式，之前是在线加载，现在要改成离线加载，话不多说，直接上活

先说一下离线加载思路，首先我们要下载离线的瓦片数据

这里参考了别的博客天地图——内网使用离线地图_天地图离线地图api-CSDN博客

加载天地图瓦片源码，我也粘贴到下面：

注意：这个是根据你要下载地区的经纬度范围下载的，最难受的是天地图下载个人开发的key每天只能访问1万次，如果下15级以后根本不够用。

package com.zdy.gnjc.test;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;

/**
 * 天地图数据爬取
 * @author RainingTime
 * @date 2021.09.17
 */
public class TianDiTuDownload {

    //矢量（行政） - 等经纬度
    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 = "E:\\ZDY\\天地图离线资源\\tdtimg";

        //这里放你的天地图开发者秘钥，注意天地图API访问次数限制1cbff6eac2beb11b0c2a7d9fb44033ae
        String tk = "25eb04fc5002a2510c6eede5****";
        //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};//要下载的图层
        String[] urlArr = {cia_w};//要下载的图层  img_w cia_w  vec_w  cva_w
        int minZoom = 1;
        int maxZoom = 10;

        double startLat = 49.50;//开始纬度（从北到南）
        double endLat = 49.05;//结束纬度（从北到南）
        double startLon = 119.22;//开始经度（从西到东）
        double endLon = 120.50;//结束经度（从西到东）


        ExecutorService exe = Executors.newFixedThreadPool(6);

        //等经纬度第一层是1x2，纬度数量是2^0，经度数量是2^1
        //墨卡托投影第一层是2x2，纬度数量是2^1，经度数量是2^1
        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++){
                    if(z > 10){//天地图10级以上只有中国区域
                        startLat = startLat > 53.58 ? 53.58 : startLat;//开始纬度（从北到南）
                        endLat = endLat < 2.7 ? 2.7 : endLat;//结束纬度（从北到南）
                        startLon = startLon < 73.2 ? 73.2 : startLon;//开始经度（从西到东）
                        endLon = endLon > 135.15 ? 135.15 : endLon;//结束经度（从西到东）
                    }
                    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+"");
                            //System.out.println(newUrl);
                            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){//下载出错进行重试，最多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);
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            }else{
                //墨卡托

                /**
                 * earthRadius = 6378137;//地球赤道半径6378137米
                 * aa = earthRadius * (Math.PI - 0);//赤道周长的一半，20037508.3427892
                 * 85.05112877980659 = (Math.atan(Math.exp(aa / earthRadius))-Math.PI/4)*2 * 180 / Math.PI;//墨卡托最大有效纬度
                 */
                if(startLat > 85.051128){
                    System.out.println("墨卡托投影起始纬度最大为：85.051128，下载区域将被限定。");
                    startLat = 85.051128;
                }
                if(endLat <- 85.051128){
                    System.out.println("墨卡托投影终止纬度最小为：-85.051128，下载区域将被限定。");
                    endLat = -85.051128;
                }

                for(int z=minZoom; z<=maxZoom; z++){
                    if(z > 10){//天地图10级以上只有中国区域
                        startLat = startLat > 53.58 ? 53.58 : startLat;//开始纬度（从北到南）
                        endLat = endLat < 2.7 ? 2.7 : endLat;//结束纬度（从北到南）
                        startLon = startLon < 73.2 ? 73.2 : startLon;//开始经度（从西到东）
                        endLon = endLon > 135.15 ? 135.15 : endLon;//结束经度（从西到东）
                    }
                    double deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
                    int startX = (int)((startLon + 180) / deg / 256);
                    int endX = (int)((endLon + 180) / deg / 256);
                    /**
                     * 这里是基于等经纬度坐标转墨卡托坐标的公式得到的算法。（）
                     * 先算出当前地图级别下纬度方向用该有多少个像素点（一个瓦片是256个点，一共有Math.pow(2, z)个瓦片）
                     * 再算出指定纬度坐标与赤道的距离（北半球为正南半球为负）（这里抵消了带入赤道周长的计算，因为它是一个固定值，把赤道周长定为1就抵消了）：Math.log(Math.tan((90 + startLat) * Math.PI / 360)) / (Math.PI / 180)
                     * 就可以得到纬度坐标距赤道有多少个点：(Math.log(Math.tan((90 + startLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)
                     * 然后就可以计算出其瓦片坐标。
                     */
                    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+"");
                            //System.out.println(newUrl);
                            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){//下载出错进行重试，最多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);
                                        }
                                    }
                                }
                            });
                        }
                    }
                }
            }
        }
        exe.shutdown();
        while (true) {
            try {
                Thread.sleep(1000L);//主线程休眠1秒，等待线程池运行结束，同时避免一直死循环造成CPU浪费
            } 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;
    }

}

下载瓦片后就是我们要修改天地图js的加载瓦片图地址，上面大佬的js虽然可以加载出来，但是加载的图片是混乱的，所以我只用了大佬的css.js这里我自己直接修改了源码，修改内容如下：

 

 

在根目录下的index.html加入css

 

 我用的资源路径：https://download.csdn.net/download/JavaLLU/89604443

需要把tdt.js中的xxx.xxx.xxx.xx改成自己天地图瓦片服务的内网ip

这样我们就实现了天地图离线加载

欢迎各位大佬前来指正交流

Java程序之猿
关注
下载天地图瓦片框架源码
11-11
下载天地图瓦片框架源码，可以按需下载自己所需要的瓦片，然后本地部署，实现离线瓦片加载
天地图网页API-JavaScript API 4.0离线
weixin_44156366的博客
03-26 1424
本次开发需要在不连接互联网的场景使用天地图api，底图为第三方地图，本地测试环境可以连接互联网，第一次测试时在本地环境用离线的天地图api.js能正常显示地图，放到正式环境之后地图瓦片显示混乱，记录下解决方案。
vue2使用天地图
请叫我欧皇！的博客
08-20 1580
需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。以下是拷贝的网上的地图坐标系，仅作参考（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。
Java+vue天地图离线开发
最新发布
丑货程序员的博客
08-27 748
天地图离线开发
天地图——内网使用离线地图
为技术而生
03-10 4295
在内网中，无法直接使用外网天地图资源。可以将天地图资源下载到内网服务器，并且将天地图​​​​​​​JavaScript API指向到内网服务器，实现内网使用天地图全部功能。
Vue中加载天地图的离线地图
前端-尔嵘
06-17 3874
在上述代码中，我们引入了Leaflet.js和天地图离线地图插件的依赖。在initMap方法中，我们创建了一个地图实例，并使用L.tileLayer.wmts方法来添加天地图离线地图瓦片图层。请将'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png'替换为实际的离线瓦片文件的路径。要在Vue中加载天地图的离线地图，你可以使用L.TileLayer.WMTS插件来实现。
百度、高德、谷歌、天地图等离线地图下载工具，arcgis,太乐地图离线工具、破解版
09-15
百度、高德、谷歌、天地图等离线地图下载工具，arcgis,太乐地图离线工具、破解版，可以直接导出arcgis 瓦片格式。
java下载天地图数据，天地图离线地图，可指定经纬度范围
qq_33427869的博客
09-17 4115
需要用到天地图开发者秘钥。注意天地图API访问次数限制。 代码分享： import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.concurrent.ExecutorService; import java.util.concur..
Cesium 加载 离线的天地图影像瓦片
wbb472的博客
05-29 3575
Cesium 加载 离线的天地图影像瓦片 一、下载 天地图影像 通过水经注软件下载天地图影像（也许有其他下载方式）。 1.下载 水经注软件 链接：http://www.rivermap.cn/down.html#mdwn 我是没有进行购买授权，未购买授权在之后下载影像时 影像大小 和 瓦片功能收到限制。 2. 下载影像 参考链接 https://zhuanlan.zhihu.com/p/102691906 二、制作瓦片 1.通过水经注软件（VIP功能），选择 导出设置—>导出瓦片—>标准TMS
Cesium 加载在线天地图瓦片和离线瓦片功能（cesium开发记录）
weixin_42508580的博客
11-25 7273
Cesium 加载在线天地图瓦片功能 1、未联网状态加载默认本地底图，保证地球有底图显示 let viewer = new Cesium.Viewer('cesiumContainer', { // 未联网状态下 默认显示球面地图 imageryProvider: new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
天地图下载
06-07
天地图下载器
JAVA 天地图矢量、影像瓦片下载+图片叠加融合
02-10
springboot+maven项目。实现了天地图矢量和影像底图瓦片图片的获取、叠加、图片融合拼接等功能；测试类TianDiTuDownload_ds
离线地图的比较，百度地图离线，天地图，openlayers地图
04-07
离线地图的比较，百度地图离线，天地图，openlayers地图
Vue2中CesiumV1.113.0加载离线地图
03-08
在Vue2中集成CesiumV1.113.0并加载离线地图是一个常见的需求，尤其是在开发GIS（地理信息系统）应用时。Cesium是一个强大的3D地球浏览器，使用JavaScript编写，可以展示全球地形、卫星图像和其他地理数据。Vue2是...
vue3-vite-ts-cesium-天地图 地图影像 矢量地图 矢量标注
04-02
这个模板是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着...
记录天地图使用vue+node实现离线瓦片下载
yx1359079856的博客
11-26 1725
记录天地图使用vue+node实现离线瓦片下载思路解析配置package.json直接复制即可openleary中加载 思路解析 一、准备好webstorm，将以下内容复制进去 // An highlighted block var Bagpipe = require('bagpipe') var fs = require("fs"); var request = require("request"); var bou = [121.648978, 40.867574, 131.325647,46.3110
Vue2中Cesium加载离线地图
qq_37312180的博客
01-26 880
Vue2中Cesium加载离线地图。
怎么下载卫星地图导出为离线包
11-15 1140
1.概述 水经注软件除了可以轻松下载无水印Google Earth卫星影像、有明确拍摄日期的历史影像、地方高清天地图、百度高德大字体打印地图，按1万/5千等国家标准图幅下载，对百度坐标与火星坐标进行纠偏；下载陆地及海洋高程、STRM高程、提取10米等高线等深线、CASS高程点之外，还有一个重要的功能就是导出功能。这里，我们以导出离线包参数说明为例，介绍一下软件的导出功能。 2.导出离线包 ...
上面代码报错 ValueError: all the input arrays must have same number of dimensions
06-11
如果您遇到了 `ValueError: all the input arrays must have same number of dimensions` 错误，那么您可以尝试对标签进行维度变换，以使它们具有相同的维度。以下是一个示例代码，展示了如何将标签从一维数组转换为二维数组： ```python import numpy as np from sklearn.preprocessing import label_binarize from sklearn.metrics import ndcg_score # 生成样本标签 y_true = np.array([1, 2, 3, 4, 5]) y_pred = np.array([1, 1, 3, 2, 4]) # 将标签转换为 multiclass-multioutput 格式 classes = np.unique(np.concatenate((y_true,y_pred))) y_true = label_binarize(y_true, classes=classes).reshape((-1, len(classes))) y_pred = label_binarize(y_pred, classes=classes).reshape((-1, len(classes))) # 计算 NDCG 值 ndcg_result = ndcg_score(y_true, y_pred, k=5) print(ndcg_result) ``` 在这个示例中，我们首先使用 `label_binarize` 函数将标签转换为 `multiclass-multioutput` 格式，然后使用 `reshape` 函数将它们的维度变换为相同的二维数组。最后，我们将转换后的标签传入到 `ndcg_score` 函数中计算 NDCG 值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值