´ÙÀ½ ¸Ê API(Ä«Ä«¿À ¸Ê) ÇàÁ¤±¸¿ª Æú¸®°ï(Polygon)À¸·Î ±¸ºÐÇϱâ & Ŭ¸¯ È®´ë À̺¥Æ®
ÇàÁ¤±¸¿ªÀ» Æú¸®°ï(Polygon)À¸·Î ±¸ºÐÇغ¸ÀÚ(with Ä«Ä«¿À ¸Ê or ´ÙÀ½ ¸Ê)
´ÙÀ½ ºÎµ¿»ê ó·³ ÇàÁ¤±¸¿ªÀ» ±¸ºÐÇؼ Áö¿ª º°·Î ±æã±â¸¦ ±¸ÇöÇÏ°í ½Í¾ú´Ù.
´ÙÀ½ ¸Ê API¿¡ µé¾î°¡º¸´Ï '´Ù°¢Çü À̺¥Æ® µî·ÏÇϱâ2'¿¡ ºñ½ÁÇÑ ´À³¦À¸·Î »ùÇÃÄڵ尡 ÀÖ¾úÁö¸¸ Æú¸®°ïÀ» ¸¸µé±â À§ÇÑ ÁÂÇ¥µéÀÌ ¾ø¾ú´Ù...
¾ðÁ¦³ª ±×·¸µí ±¸±Û¸µ ÇÏ´Ùº¸´Ï http://ssmlim.tistory.com/16?category=566348 ¿©±â¿¡ ÀÚ¼¼È÷ ³ª¿ÍÀÖ¾î¼, ÁÂÇ¥µéÀ» geojson ÆÄÀÏ·Î ¸¸µé ¼ö ÀÖ¾ú´Ù.
±× ´ÙÀ½ºÎÅÏ ±×³É JSON ÆÄÀϸ¸ ¹Þ¾Æ¿Í¼ ´ÙÀ½ ¸Ê API¿¡ ÀÖ´Â »ùÇÃÄڵ忡 ÁÂÇ¥µéÀ» ³Ö±â¸¸ ÇÏ¸é µÇ¾ú´Ù.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <script> //ÇàÁ¤±¸¿ª ±¸ºÐ $.getJSON("resources/json/seoul_gson.geojson", function(geojson) { var data = geojson.features; var coordinates = []; //ÁÂÇ¥ ÀúÀåÇÒ ¹è¿ var name = ''; //ÇàÁ¤ ±¸ À̸§ $.each(data, function(index, val) { coordinates = val.geometry.coordinates; name = val.properties.SIG_KOR_NM; displayArea(coordinates, name); }) }) var polygons=[]; //function ¾È ÂÊ¿¡ Áö¿ªº¯¼ö·Î ³ÖÀ¸´Ï±ñ Æú¸®°ï Çϳª »ý¼ºÇÒ ¶§¸¶´Ù ¹è¿ÀÌ ºñ¾î¼ Ŭ¸¯ÇßÀ» ¶§ Àüü¸¦ ¸ø ¾ø¾ÖÁÜ. ±×·¡¼ Àü¿ªº¯¼ö·Î ¸¸µê. //ÇàÁ¤±¸¿ª Æú¸®°ï function displayArea(coordinates, name) { var path = []; //Æú¸®°ï ±×·ÁÁÙ path var points = []; //Áß½ÉÁÂÇ¥ ±¸Çϱâ À§ÇÑ Áö¿ª±¸ ÁÂÇ¥µé $.each(coordinates[0], function(index, coordinate) { //console.log(coordinates)¸¦ È®ÀÎÇغ¸¸é º¸¸é [0]¹ø°¿¡ ¹è¿ÀÌ ÁÖ·Î ÀúÀåÀÌ µÊ. ±×·¡¼ [0]¹ø° ¹è¿¿¡¼ ²¨³»ÁÜ. var point = new Object(); point.x = coordinate[1]; point.y = coordinate[0]; points.push(point); path.push(new daum.maps.LatLng(coordinate[1], coordinate[0])); //new daum.maps.LatLng°¡ ¾øÀ¸¸é ÀνÄÀ» ¸øÇؼ path ¹è¿¿¡ Ãß°¡ }) // ´Ù°¢ÇüÀ» »ý¼ºÇÕ´Ï´Ù var polygon = new daum.maps.Polygon({ map : map, // ´Ù°¢ÇüÀ» Ç¥½ÃÇÒ Áöµµ °´Ã¼ path : path, strokeWeight : 2, strokeColor : '#004c80', strokeOpacity : 0.8, fillColor : '#fff', fillOpacity : 0.7 }); polygons.push(polygon); //Æú¸®°ï Á¦°ÅÇϱâ À§ÇÑ ¹è¿ // ´Ù°¢Çü¿¡ mouseover À̺¥Æ®¸¦ µî·ÏÇÏ°í À̺¥Æ®°¡ ¹ß»ýÇϸé Æú¸®°ïÀÇ Ã¤¿ò»öÀ» º¯°æÇÕ´Ï´Ù // Áö¿ª¸íÀ» Ç¥½ÃÇÏ´Â Ä¿½ºÅÒ¿À¹ö·¹À̸¦ ÁöµµÀ§¿¡ Ç¥½ÃÇÕ´Ï´Ù daum.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) { polygon.setOptions({ fillColor : '#09f' }); customOverlay.setContent('<div class="area">' + name + '</div>'); customOverlay.setPosition(mouseEvent.latLng); customOverlay.setMap(map); }); // ´Ù°¢Çü¿¡ mousemove À̺¥Æ®¸¦ µî·ÏÇÏ°í À̺¥Æ®°¡ ¹ß»ýÇϸé Ä¿½ºÅÒ ¿À¹ö·¹ÀÌÀÇ À§Ä¡¸¦ º¯°æÇÕ´Ï´Ù daum.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) { customOverlay.setPosition(mouseEvent.latLng); }); // ´Ù°¢Çü¿¡ mouseout À̺¥Æ®¸¦ µî·ÏÇÏ°í À̺¥Æ®°¡ ¹ß»ýÇϸé Æú¸®°ïÀÇ Ã¤¿ò»öÀ» ¿ø·¡»öÀ¸·Î º¯°æÇÕ´Ï´Ù // Ä¿½ºÅÒ ¿À¹ö·¹À̸¦ Áöµµ¿¡¼ Á¦°ÅÇÕ´Ï´Ù daum.maps.event.addListener(polygon, 'mouseout', function() { polygon.setOptions({ fillColor : '#fff' }); customOverlay.setMap(null); }); // ´Ù°¢Çü¿¡ click À̺¥Æ®¸¦ µî·ÏÇÏ°í À̺¥Æ®°¡ ¹ß»ýÇϸé ÇØ´ç Áö¿ª È®´ëÀ» È®´ëÇÕ´Ï´Ù. daum.maps.event.addListener(polygon, 'click', function() { // ÇöÀç Áöµµ ·¹º§¿¡¼ 2·¹º§ È®´ëÇÑ ·¹º§ var level = map.getLevel()-2; // Áöµµ¸¦ Ŭ¸¯µÈ Æú¸®°ïÀÇ Áß¾Ó À§Ä¡¸¦ ±âÁØÀ¸·Î È®´ëÇÕ´Ï´Ù map.setLevel(level, {anchor: centroid(points), animate: { duration: 350 //È®´ë ¾Ö´Ï¸ÞÀÌ¼Ç ½Ã°£ }}); deletePolygon(polygons); //Æú¸®°ï Á¦°Å }); } </sciprt> | cs |
Æú¸®°ï(Polygon) Ŭ¸¯ È®´ë À̺¥Æ®¸¦ ±¸ÇöÇغ¸ÀÚ (with Ä«Ä«¿À ¸Ê or ´ÙÀ½ ¸Ê)
¸¸µé¾îÁø Æú¸®°ï(Polygon)À» Ŭ¸¯Çϸé ÇØ´ç Áö¿ª¸¸ º¸¿©ÁÖµµ·Ï È®´ë½ÃÅ°¸é¼, ÇàÁ¤±¸¿ª °æ°è¼±°ú ä¿ò»öÀ» »ç¶óÁö°Ô ÇÏ°í ½Í¾ú´Ù.
»ùÇà ÄÚµåÀÇ 'click'ÀÌ ÀÖ´Â ¸®½º³Ê¿¡ ±¸ÇöÇÏ·Á ÇßÁö¸¸, Æú¸®°ïÀÇ Áß½ÉÁÂÇ¥°¡ ÀÖ¾î¾ß¸¸ Çß´Ù.
Æú¸®°ïÀÇ Áß½ÉÁÂÇ¥¸¦ ±¸ÇÏ·Á¸é centroid ¾Ë°í¸®ÁòÀ» È°¿ëÇ϶ó´Â ±ÛÀ» º¸°í ³À´Ù ½á¸Ô¾î ºÃ´Ù.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //centroid ¾Ë°í¸®Áò (Æú¸®°ï Áß½ÉÁÂÇ¥ ±¸Çϱâ À§ÇÔ) function centroid (points) { var i, j, len, p1, p2, f, area, x, y; area = x = y = 0; for (i = 0, len = points.length, j = len - 1; i < len; j = i++) { p1 = points[i]; p2 = points[j]; f = p1.y * p2.x - p2.y * p1.x; x += (p1.x + p2.x) * f; y += (p1.y + p2.y) * f; area += f * 3; } return new daum.maps.LatLng(x / area, y / area); } | cs |
Æú¸®°ïÀ» ¾ø¾Ö´Â °Ç ¿¹Àü¿¡ »ç¿ëÇÑ Àû ÀÖ´Â setMap(null)À» È°¿ëÇؼ ¾î·ÆÁö ¾Ê°Ô Áö¿ï ¼ö ÀÖ¾ú´Ù.
1 2 3 4 5 6 7 8 | //Áöµµ À§ Ç¥½ÃµÇ°í ÀÖ´Â Æú¸®°ï Á¦°Å function deletePolygon(polygons) { for (var i = 0; i < polygons.length; i++) { polygons[i].setMap(null); } polygons = []; } | cs |
°á°ú¹°