如何自动创建维基百科灰度图的图像图?
我有一个使用维基百科灰色地图的各个成员的项目: 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/ 也有一个魔棒功能效果很好,但我再次感觉这可以自动完成。
I have a project using various members of Wikipedia's grey maps: http://en.wikipedia.org/wiki/Wikipedia:Blank_maps. I fill them in with colors depending on which countries, states or provinces a user selects by clicking on the shape or by checking a checkbox.
I would like to write a script that creates imagemaps automatically of each country, state or province by somehow getting the X and Y pixel location of the borders of a country, state or province albeit without the names of these entities, which I will fill in later. I have already done the World map by hand and found a open source US map image map demo. I would now like to create my maps more rapidly.
I use PHP and GD to floodfill the shapes, so I guess I could use one central pixel location of the shapes as well. Any suggestions? This script is a possibility but is still somewhat manual: http://abhinavsingh.com/blog/2009/03/using-image-maps-in-javascript-a-demo-application/. Also Mapedit, http://www.boutell.com/mapedit/, has a magic wand feature that works pretty well, but again I have a feeling this can be done automatically.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
解决此问题的一个近乎完美的解决方案是使用 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 文件的全部内容,并且多边形器将删除不需要的代码。之后需要对图像映射区域标签进行一些清理,但不多。最大的问题是所提到的生成区域标签区域偏移以及生成代码中图像映射区域的重叠位置有时会混乱。
An almost perfect solution to this issue is by using SVG images and this translator of the svg code to imagmap area tags: http://www.electricfairground.com/polygonator/. The result is an appropriate image map, although the svg image may need to be resized, and the countries or provinces all seem to be offset and occasionally jumbled up. So this require opening a page generated with the SVG image or exported PNG copy of the SVG file, in a wysiwig editor that allows you to move imagemap elements.
I'm trying to figure out what the pattern of the offset is and if I do I'll post it here: http://wherehaveibeen.info/images/polye.html. The author of the "Polygonator" clued me into his service and using svg map images from his article here: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/. He advocates there, the tracing of png images into svg images via Inkscape. But since Wikipedia already has maps in SVG format, why not go straight to the code? It turns out that svg files basically already have the polygons separated and the border regions speciied, at least in the Wikipedia grey maps, http://en.wikipedia.org/wiki/Wikipedia:Blank_maps, they just need some cleaning up with the Polygonator.
I found if I opened up the SVG code in Notepad++ i could copy and paste in the entire contents of the SVG file and the polygonator will remove the unneeded code. A little clean up of the imagemap area tags is required afterwards but not much. The biggest problem is the mentioned generated area tags regions offests and the occasionl jumbled up overlapping locations of the imagemap areas in the generated code.
好吧,这里真正的答案似乎是 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/ - 非常有趣的项目,有很多博客评论。图像映射仍然不太完美,需要编辑。
Well the real answer here appears to be that SVG files are almost imagemaps already and can be mildly processed to turn them into imagemaps, and Wikipedia certainly has plenty of SVG maps.
There are at least three projects that attempt to do this, with only some success at the moment. I'm kind of more interested in making an SVG file processing online image mapper service now that so might work on that project instead of just the map coloring one:
Polygonator - described here: http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/ but the actual service is here: http://www.electricfairground.com/polygonator/index.html - is the simplest and best service or software so far I think. You have to manually dump the SVG XML text into the input field, but despite what the author says, I think you can dump the entire SVG file in the in field, not just the "M-z tag". The resulting area tags need editing to remove empty ones without coordinates and polygons with only two points.
Inkscapemap - http://sourceforge.net/projects/inkscapemap/ - chokes on complex SVG files such as those with shading. Also I couldn't get it to display as an HTML service even though I followed advice about using the main class of the jar file which I found described in the manifest file as well referring to the main jar file and the support file in an "archive" attribute.
http://davidlynch.org/blog/2008/03/creating-an-image-map-from-svg/ - very interesting project with many blog comments. The image maps again are not quite perfect and need editing.
我发现我可以使用 GD PHP 的 imagecolorat 并循环遍历所有像素以找到黑色的像素。这是有效的:
任何人都可以建议如何在巨大的多边形复合体中找到多边形,该复合体是在印度的黑白 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:
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