html5 canvas：服务器或客户端从经纬度快速转换为像素值

Question

我正在使用 html5 canvas 元素制作一些地图和动画（示例 在此处可见 .）我希望能够基于画布的几何形状有效地生成像素值线串（x1、y1、x2、y2），最好是从 PostGIS 生成。也就是说，在伪 geojson 中：

"Coordinates":"[[-122.0, 35.0], [-121.0, 36.0]]"

在函数传递 100px canvas-width 的情况下可能会输出参数：

"Pixels":"[[30, 40],[50,60]]"

我想最终启用如下网址：

www.example.com/canvas_size:200/ box_width:3-miles/center_point:lon|lat

所以我认为这必须动态完成。其他人是如何处理这种事情的？我突然想到，也许可以将整个世界视为一个 20,000,000 像素的画布，以像素形式存储预转换的数据，然后用客户端算术对其进行偏移。欢迎提出任何建议，包括远离我最初想法的方法。如果有人熟悉卡塔根是否或如何完成此操作，将不胜感激指向一个库或函数或两个的指针。

Answer 1

尝试以下代码，其中像素将适应画布的高度和宽度：

function getPoint(latitude, longitude, canvas_width, canvas_height) {
            var obj = {};
            obj.x = (latitude * canvas_height / 180.0) + (canvas_height / 2);
            obj.y = (longitude * canvas_width / 360.0) + (canvas_width / 2);
            return obj;
        }