通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片

直接复制代码放到本地运行即可
<!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&ltype=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>
专注前端30年博客专家
发布了402 篇原创文章 · 获赞 544 · 访问量 212万+
他的留言板关注
通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片

猜你喜欢
