模拟地图瓦片加载

<! doctype>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        canvas {
            border: 1px solid black
        }
    </style>

</head>

<body>
    <canvas id="canvas" width="1000px" height="500px" style="position:absolute;left:0;top:0"></canvas>
    <script>
      //把经纬度转换成平面坐标
        function LatToPx(obj) {
            return {
                x: ((obj.lng + 180) / 360) * 1000,
                y: -((obj.lat - 90) / 180) * 500
            }
        }

        function toX(lng) {
            return ((lng + 180) / 360) * 1000
        }

        function toY(lat) {
            return ((lat + 90) / 180) * 500
        }
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle = "red";

        //把横轴分为100份  纵轴分成50份
        var xArr = [];
        var stepx = 360 / 20
        var yArr = [];
        var stepY = 180 / 10
        for (var i = 0; i < 20; i++) {
            xArr.push(+(stepx * i - 180).toFixed(2))
            console.log("&&&&&&&&", toX(+(stepx * i - 180).toFixed(2)))
        }
        for (var i = 0; i < 10; i++) {
            yArr.push(+(stepY * i - 90).toFixed(2))
            console.log("******", toY(+(stepY * i - 90).toFixed(2)))
        }

        console.log(xArr, yArr)
        var img = new Image();
        img.src = 33 + ".png"
        var promise = []
        img.onload = function() {
            for (var i = 0; i < xArr.length; i++) {
                for (var j = 0; j < yArr.length; j++) {
                    ctx.beginPath();
                    ctx.arc(toX(xArr[i]), toY(yArr[j]), 2, 0, 2 * Math.PI);
                    ctx.stroke();
                    promise.push(aa(i, toX(xArr[i]), toY(yArr[j])));

                    function aa(i, a, b) {
                        return function() {
                            var img = new Image();
                            console.log("@@@", a * 360 / 1000 - 180, b * 180 / 500 - 90)
                            var lng = a * 360 / 1000 - 180;
                            var lat = b * 180 / 500 - 90;
                            console.log("?lng=" + a + "&lat=" + b + "&level=" + 1)
                            img.src = "33.png"
                            img.onload = function() {
                                ctx.beginPath();
                                //ctx.drawImage(img,0,0,toX(stepx-180),toX(stepx-180),a,b,toX(stepx-180),toX(stepx-180));
                                ctx.drawImage(img, a, b, toX(stepx - 180), toX(stepx - 180), a, b, toX(stepx - 180), toX(stepx -
                                    180));
                                //ctx.arc(a,b,5,0,2*Math.PI);
                                //ctx.stroke();
                            }
                        }
                    }
                }
            }
        }
        ctx.stroke();
        var y = 0;
        window.timer = setInterval(function() {
            if (y == promise.length - 1) {
                clearInterval(window.timer)
            }
            promise[y]()
            y++;
        }, 500)
    </script>



</body>

</html>
posted @ 2020-08-13 16:17  刘浩2561179983  阅读(330)  评论(0)  编辑  收藏  举报