<! 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>