Wikipedia에서 Gray Map의 ImageMaps를 자동으로 만드는 방법은 무엇입니까?

Question

나는 위키 피 디아의 회색지도의 여러 멤버 인 http://en.wikipedia.org/wiki/Wikipedia:Blank_maps을 사용하는 프로젝트를 가지고 있습니다. 사용자가 도형을 클릭하거나 확인란을 선택하여 선택한 국가, 주 또는 지방에 따라 색상으로 채 웁니다.

각 개체의 이름이 없어도 국가, 주 또는 지방 경계의 X 및 Y 픽셀 위치를 얻음으로써 각 국가, 주 또는 지방의 이미지 맵을 자동으로 만드는 스크립트를 작성하고 싶습니다. 나는 나중에 채울 것이다. 나는 이미 손으로 세계지도를 작성했으며 오픈 소스 미국지도 이미지지도 데모를 발견했다. 이제지도를보다 빠르게 만들고 싶습니다.

도형을 floodfill하기 위해 PHP와 GD를 사용하므로 도형의 중앙 픽셀 위치 하나를 사용할 수 있다고 생각합니다. 어떤 제안? 이 스크립트는 가능하지만 여전히 다소 수동입니다 : http://abhinavsingh.com/blog/2009/03/using-image-maps-in-javascript-a-demo-application/. 또한 Mapedit, http://www.boutell.com/mapedit/에는 꽤 잘 작동하는 마술 지팡이 기능이 있지만 다시 자동으로 수행 할 수 있다고 생각합니다.

Answer 1

나는 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

Answer 2

입니다 SVG 이미지와이를 사용하여이 문제에 대한 거의 완벽한 솔루션 imagmap 영역 태그에 대한 svg 코드의 번역자 : 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 파일은 기본적으로 이미 폴리곤이 분리되어 있고 테두리 영역이 명시되어 있습니다. 적어도 Wikipedia 회색 맵 http://en.wikipedia.org/wiki/Wikipedia:Blank_maps에서는 Polygonator로 일부 정리가 필요합니다.

Notepad ++에서 SVG 코드를 열면 SVG 파일의 전체 내용을 복사하여 붙여 넣을 수있어 폴리곤ator가 불필요한 코드를 제거합니다. 나중에 이미지 맵 영역 태그를 약간 정리해야하지만 많지는 않습니다. 가장 큰 문제는 언급 된 생성 된 영역 태그 영역 offests 및 occasionl 생성 된 코드에서 imagemap 영역의 중복 위치를 혼란스럽게합니다.

Answer 3

물론 여기서의 진정한 해답은 SVG 파일이 거의 이미 imagemaps이고 이미지 맵으로 변환하기 위해 약간 처리 할 수 ​​있으며 Wikipedia에는 ​​분명히 많은 SVG 맵이 있다는 것입니다.

이 작업을 시도하는 프로젝트가 3 개 이상 있으며 그 중 일부 성공 사례가 있습니다.http://www.electricfairground.com/2009/08/08/image-map-rollover-effects-using-jquerys-maphilight-plugin/하지만, 실제 서비스 : - 여기에 설명

• Polygonator : 나는 가지 더 관심이 SVG 파일을 만드는 있도록 대신지도 한 착색의 프로젝트를 작동 할 수 있습니다 지금 온라인 이미지 매퍼 서비스를 처리하고있어 여기에 : http://www.electricfairground.com/polygonator/index.html - 내가 생각하기에 가장 단순하고 최고의 서비스 또는 소프트웨어입니다. SVG XML 텍스트를 수동으로 입력 필드에 덤프해야하지만 작성자의 말에도 불구하고 "M-z 태그"가 아닌 입력란에 전체 SVG 파일을 덤프 할 수 있다고 생각합니다. 결과 영역 태그는 좌표가없는 빈 요소와 두 점만있는 다각형을 제거하기 위해 편집해야합니다.

• Inkscapemap - http://sourceforge.net/projects/inkscapemap/ - 음영이있는 것과 같은 복잡한 SVG 파일의 초크. 또한 내가 manifest 파일에서 언급 한 jar 파일의 주 클래스를 사용하는 것에 대한 조언을 따라 주 항아리 파일과 지원 파일을 참조하는 경우에도 HTML 서비스로 표시 할 수 없었습니다. 아카이브 "속성.

• http://davidlynch.org/blog/2008/03/creating-an-image-map-from-svg/ - 많은 블로그 의견이 담긴 매우 흥미로운 프로젝트입니다. 이미지 맵은 다시 완벽하지 않으며 편집이 필요합니다.