标签：
根据经纬度坐标获取对应的切片算法，含天地图、谷歌等。
Javascript：
1 function getPoints2() 2 { 3 var topTileFromX = -180; 4 var topTileFromY = 90; 5 6 var tdtScale={18:5.36441802978515E-06,17:1.07288360595703E-05,16:2.1457672119140625E-05,15:4.29153442382814E-05,14:8.58306884765629E-05,13:0.000171661376953125,12:0.00034332275390625,11:0.0006866455078125,10: 0.001373291015625,9:0.00274658203125,8:0.0054931640625,7:0.010986328125,6:0.02197265625,5:0.0439453125,4:0.087890625,3:0.17578125,2:0.3515625,1:0.703125}; 7 8 var strList = document.getElementById("content").value; 9 10 11 var oStringList = strList.split(‘,‘); 12 var level = oStringList[0]; 13 var lon = oStringList[1]; 14 var lat = oStringList[2]; 15 16 17 var coef = tdtScale[level]*256; 18 19 var x_num = Math.round((lon - topTileFromX) / coef); 20 var y_num = Math.round((topTileFromY - lat) / coef); 21 22 // var dir = "http://t7.tianditu.com/DataServer?T=vec_c&"; 23 // var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num); 24 25 26 var dir = "http://t1.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&"; 27 var server = "TILEMATRIX="+String(level)+"&"+"TILEROW="+String(y_num)+"&"+"TILECOL="+String(x_num)+"&FORMAT=tiles"; 28 29 30 var imageDir = dir+server; 31 32 33 // alert(imageDir); 34 35 var imgDiv = document.getElementById("map"); 36 imgDiv.style.backgroundImage = "url("+imageDir+")"; 37 38 39 40 } 41 42 43 function lon2Mercator(px) 44 { 45 var x = px * 20037508.3427892 / 180; 46 return x; 47 } 48 49 function lat2Mercator(py) 50 { 51 52 var y; 53 y = Math.log(Math.tan((90 + py) * Math.PI / 360)) / (Math.PI / 180); 54 55 y = y * 20037508.3427892 / 180; 56 57 return y; 58 } 59 60 function getPoints3() 61 { 62 63 64 var topTileFromX = -20037508.3427892; 65 var topTileFromY = 20037508.3427892; 66 67 var tdtScale={18:0.597164283559817,17:1.19432856685505,16:2.38865713397468,15:4.77731426794937,14:9.55462853563415,13:19.1092570712683,12:38.2185141425366,11:76.4370282850732,10:152.8740565704,9:305.7481128,8:611.49622628138,7:1222.99245256249,6:2445.98490512499,5:4891.96981024998,4:9783.93962049996,3:19567.8792409999,2:39135.7584820001,1:78271.5169639999}; 68 69 var strList = document.getElementById("content").value; 70 71 72 var oStringList = strList.split(‘,‘); 73 var level = oStringList[0]; 74 var lon = oStringList[1]; 75 var lat = oStringList[2]; 76 77 lon = lon2Mercator(parseFloat(lon)); 78 lat = lat2Mercator(parseFloat(lat)); 79 80 var coef = tdtScale[level]*256; 81 82 var x_num = Math.round((lon - topTileFromX) / coef); 83 var y_num = Math.round((topTileFromY - lat) / coef); 84 85 // var dir = "http://t7.tianditu.com/DataServer?T=vec_c&"; 86 // var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num); 87 88 89 //var dir = "http://t0.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&"; 90 // var server = "TILEMATRIX="+String(level)+"&"+"TILEROW="+String(y_num)+"&"+"TILECOL="+String(x_num)+"&FORMAT=tiles"; 91 92 var dir = "http://t0.tianditu.com/DataServer?T=vec_w&"; 93 var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num); 94 95 96 97 var imageDir = dir+server; 98 99 100 var imgDiv = document.getElementById("map"); 101 imgDiv.style.backgroundImage = "url("+imageDir+")"; 102 103 104 105 } 106 107 108 function getPoints4() 109 { 110 111 var topTileFromX = -20037508.3427892; 112 var topTileFromY = 20037508.3427892; 113 114 var tdtScale={18:0.597164283559817,17:1.19432856685505,16:2.38865713397468,15:4.77731426794937,14:9.55462853563415,13:19.1092570712683,12:38.2185141425366,11:76.4370282850732,10:152.8740565704,9:305.7481128,8:611.49622628138,7:1222.99245256249,6:2445.98490512499,5:4891.96981024998,4:9783.93962049996,3:19567.8792409999,2:39135.7584820001,1:78271.5169639999}; 115 116 var strList = document.getElementById("content").value; 117 118 119 var oStringList = strList.split(‘,‘); 120 var level = oStringList[0]; 121 var lon = oStringList[1]; 122 var lat = oStringList[2]; 123 124 lon = lon2Mercator(parseFloat(lon)); 125 lat = lat2Mercator(parseFloat(lat)); 126 127 var coef = tdtScale[level]*256; 128 129 var x_num = Math.round((lon - topTileFromX) / coef); 130 var y_num = Math.round((topTileFromY - lat) / coef); 131 132 133 var dir = "http://a.tile.openstreetmap.org/"; 134 var server = String(level)+"/"+String(x_num)+"/"+String(y_num)+".png"; 135 136 137 var imageDir = dir+server; 138 139 140 var imgDiv = document.getElementById("map"); 141 imgDiv.style.backgroundImage = "url("+imageDir+")"; 142 143 144 145 } 146 147 function getPoints5() 148 { 149 150 var topTileFromX = -20037508.3427892; 151 var topTileFromY = 20037508.3427892; 152 153 var tdtScale={18:0.597164283559817,17:1.19432856685505,16:2.38865713397468,15:4.77731426794937,14:9.55462853563415,13:19.1092570712683,12:38.2185141425366,11:76.4370282850732,10:152.8740565704,9:305.7481128,8:611.49622628138,7:1222.99245256249,6:2445.98490512499,5:4891.96981024998,4:9783.93962049996,3:19567.8792409999,2:39135.7584820001,1:78271.5169639999}; 154 155 var strList = document.getElementById("content").value; 156 157 158 var oStringList = strList.split(‘,‘); 159 var level = oStringList[0]; 160 var lon = oStringList[1]; 161 var lat = oStringList[2]; 162 163 lon = lon2Mercator(parseFloat(lon)); 164 lat = lat2Mercator(parseFloat(lat)); 165 166 var coef = tdtScale[level]*256; 167 168 var x_num = Math.round((lon - topTileFromX) / coef); 169 var y_num = Math.round((topTileFromY - lat) / coef); 170 171 172 173 var dir = "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&"; 174 var server = "x="+String(x_num)+"&"+"y="+String(y_num)+"&"+"z="+String(level)+"&s=Galil"; 175 176 177 178 var imageDir = dir+server; 179 180 181 var imgDiv = document.getElementById("map"); 182 imgDiv.style.backgroundImage = "url("+imageDir+")"; 183 184 185 186 }
测试HTML：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>获取瓦片</title> 7 <style> 8 v\:* { Behavior: url(#default#VML)} 9 </style> 10 <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> 11 </head> 12 <script language="javascript" src="Tool.js"></script> 13 <body> 14 15 <input id="content" type="text" autocomplete="on" maxlength="100" size="35"> 16 <input type="button" value="获取天地图经纬度" onClick="getPoints2();"/> <input type="button" value="获取天地图墨卡托" onClick="getPoints3();"/> <input type="button" value="获取OpenstreetMap" onClick="getPoints4();"/> 17 <input type="button" value="获取谷歌地图" onClick="getPoints5();"/> 18 <div id="map"> </div> 19 20 <script type="text/javascript"> 21 22 23 document.getElementById("content").value = "10,113.6,34.8"; 24 25 </script> 26 27 </body>
标签：
原文地址：http://www.cnblogs.com/lohcve/p/4731587.html
