记录天地图使用vue+node实现离线瓦片下载

记录天地图使用vue+node实现离线瓦片下载

思路解析

一、准备好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.311072];//下载范围

var Minlevel = 2;//最小层级
var Maxlevel = 14;//最大层级
var token = '901339dbb203e65286a9b9702278dbd8';//天地图key(如果失效去天地图官网申请)
var zpath = './text'; // 瓦片目录
var speed = 100;//并发数
var mapstyle = 'vec_w';//地图类型(img_w:影像底图 cia_w:影像标注 vec_w:街道底图 cva_w街道标注,备注,自己再api找相对于的)

var all = [];
var user_agent_list_2 = [
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0",
    "Mozilla/5.0 (X11; U; Linux x86_64; zh-CN; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11",
    "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.133 Safari/534.16",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 TaoBrowser/2.0 Safari/536.11",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.71 Safari/537.1 LBBROWSER",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; QQBrowser/7.0.3698.400)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E)",
    "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.84 Safari/535.11 SE 2.X MetaSr 1.0",
    "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SV1; QQDownload 732; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/4.4.3.4000 Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 UBrowser/4.0.3214.0 Safari/537.36"
]


/**
 * 计算经纬度转换成瓦片坐标
 * @param {Number} lng 经度 
 * @param {Number} lat 纬度
 * @param {Number} level 层级 
 */
function calcXY(lng, lat, level) {
   
    let x = (lng + 180) / 360
    let title_X = Math.floor(x * Math.pow(2, level))
    let lat_rad = lat * Math.PI / 180
    let y = (1 - Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI) / 2
    let title_Y = Math.floor(y * Math.po
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
地图提供了离线地图服务的下载和部署方式。以下是一个简单的示例,介绍如何下载使用地图的离线服务,并在Vue项目中进行部署: 1. 下载线地图数据:首先,你需要到天地图官网(http://www.tianditu.gov.cn/)下载线地图数据。根据自己的需求选择合适的地区和数据类型进行下载下载后,将地图数据保存到项目的某个目录下,例如`public/tianditu`。 2. 配置离线地图服务:在Vue项目的`public/index.html`文件中,添加以下代码来配置离线地图服务: ```html <!DOCTYPE html> <html> <head> <!-- 其他头部内容 --> <script type="text/javascript"> window.TDT_DATA_PATH = '/tianditu/'; // 离线地图数据的路径 </script> </head> <body> <!-- 其他页面内容 --> </body> </html> ``` 确保将`/tianditu/`替换为你保存离线地图数据的目录路径。 3. 安装天地图组件:在Vue项目的根目录中,运行以下命令来安装天地图Vue组件: ``` npm install @turf/turf vue-tianditu ``` 这将安装天地图Vue组件以及用于地理空间计算的Turf.js库。 4. 配置天地图组件:在Vue项目的`main.js`文件中,添加以下代码来引入和配置天地图组件: ```javascript import Vue from 'vue' import VueTianditu from 'vue-tianditu' Vue.use(VueTianditu) ``` 5. 使用地图组件:在Vue项目中的组件中使用地图组件。例如,在`App.vue`中添加以下代码来显示一个离线地图: ```html <template> <div id="app"> <vue-tianditu :isOffline="true"> <!-- 添加其他地图相关的组件或标记等 --> </vue-tianditu> </div> </template> ``` 注意,我们在`<vue-tianditu>`标签中设置了`:isOffline="true"`,以指示使用线地图数据。 6. 构建和运行:完成上述配置后,你可以使用Vue CLI提供的命令来构建和运行你的离线服务应用: ``` npm run serve ``` 这将启动一个开发服务器,并在浏览器中显示你的应用。 以上是一个简单的示例,你可以根据具体需求使用更多天地图提供的功能和组件来部署离线服务。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值