본문 바로가기

geojson4

[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을 이용하여 만들었으며 클릭시 지역이 확대되는 기능이 있음. 그 외의 기능 없음... 2015. 9. 24.
[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.. 2015. 9. 24.
[Javascript] 다음 지도 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",.. 2015. 9. 24.
[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 2. geojson 만들기 어찌저찌 shp파일을 구했으면 QGIS를 이용해 geojson을 만들어보자 설치는 어려울 것 없으니 사이트 가서 받아 설치하면 된다. QGIS Desktop 설치해서 레이어 - 레이어 추가 - 벡터 레이어 추가 선택 shp 파일을 선택한다. 열 때 .shp말고도 다른 것도 같이 있어야 한다. 이유는 나도 잘 모른다!!!!!!! .prj파일 같은 경우에는 좌표계 반영과 관련 되어있는 것 같던데 어쨌거나 잘 모른다. UTF-8을 하지 않으면 지역명이 깨질 수도 있으니 조심.. 화면에 벡터 이미지가 뜨면 레이어 목록에서 현재 불러온 레이어를 오른쪽 클릭한 뒤 필터를 선택한다. 필터를 적용한다. 서울특별시의 법정동 코드는 11이다. SIG_CD가 11로 시작하는 벡터만 남겨보자. 그러고 나면 딱 서울의 행정구역.. 2015. 9. 23.