在静态地图上绘制百万个标记

时间:2015-04-09 09:56:34

标签: html google-maps canvas

我想绘制看起来像这张图片的地图:

enter image description here

在这张地图上,一个标记是一个蓝点,有数百万个标记。地图是静态的,只是图像。

P.S。:谷歌静态地图api的url大小限制使它无用。

3 个答案:

答案 0 :(得分:1)

您的(红色)地图只有十分之一的独特可见指标。

这意味着数千个(如果不是大多数)指标有许多其他指标直接相互叠加。

因此,您的第一步是删除重复的指标。

如果您的数据在适度的时间内没有变化,您可以在服务器上删除数据 - 或者更好的是,在发起数据的计算机上进行重复数据删除。

一旦您的数据被删除,画布可以快速渲染您的剩余点:

例如,这是您的509x283图像,其中1000000/12 == 83333一个一个大小的正方形。在我的中等电脑上渲染这些83333指标需要341毫秒。

enter image description here

...将你的2 873 379指标(去掉2873379/12 == 239449)渲染913毫秒。

enter image description here

...但请注意上面(dupsX12)画布几乎完全填充了颜色,因此您的数据可能会有超过12倍的重复数据。这是您的2873379指标假设200X重复(14367个独特指标),在我的(差)估计中填充与红色地图相同的空间百分比。这是在57ms内呈现的。

enter image description here

答案 1 :(得分:0)

你可能在这里采取了错误的方法。您希望所有标记都可见吗?一百万?如果这些标记分别为1像素且仍显示地图图像?,您的显示器有多大?

我建议您回顾谷歌地图,也许是一种更智能的展示方式,例如在更高的缩放级别上显示多个位置,然后在用户放大时显示更多标记

here is the google maps docs他们展示了如何在内部使用计数器以及更改标记在不同缩放级别上显示的范围和标记

答案 2 :(得分:0)

此PHP代码生成静态图像:

header("Content-type: image/png");
$im = imagecreatefrompng('staticmap.png');
$width = imagesx($im);
$height = imagesy($im);
$w=-179.0;//world borders
$s=-56.6;
$e=179.0;
$n=78.2;

$c = imagecolorallocate($im, 255, 0, 0);

$cursor = ...;//query to database
foreach($cursor as $iter) 
{
    $p = $iter['geoPoint'];
    $lon = (double)$p['lon'];
    $lat = (double)$p['lat'];   

    $x = ((-$w+$lon)*$width)/(-$w+$e);
    $y = (($n-$lat)*$height)/(-$s+$n);

    imagefilledellipse ( $im , $x , $y , 3 , 3 , $c);
} 

imagepng($im);
imagedestroy($im);

无需使用投影来绘制地图。这就是为什么不需要使用任何API。