直接复制代码放到本地运行即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据经纬度坐标获取对应的切片算法</title>
</head>
<script>
function getPoints2() {
var topTileFromX = -180;
var topTileFromY = 90;
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
};
var strList = document.getElementById("content").value;
var oStringList = strList.split(',');
var level = oStringList[0];
var lon = oStringList[1];
var lat = oStringList[2];
var coef = tdtScale[level] * 256;
var x_num = Math.round((lon - topTileFromX) / coef);
var y_num = Math.round((topTileFromY - lat) / coef);
// var dir = "http://t7.tianditu.com/DataServer?T=vec_c&";
// var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num);
var dir = "http://t1.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&";
var server = "TILEMATRIX=" + String(level) + "&" + "TILEROW=" + String(y_num) + "&" + "TILECOL=" + String(x_num) + "&FORMAT=tiles";
var imageDir = dir + server;
// alert(imageDir);
var imgDiv = document.getElementById("map");
imgDiv.style.backgroundImage = "url(" + imageDir + ")";
}
function lon2Mercator(px) {
var x = px * 20037508.3427892 / 180;
return x;
}
function lat2Mercator(py) {
var y;
y = Math.log(Math.tan((90 + py) * Math.PI / 360)) / (Math.PI / 180);
y = y * 20037508.3427892 / 180;
return y;
}
function getPoints3() {
var topTileFromX = -20037508.3427892;
var topTileFromY = 20037508.3427892;
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
};
var strList = document.getElementById("content").value;
var oStringList = strList.split(',');
var level = oStringList[0];
var lon = oStringList[1];
var lat = oStringList[2];
lon = lon2Mercator(parseFloat(lon));
lat = lat2Mercator(parseFloat(lat));
var coef = tdtScale[level] * 256;
var x_num = Math.round((lon - topTileFromX) / coef);
var y_num = Math.round((topTileFromY - lat) / coef);
// var dir = "http://t7.tianditu.com/DataServer?T=vec_c&";
// var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num);
//var dir = "http://t0.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&";
// var server = "TILEMATRIX="+String(level)+"&"+"TILEROW="+String(y_num)+"&"+"TILECOL="+String(x_num)+"&FORMAT=tiles";
var dir = "http://t0.tianditu.com/DataServer?T=vec_w&";
var server = "l=" + String(level) + "&" + "x=" + String(x_num) + "&" + "y=" + String(y_num);
var imageDir = dir + server;
var imgDiv = document.getElementById("map");
imgDiv.style.backgroundImage = "url(" + imageDir + ")";
}
function getPoints4() {
var topTileFromX = -20037508.3427892;
var topTileFromY = 20037508.3427892;
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
};
var strList = document.getElementById("content").value;
var oStringList = strList.split(',');
var level = oStringList[0];
var lon = oStringList[1];
var lat = oStringList[2];
lon = lon2Mercator(parseFloat(lon));
lat = lat2Mercator(parseFloat(lat));
var coef = tdtScale[level] * 256;
var x_num = Math.round((lon - topTileFromX) / coef);
var y_num = Math.round((topTileFromY - lat) / coef);
var dir = "http://a.tile.openstreetmap.org/";
var server = String(level) + "/" + String(x_num) + "/" + String(y_num) + ".png";
var imageDir = dir + server;
var imgDiv = document.getElementById("map");
imgDiv.style.backgroundImage = "url(" + imageDir + ")";
}
function getPoints5() {
var topTileFromX = -20037508.3427892;
var topTileFromY = 20037508.3427892;
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
};
var strList = document.getElementById("content").value;
var oStringList = strList.split(',');
var level = oStringList[0];
var lon = oStringList[1];
var lat = oStringList[2];
lon = lon2Mercator(parseFloat(lon));
lat = lat2Mercator(parseFloat(lat));
var coef = tdtScale[level] * 256;
var x_num = Math.round((lon - topTileFromX) / coef);
var y_num = Math.round((topTileFromY - lat) / coef);
var dir = "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&";
var server = "x=" + String(x_num) + "&" + "y=" + String(y_num) + "&" + "z=" + String(level) + "&s=Galil";
var imageDir = dir + server;
var imgDiv = document.getElementById("map");
imgDiv.style.backgroundImage = "url(" + imageDir + ")";
document.getElementById('map-text').value = imageDir;
}
function getPoints6() {
var topTileFromX = -20037508.3427892;
var topTileFromY = 20037508.3427892;
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
};
var strList = document.getElementById("content").value;
var oStringList = strList.split(',');
var level = oStringList[0];
var lon = oStringList[1];
var lat = oStringList[2];
lon = lon2Mercator(parseFloat(lon));
lat = lat2Mercator(parseFloat(lat));
var coef = tdtScale[level] * 256;
var x_num = Math.round((lon - topTileFromX) / coef);
var y_num = Math.round((topTileFromY - lat) / coef);
var dir = "https://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=8<ype=11&";
var server = "x=" + String(x_num) + "&" + "y=" + String(y_num) + "&" + "z=" + String(level) + "&s=Galil";
var imageDir = dir + server;
var imgDiv = document.getElementById("map");
imgDiv.style.backgroundImage = "url(" + imageDir + ")";
document.getElementById('map-text').value = imageDir;
}
</script>
<body>
<input id="content" type="text" autocomplete="on" maxlength="100" size="35">
<!--<input type="button" value="获取天地图经纬度" onClick="getPoints2();"/>
<input type="button" value="获取天地图墨卡托" onClick="getPoints3();"/>-->
<input type="button" value="获取OpenstreetMap" onClick="getPoints4();"/>
<input type="button" value="获取谷歌地图" onClick="getPoints5();"/>
<input type="button" value="获取高德地图" onClick="getPoints6();"/>
<div id="map" style="width:256px; height: 256px;"></div>
<input type="text" id="map-text" style=" width: 1000px;">
<script type="text/javascript">
document.getElementById("content").value = "13,113.6,34.8";
</script>
</body>
</html>
