如何自动创建维基百科灰度图的图像图？

发布于 2024-09-11 07:51:07 字数 764 浏览 3 评论 0原文

我有一个使用维基百科灰色地图的各个成员的项目： http://en.wikipedia.org/维基/维基百科：Blank_maps。我根据用户通过单击形状或选中复选框选择的国家、州或省来填充颜色。

我想编写一个脚本，通过某种方式获取国家、州或省边界的 X 和 Y 像素位置，自动创建每个国家、州或省的图像地图，尽管没有这些实体的名称，我将填写这些名称之后。我已经手工完成了世界地图，并找到了一个开源的美国地图图像地图演示。我现在想更快地创建我的地图。

我使用 PHP 和 GD 来填充形状，所以我想我也可以使用形状的一个中心像素位置。有什么建议吗？该脚本是可能的，但仍然有些手动： http://abhinavsingh.com/blog/2009/03/using-image-maps-in-javascript-a-demo-application/。另外，Mapedit http://www.boutell.com/mapedit/ 也有一个魔棒功能效果很好，但我再次感觉这可以自动完成。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

刘备忘录 2024-09-18 07:51:07

解决此问题的一个近乎完美的解决方案是使用 SVG 图像以及将 svg 代码转换为 imagmap 区域标签的转换器： http ://www.electricfairground.com/polygonator/。结果是一个合适的图像地图，尽管 svg 图像可能需要调整大小，并且国家或省份似乎都偏移了，有时还很混乱。因此，这需要在允许您移动图像映射元素的 wysiwig 编辑器中打开使用 SVG 图像或导出的 SVG 文件的 PNG 副本生成的页面。

我试图弄清楚偏移的模式是什么，如果我这样做，我会将其发布在这里： http://wherehaveibeen.info/images/polye.html。 “Polygonator”的作者向我介绍了他的服务，并使用了他文章中的 svg 地图图像：http: //www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/。他提倡通过 Inkscape 将 png 图像追踪为 svg 图像。但既然 Wikipedia 已经有了 SVG 格式的地图，为什么不直接看代码呢？事实证明，svg 文件基本上已经将多边形分开并指定了边界区域，至少在维基百科灰色地图中， http://en.wikipedia.org/wiki/Wikipedia:Blank_maps，他们只需要使用多边形器进行一些清理。

我发现如果我在 Notepad++ 中打开 SVG 代码，我可以复制并粘贴 SVG 文件的全部内容，并且多边形器将删除不需要的代码。之后需要对图像映射区域标签进行一些清理，但不多。最大的问题是所提到的生成区域标签区域偏移以及生成代码中图像映射区域的重叠位置有时会混乱。

回复收藏 0 原文

不可一世的女人 2024-09-18 07:51:07

好吧，这里真正的答案似乎是 SVG 文件几乎已经是图像映射，并且可以对其进行温和处理以将其转换为图像映射，并且维基百科当然有大量的 SVG 映射。

至少有三个项目试图做到这一点，但目前只取得了一些成功。我现在对制作一个 SVG 文件处理在线图像映射器服务更感兴趣，因此可以在该项目上工作，而不仅仅是地图着色：

Polygonator - 此处描述：http://www.electricfairground.com/2009/08/ 08/image-map-rollover-effects-using-jquerys-maphilight-plugin/ 但实际服务在这里：http://www.electricfairground.com/polygonator/index.html - 是我认为迄今为止最简单、最好的服务或软件。您必须手动将 SVG XML 文本转储到输入字段中，但不管作者怎么说，我认为您可以将整个 SVG 文件转储到输入字段中，而不仅仅是“Mz 标签”。生成的区域标记需要编辑以删除没有坐标的空标记和只有两个点的多边形。
Inkscapemap - http://sourceforge.net/projects/inkscapemap/ - 复杂性令人窒息SVG 文件，例如带有阴影的文件。此外，我无法让它显示为 HTML 服务，即使我遵循了有关使用 jar 文件的主类的建议，我发现清单文件中描述了该主类，并引用了“中的主 jar 文件和支持文件”存档”属性。
http://davidlynch.org/ blog/2008/03/creating-an-image-map-from-svg/ - 非常有趣的项目，有很多博客评论。图像映射仍然不太完美，需要编辑。

回复收藏 0 原文

世界等同你 2024-09-18 07:51:07

我发现我可以使用 GD PHP 的 imagecolorat 并循环遍历所有像素以找到黑色的像素。这是有效的：

<?php
$im = ImageCreateFromPNG("india.png");
$width = imagesx($im);
$height = imagesy($im);
for ($cy=0;$cy<$height;$cy++) {
  echo '<p>';
  for ($cx=0;$cx<$width;$cx++) {
    $rgb = ImageColorAt($im, $cx, $cy);
    $col = imagecolorsforindex($im, $rgb); 
if ($col["red"] == 0 && $col["green"] == 0 && $col["blue"] ==0){
    echo $cx.", ".$cy." ";
  } else {echo "";}
}
}
?>

任何人都可以建议如何在巨大的多边形复合体中找到多边形，该复合体是在印度的黑白 2 色地图上运行上述代码而产生的，其中所有边界都是黑色的，各州和印度洋的内部是白色的？？

这是印度的图片： http://wherehaveibeen.info/images/india.png 和现在图像地图的坐标混乱，需要分成单独的多边形： http://wherehaveibeen .info/images/black.php

I see I can use GD PHP's imagecolorat and cycle through all the pixels to find those that are black. This works:

<?php
$im = ImageCreateFromPNG("india.png");
$width = imagesx($im);
$height = imagesy($im);
for ($cy=0;$cy<$height;$cy++) {
  echo '<p>';
  for ($cx=0;$cx<$width;$cx++) {
    $rgb = ImageColorAt($im, $cx, $cy);
    $col = imagecolorsforindex($im, $rgb); 
if ($col["red"] == 0 && $col["green"] == 0 && $col["blue"] ==0){
    echo $cx.", ".$cy." ";
  } else {echo "";}
}
}
?>

Can anybody suggest how to find the polygons in the huge multipolygon complex that results from running the above code on say a black and white 2 color map of India, where all the borders are black and the interior of the states and Indian Ocean is white??

Here is image of India: http://wherehaveibeen.info/images/india.png and the mess now of the coordinates for the imagemap that needs to be split up into separate polygons: http://wherehaveibeen.info/images/black.php

回复收藏 0 原文

~没有更多了~