51 lines
No EOL
1.7 KiB
JavaScript
51 lines
No EOL
1.7 KiB
JavaScript
Ox.documentReady(function() {
|
|
var image = new Image();
|
|
image.onload = function() {
|
|
var c = Ox.canvas(image),
|
|
point = {lat: 40.725342, lng: -73.996824}, // Broadway & Houston, NY
|
|
circles = Ox.range(1, 16).map(function(i) {
|
|
return Ox.getCircle(
|
|
point,
|
|
i * Ox.EARTH_CIRCUMFERENCE / 2 / 16,
|
|
8
|
|
);
|
|
}),
|
|
lines = Ox.range(16).map(function(i) {
|
|
return Ox.getLine(
|
|
point,
|
|
Ox.getPoint(point, Ox.EARTH_CIRCUMFERENCE / 2 - 1000, i * 360 / 16),
|
|
8
|
|
);
|
|
});
|
|
function drawLine(pointA, pointB) {
|
|
var xyA, xyB;
|
|
if (Math.abs(pointA.lng - pointB.lng) < 180) {
|
|
xyA = getXY(pointA);
|
|
xyB = getXY(pointB);
|
|
c.context.moveTo(xyA.x, xyA.y);
|
|
c.context.lineTo(xyB.x, xyB.y);
|
|
c.context.stroke();
|
|
}
|
|
}
|
|
function drawPath(points, close) {
|
|
points.forEach(function(point, i) {
|
|
i && drawLine(points[i - 1], point);
|
|
});
|
|
close && drawLine(points[points.length - 1], points[0])
|
|
}
|
|
function getXY(point) {
|
|
return Ox.map(Ox.getXYByLatLng(point), function(v) {
|
|
return v * 1024;
|
|
});
|
|
}
|
|
document.body.appendChild(c.canvas);
|
|
c.context.strokeStyle = 'rgb(255, 0, 0)';
|
|
circles.forEach(function(points) {
|
|
drawPath(points, true);
|
|
});
|
|
lines.forEach(function(points) {
|
|
drawPath(points);
|
|
});
|
|
}
|
|
image.src = 'png/earth1024.png';
|
|
}); |