• JS下载地图离线数据，前端下载谷歌离线地图

    去年做了java下载天地图数据的工具，由于每次都要手动查找再更改经纬度范围，用着不太方便，正好前段时间学习了JS打包下载文件的技术，于是花了点时间做了这个前端配置选择地图信息并下载离线地图的工具。

    不过经实际测试，天地图数据通过JS下载时会报403拒绝访问，因为天地图服务端会识别出数据pa取并拒绝访问（应该是请求头或者什么的有特殊的识别码）

    不过fan墙下载谷歌卫星地图是非常奈斯的。

    注：JS下载不能完美解决跨域问题，但是对于需要浏览器代理访问的地图源是非常友好的。

    请看示例：


     HTML部分代码：

    1. <body>
    2. 	<div class="content">
    3. 		<div class="title">地图源设置div>
    4. 		<div class="optionGroup">
    5. 			<div class="option">
    6. 				<div class="left">地图URL：div>
    7. 				<div class="right">
    8. 					<input type="text" style="width:500px" id="mapUrl" value="https://khms{s}.google.com/kh/v=930?x={x}&y={y}&z={z}"/>
    9. 					<label class="detail">示例：https://khms{s}.google.com/kh/v=930?x={x}&y={y}&z={z}。其中{s}是可选的，若存在将使用主机编号值；{x}、{y}、{z}是必不可少的。label>
    10. 				div>
    11. 			div>
    12. 			<div class="option">
    13. 				<div class="left">主机编号[开始]：div>
    14. 				<div class="right">
    15. 					<input type="text" id="minServer" style="width:80px;" value="0" oninput="this.value=this.value.replace(/[^\d]/g,'')">
    16. 				div>
    17. 			div>
    18. 			<div class="option">
    19. 				<div class="left">主机编号[结束]：div>
    20. 				<div class="right">
    21. 					<input type="text" id="maxServer" style="width:80px;" value="3" oninput="this.value=this.value.replace(/[^\d]/g,'')">
    22. 				div>
    23. 			div>
    24. 			<div class="option">
    25. 				<div class="left">最大级别：div>
    26. 				<div class="right">
    27. 					<select id="maxZoom">
    28. 						<option value="1">1option>
    29. 						<option value="2">2option>
    30. 						<option value="3">3option>
    31. 						<option value="4">4option>
    32. 						<option value="5">5option>
    33. 						<option value="6">6option>
    34. 						<option value="7">7option>
    35. 						<option value="8">8option>
    36. 						<option value="9">9option>
    37. 						<option value="10">10option>
    38. 						<option value="11">11option>
    39. 						<option value="12">12option>
    40. 						<option value="13">13option>
    41. 						<option value="14">14option>
    42. 						<option value="15">15option>
    43. 						<option value="16">16option>
    44. 						<option value="17">17option>
    45. 						<option value="18" selected="selected">18option>
    46. 						<option value="19">19option>
    47. 						<option value="20">20option>
    48. 						<option value="21">21option>
    49. 						<option value="22">22option>
    50. 						<option value="23">23option>
    51. 						<option value="24">24option>
    52. 						<option value="25">25option>
    53. 					select>
    54. 				div>
    55. 			div>
    56. 			<div class="option">
    57. 				<div class="left">投影类型：div>
    58. 				<div class="right">
    59. 					<input type="radio" name="projection" value="mkt" checked="cheched"><label>墨卡托label>
    60. 					  
    61. 					<input type="radio" name="projection" value="lonlat"><label>等经纬度label>
    62. 				div>
    63. 			div>
    64. 			<div class="option">
    65. 				<div class="left">图片大小：div>
    66. 				<div class="right">
    67. 					<input type="radio" name="tileSize" value="256" checked="cheched">256像素
    68. 				div>
    69. 			div>
    70. 		div>
    71. 		<div class="title">下载设置div>
    72. 		<div class="optionGroup">
    73. 			<div class="option">
    74. 				<div class="left">下载级别[开始]：div>
    75. 				<div class="right">
    76. 					<input type="text" id="startZoom" style="width:80px;" value="1" oninput="this.value=this.value.replace(/[^\d]/g,'')">
    77. 				div>
    78. 			div>
    79. 			<div class="option">
    80. 				<div class="left">下载级别[结束]：div>
    81. 				<div class="right">
    82. 					<input type="text" id="endZoom" style="width:80px;" value="7" oninput="this.value=this.value.replace(/[^\d]/g,'')">
    83. 				div>
    84. 			div>
    85. 			<div class="option" style="height:120px;">
    86. 				<div class="left">下载范围：div>
    87. 				<div class="right" style="height:120px;">
    88. 					<div style="float:left;width:200px;height:120px;border-right:dotted 1px #888;">
    89. 						左上角纬度：
    90. 						<input type="text" id="maxLat" style="width:80px;" value="41" oninput="this.value=this.value.replace(/[^\d.]/g,'')">br>
    91. 						左上角经度：
    92. 						<input type="text" id="minLon" style="width:80px;" value="115" oninput="this.value=this.value.replace(/[^\d.]/g,'')">br>
    93. 						右下角纬度：
    94. 						<input type="text" id="minLat" style="width:80px;" value="39" oninput="this.value=this.value.replace(/[^\d.]/g,'')">br>
    95. 						右下角经度：
    96. 						<input type="text" id="maxLon" style="width:80px;" value="118" oninput="this.value=this.value.replace(/[^\d.]/g,'')">br>
    97. 					div>
    98. 					<div class="button" id="chooesRange" style="float:left;width:auto;height:26px;padding:0px 10px;margin-top:90px;font:normal 14px/26px '微软雅黑';color:#333;background:#ccc;border-radius:3px;cursor:pointer">框选地图范围div>
    99. 				div>
    100. 			div>
    101. 			<div class="option">
    102. 				<div class="left">保存格式：div>
    103. 				<div class="right">
    104. 					<input type="radio" name="imageFormat" value="jpg" checked="cheched">jpg
    105. 				div>
    106. 			div>
    107. 			<div class="option">
    108. 				<label class="detail" style="color:red;">注：文件将{yyyyMMddHHmmss}.zip格式命名打包下载，其中瓦片数据文件存放规则为{z}/{y}/{x}.jpglabel>
    109. 			div>
    110. 		div>
    111. 		
    112. 		<div class="buttonGroup">
    113. 			<div class="button" id="checkMap">验证地图配置div>
    114. 			<div class="button" id="downloadMap">开始下载div>
    115. 		div>
    116. 	div>
    117. 	
    118. 	<div class="mark" id="mark">div>
    119. 	<div class="mapView" id="mapView">
    120. 		<div class="view-top">
    121. 			<div class="label" id="view-title">验证地图配置div>
    122. 			<div class="view-close" id="view-close">div>
    123. 		div>
    124. 		<div class="view-content">
    125. 			<div id="mapDiv">div>
    126. 			<div class="drawUtil" id="drawUtil">
    127. 				<div class="button" id="submit">确定div>
    128. 				<div class="button" id="redraw">重新框选div>
    129. 			div>
    130. 			<div class="bottomUtil">
    131. 				<div id="currentZoom">div>
    132. 				<div id="currentCoordinate">div>
    133. 			div>
    134. 		div>
    135. 	div>
    136. 	<div class="waitMark" id="waitMark">
    137. 		<div class="waitInfo" id="waitInfo">处理中，请稍等...div>
    138. 	div>
    139. body>

    CSS部分代码：

    JS部分代码（篇幅太长，截取小部分）：

    1. function downloadMap(){
    2. 	$("#waitInfo").html("处理中，请稍等...");
    3. 	var mapUrl = $("#mapUrl").val();
    4. 	var minServer = $("#minServer").val();
    5. 	var maxServer = $("#maxServer").val();
    6. 	var maxZoom = $("#maxZoom").val();
    7. 	var projection = $("input[name='projection']").val();
    8. 	var serverArr = [];
    9. 	if(typeof(mapUrl)=="undefined" || mapUrl==null || mapUrl==""){
    10. 		alert("请输入地图连接");
    11. 		return false;
    12. 	}
    13. 	if(mapUrl.indexOf("{s}") > -1){
    14. 		var isServerOk = true;
    15. 		try{
    16. 			minServer = parseInt(minServer);
    17. 			maxServer = parseInt(maxServer);
    18. 		}catch(e){
    19. 			isServerOk = false;
    20. 		}
    21. 		if(isServerOk){
    22. 			for(var i=minServer; i<=maxServer; i++){
    23. 				serverArr.push(i+"");
    24. 			}
    25. 		}else{
    26. 			alert("主机编号设置错误");
    27. 			return false;
    28. 		}
    29. 		if(serverArr.length == 0){
    30. 			alert("主机编号设置错误");
    31. 			return false;
    32. 		}
    33. 	}
    34. 	var imageFormat = $("input[name='imageFormat']").val();
    35. 	var startLat = parseFloat($("#maxLat").val());//左上角纬度：开始纬度（从北到南）
    36. 	var endLat = parseFloat($("#minLat").val());//右下角纬度：结束纬度（从北到南）
    37. 	var startLon = parseFloat($("#minLon").val());//左上角经度：开始经度（从西到东）
    38. 	var endLon = parseFloat($("#maxLon").val());//右下角经度：结束经度（从西到东）
    39. 	var minZoom = parseInt($("#startZoom").val());//下载级别[开始]
    40. 	var maxZoom = parseInt($("#endZoom").val());//下载级别[结束]
    41. 	
    42. 	if(typeof(startLat)=="undefined" || startLat==null || startLat==""){
    43. 		alert("请输入左上角纬度");
    44. 		return false;
    45. 	}
    46. 	if(typeof(startLon)=="undefined" || startLon==null || startLon==""){
    47. 		alert("请输入左上角经度");
    48. 		return false;
    49. 	}
    50. 	if(typeof(endLat)=="undefined" || endLat==null || endLat==""){
    51. 		alert("请输入右下角纬度");
    52. 		return false;
    53. 	}
    54. 	if(typeof(minZoom)=="undefined" || minZoom==null || minZoom==""){
    55. 		alert("请输入下载级别[开始]");
    56. 		console.log(22)
    57. 		return false;
    58. 	}
    59. 	if(typeof(maxZoom)=="undefined" || maxZoom==null || maxZoom==""){
    60. 		alert("请输入下载级别[结束]");
    61. 		return false;
    62. 	}
    63. 	
    64. 	zip = new JSZip();
    65. 	zipName = new Date().format('yyyyMMddHHmmss');
    66. 	fileFolder = zip.folder(zipName);
    67. 	fileList = [];
    68. 	fileCount = 0;
    69. 	allCount = 0;
    70.  
    71. 	promiseArr = [];//异步代码集合
    72.  
    73. 	if(projection == "lonlat"){//等经纬度
    74. 		//先计算出一共需要下载多少个
    75. 		for(var z=minZoom; z<=maxZoom; z++){
    76. 			var deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
    77. 			var startX = parseInt((startLon + 180) / deg / 256);//减数取整
    78. 			var endX = parseInt((endLon + 180) / deg / 256);//加数取整
    79. 			var startY = parseInt((90 - startLat) / deg / 256);
    80. 			var endY = parseInt((90 - endLat) / deg / 256);
    81. 			allCount += (endY-startY+1) * (endX-startX+1);
    82. 		}
    83. 		//再执行下载，下载是异步的，需要通过allCount判断是否全部下载完毕
    84. 		for(var z=minZoom; z<=maxZoom; z++){
    85. 			var deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
    86. 			var startX = parseInt((startLon + 180) / deg / 256);//减数取整
    87. 			var endX = parseInt((endLon + 180) / deg / 256);//加数取整
    88. 			var startY = parseInt((90 - startLat) / deg / 256);
    89. 			var endY = parseInt((90 - endLat) / deg / 256);
    90. 			for(var y=startY; y<=endY; y++){
    91. 				for(var x=startX; x<=endX; x++){
    92. 					var url = mapUrl.replace("{s}", serverArr[parseInt(Math.random()*serverArr.length)]).replace("{z}", z+"").replace("{y}", y+"").replace("{x}", x+"");
    93. 					var name = z+"/"+y+"/"+x+"."+imageFormat;
    94. 					savePictureZip(url, name);
    95. 					//savePictureZip2(url, name);
    96. 				}
    97. 			}
    98. 		}
    99. 	}else{//墨卡托
    100. 		//先计算出一共需要下载多少个
    101. 		for(var z=minZoom; z<=maxZoom; z++){
    102. 			var deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
    103. 			var startX = parseInt((startLon + 180) / deg / 256);
    104. 			var endX = parseInt((endLon + 180) / deg / 256);
    105. 			var startY = parseInt((parseInt(Math.pow(2, z) * 256 / 2) - parseInt((Math.log(Math.tan((90 + startLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256);
    106. 			var endY = parseInt((parseInt(Math.pow(2, z) * 256 / 2) - parseInt((Math.log(Math.tan((90 + endLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256);
    107. 			allCount += (endY-startY+1) * (endX-startX+1);
    108. 		}
    109. 		//再执行下载，下载是异步的，需要通过allCount判断是否全部下载完毕
    110. 		for(var z=minZoom; z<=maxZoom; z++){
    111. 			var deg = 360.0 / Math.pow(2, z) / 256;//一个像素点代表多少度
    112. 			var startX = parseInt((startLon + 180) / deg / 256);
    113. 			var endX = parseInt((endLon + 180) / deg / 256);
    114. 			var startY = parseInt((parseInt(Math.pow(2, z) * 256 / 2) - parseInt((Math.log(Math.tan((90 + startLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256);
    115. 			var endY = parseInt((parseInt(Math.pow(2, z) * 256 / 2) - parseInt((Math.log(Math.tan((90 + endLat) * Math.PI / 360)) / (Math.PI / 180)) / (360/Math.pow(2, z)/256) + 0.5)) / 256);
    116. 			for(var y=startY; y<=endY; y++){
    117. 				for(var x=startX; x<=endX; x++){
    118. 					var url = mapUrl.replace("{s}", serverArr[parseInt(Math.random()*serverArr.length)]).replace("{z}", z+"").replace("{y}", y+"").replace("{x}", x+"");
    119. 					var name = z+"/"+y+"/"+x+"."+imageFormat;
    120. 					savePictureZip(url, name);
    121. 					//savePictureZip2(url, name);
    122. 				}
    123. 			}
    124. 		}
    125. 	}
    126. 	var t = window.setInterval(function(){
    127. 		if(fileCount == allCount){
    128. 			$("#waitMark").css("display", "none");
    129. 			if(fileList.length < fileCount){
    130. 				alert("部分文件下载失败，请重新尝试下载");
    131. 			}
    132. 			window.clearInterval(t);
    133. 		}
    134. 	}, 50);
    135. }
    136.  
    137. function savePictureZip(url, name){
    138. 	try{
    139. 		var xhr = new XMLHttpRequest();
    140. 		xhr.open('get', url, true);
    141. 		xhr.responseType = 'blob';//二进制对象，binary
    142. 		xhr.onload = function(){
    143. 			fileCount++;
    144. 			$("#waitInfo").html("正在下载："+url);
    145. 			var blob = xhr.response;//response 属性返回响应的正文，取决于 responseType 属性。
    146. 			if(blob.type.indexOf("image") > -1){
    147. 				fileList.push({name: name, content: blob});
    148. 				if (fileCount==allCount && fileList.length==fileCount) {
    149. 					if (fileList.length > 0) {
    150. 						$("#waitInfo").html("正在打包");
    151. 						for (var k = 0; k < fileList.length; k++) {
    152. 							// 往文件夹中，添加个文件的数据
    153. 							fileFolder.file(fileList[k].name, fileList[k].content, {
    154. 								binary: true //二进制
    155. 							})
    156. 						}
    157. 						zip.generateAsync({type: 'blob'}).then(function(content){
    158. 							saveAs(content, zipName+'.zip');
    159. 						})
    160. 					}else{
    161. 						alert("没有文件");
    162. 					}
    163. 					$("#waitMark").css("display", "none");
    164. 				};
    165. 			}
    166. 		};
    167. 		xhr.ontimeout = function(){
    168. 			fileCount++;
    169. 			$("#waitInfo").html("正在下载："+url);
    170. 		};
    171. 		xhr.onerror = function(){
    172. 			fileCount++;
    173. 			$("#waitInfo").html("正在下载："+url);
    174. 		};
    175. 		xhr.send(null);
    176. 	}catch(e){
    177. 	}
    178. }

    完整代码请点击链接下载：https://download.csdn.net/download/qq_33427869/86790578

    java下载天地图数据，天地图离线地图，可指定经纬度范围_RainingTime的博客-CSDN博客_天地图离线地图需要用到天地图开发者秘钥。注意天地图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..https://blog.csdn.net/qq_33427869/article/details/120347939

  • 相关阅读:
    SpringMVC之CRUD和文件上传下载
    曲线任意里程中边桩坐标正反算4800P计算序
    足球小将 NFT 作品集
    游戏服务器怎么设置防护？游戏服务器安全防护策略
    智康护智慧养老——物联系统解决方案
    表格加上表格头部的搜索封装
    1：异常的本质_调试核心理念
    数据结构实战开发教程（七）字符串类的创建、KMP 子串查找算法、KMP 算法的应用、递归的思想与应用
    Linux用户空间与内核空间（理解高端内存）
    Google Earth Engine APP（GEE）——一个可以时序动画监测的动态APP
  • 原文地址：https://blog.csdn.net/qq_33427869/article/details/127422496