개발언어/지도11 지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) 지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator) 요즘에는 이미지맵(image map)은 잘 쓰이지 않는다. 이미지를 큼지막하게 잘라서(여백포함하여) 웹페이지를 만들던 때엔 이미지맵이 정말 유용하게 사용됐었다. 하지만 분명 이미지맵이 사용되어야 하는 순간이 있다. 아래 이미지는 네이버 부동산 페이지에서 가져온 서울시 지도 일부이다. 네이버 부동산에서 가져온 서울시 지도 일부 이미지 예를 들어 위와 같은 이미지에 각 구별로 링크를 걸어달라고 한다면 어떻게 작업할 것인가? 바로 이런 경우에 이미지 맵을 유용하게 사용할 수 있다. 하지만 사각형이 아닌 저런 영역의 이미지 맵을 직접 포토샵을 열어서 꺾어지는 모든 부분의 좌표를 일일이 따서 코드로 표현하기.. 2021. 6. 9. 다음 맵 API(카카오 맵) 행정구역 폴리곤(Polygon)으로 구분하기 & 클릭 확대 이벤트 행정구역을 폴리곤(Polygon)으로 구분해보자(with 카카오 맵 or 다음 맵) 다음 부동산 처럼 행정구역을 구분해서 지역 별로 길찾기를 구현하고 싶었다. 다음 맵 API에 들어가보니 '다각형 이벤트 등록하기2'에 비슷한 느낌으로 샘플코드가 있었지만 폴리곤을 만들기 위한 좌표들이 없었다... 언제나 그렇듯 구글링 하다보니 http://ssmlim.tistory.com/16?category=566348 여기에 자세히 나와있어서, 좌표들을 geojson 파일로 만들 수 있었다. 그 다음부턴 그냥 JSON 파일만 받아와서 다음 맵 API에 있는 샘플코드에 좌표들을 넣기만 하면 되었다. //행정구역 구분 $.getJSON("resources/json/seoul_gson.geojson", function(ge.. 2021. 6. 9. [Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 5. 소스코드 github - https://github.com/ssm-lim/bPolygon 네이버 부동산(http://land.naver.com/)에 있는 Map같이 행정구역 경계 단위를 표시하는 것을 다음 map Api로 구현했습니다. 잘 된것 같진 않지만 이런 방법으로 대충 비슷하게 구현이 되더라...... 하는 의미에서 봐주시면 될 것 같습니다.. #dmap_event api에서 제공하는 addListener로 이벤트 처리. 마무리 버전. #dmap_cls_event class 지정으로 이벤트 처리. 만들었다가 사용할 수 없어서 별도의 주석은 달지 않았지만 dmap_event와 큰 차이는 없습니다. #highmaps highmap을 이용하여 만들었으며 클릭시 지역이 확대되는 기능이 있음. 그 외의 기능 없음... 2021. 6. 9. [Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 4. 이벤트 적용하기 이벤트를 거는 것도 다각형에 이벤트 등록하기2를 참조하면 된다. 하지만 여전히 Multipolygon이 걸림돌이다. 만약 신안군에 mouserover 이벤트를 적용 한다면, 신안군의 polygon 중 하나에 마우스를 올리면 신안군에 해당되는 모든 Polygon이 반응해야한다. 일단 해본 방법에는 두가지 방법이 있다. 1. svg path에 class 지정하기 처음에는 addListener로 적용하려면 이벤트 발생시 계속 Loop를 돌려야한다는 점이 불필요해보였기 때문에 class를 입히는 방법을 생각했다. polygon 객체는 이렇게 생겼다. Vc 아래에 map에 보이게 되는 path가 존재한다. 여기에 $(polygon.Vc[0]).addClass("polygon-grp-00") 같은 방법으로 clas.. 2021. 6. 9. 다음 지도 API로 네이버 부동산 지도 따라하기 - 3. Polygon 생성하기 geojson에 있는 내용물을 본격적으로 다음 지도에 올려봅시다. 다음 지도 API의 Polygon 생성 관련 예제는 다각형에 이벤트 등록하기2를 참고했다. geojson을 까보면 대충 이렇게 생겼다. { "type":"FeatureCollection", "code":"0", // 임의 삽입 "name":"전국", // 임의 삽입 "crs":{ "type":"name", "properties":{ "name":"urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features":[ { "type":"Feature", "properties":{ "code":"11", // key값 변경 "name":"서울특별시" // key값 변경 }, "geometry":{ "type":"Polygon".. 2021. 6. 9. [Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 2. geojson 만들기 어찌저찌 shp파일을 구했으면 QGIS를 이용해 geojson을 만들어보자 설치는 어려울 것 없으니 사이트 가서 받아 설치하면 된다. QGIS Desktop 설치해서 레이어 - 레이어 추가 - 벡터 레이어 추가 선택 shp 파일을 선택한다. 열 때 .shp말고도 다른 것도 같이 있어야 한다. 이유는 나도 잘 모른다!!!!!!! .prj파일 같은 경우에는 좌표계 반영과 관련 되어있는 것 같던데 어쨌거나 잘 모른다. UTF-8을 하지 않으면 지역명이 깨질 수도 있으니 조심.. 화면에 벡터 이미지가 뜨면 레이어 목록에서 현재 불러온 레이어를 오른쪽 클릭한 뒤 필터를 선택한다. 필터를 적용한다. 서울특별시의 법정동 코드는 11이다. SIG_CD가 11로 시작하는 벡터만 남겨보자. 그러고 나면 딱 서울의 행정구역.. 2021. 6. 9. 다음 지도 API로 네이버 부동산 지도 따라하기 - 1. 데이터 가져오는 방법 고찰.. 네이버 부동산에서 제공하는 요런 모양의 지역선택 관련한 기능을 만들어야할 일이 생겼었다. 네이버는 이거를 플래시로 만들었던데... 무엇보다도 지역 이미지를 가져오는게 문제였다. 네이버나 다음이나 자체적으로 행정경계에 대한 정보를 가지고 있는 것 같지만.... API로 제공을 하지 않는다 ...ㅠ.ㅠ jsfiddle 가기 어쩔까...하고서 찾아본건 Highchart, 그러니까 Highmap인데 지도 위에 그려진 차트다. 나라별로 지원하고 있고 미국이나 캐나다 같은 경우엔 지역별 데이터도 제공한다. 아 당연히 한국은 지역별로 없다.. 여기서 한가지 힌트를 얻었던건 geojson이라는 지도 데이터를 받아 그릴 수 있다는 것이었다. 9월 10일자로 통계청 통계정보지리 시스템이 리뉴얼 되어서 적당히 설명할 그림이.. 2021. 6. 9. 지도관련 주요사이트 https://mapshaper.org/ mapshaper Drop files here or select from a folder Shapefile, GeoJSON, TopoJSON, DBF and CSV files are supported Files can be loose or in a zip archive Quick import Drop files here to import with default settings mapshaper.org http://gipong.github.io/shp2geojson.js/ Demo page - shp2geojson.js Sorry, this format are not supported. gipong.github.io http://geojson.io/#map=9/37.. 2021. 6. 9. 지도파일 변환하기 네이버 부동산 지도를 알아보던중 행정구역을 폴리곤으로 그리면 된다는 방법을 알게되었다. 폴리곤을 그리기위해선 해당 지역의 좌표와 폴리곤이 필요했지만 고맙게도 아래 블로그에서 제공하고있었다. http://www.gisdeveloper.co.kr/?p=2332 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 나는 이 블로그에서 시도 SHP를 다운로드받았다. 다운로드받은 SHP 파일은 매우 상세히 그려져있기때문에 폴리곤이 많아서 용량이 컷다. 이 문제를 해결하기위해 mapshaper 라는 사이트를 이용하여 폴리곤수를 줄일 수 있었다. mapshaper 사이트에서 다운로드 받은 SHP파일을 zip 형태로 업로드하거나 압축을 풀어 업로드할 수 있다. .. 2021. 6. 9. 대한민국 행정구역(시도, 시군구) GeoJSON 파일 다운로드 및 SHP 파일 단순화 후 변환 방법 설명 원본 출처이자 해상도가 높은 파일(SHP)은 아래 링크에서 구하실 수 있습니다. http://www.gisdeveloper.co.kr/?p=2332 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 위 데이터를 그대로 쓰려니 폴리곤이 너무 복잡하여 렉이 걸리더군요. 또 shp파일이라 geojson으로 변환하는 작업도 필요했구요. 이쪽 분야는 잘 몰라 고생을 꽤나 했기에 저처럼 단순화된 행정구역 geojson 파일이 필요하신 분들을 위해 파일들을 공유드립니다. 시도 시군구 여기엔 없고 출처에만 있는 읍면동, 리 파일도 필요하신 분들을 위해 변환 방법도 간략하게 적어두겠습니다. 1. SHP.zip 파일을 다운로드 받습니다. 2. mapshaper에.. 2021. 6. 9. 이전 1 2 다음
