|
|
65번째 줄: |
65번째 줄: |
| |lines=37.555186,126.970743:37.559915,126.975313:37.562092,126.979905~서울역에서 한국은행까지~[[서울역]]->[[숭례문]]->[[한국은행]]~orange~1~7; | | |lines=37.555186,126.970743:37.559915,126.975313:37.562092,126.979905~서울역에서 한국은행까지~[[서울역]]->[[숭례문]]->[[한국은행]]~orange~1~7; |
| |polygons=37.566624, 126.976857:37.566667, 126.975162:37.566956, 126.974379:37.567543, 126.973961:37.567483, 126.973231:37.566539, 126.973488:37.565255, 126.973456:37.564745, 126.974025:37.564915, 126.975860:37.564804, 126.976772:37.565748, 126.976901~덕수궁~덕수궁~red~ ~ ~tomato~0.8; | | |polygons=37.566624, 126.976857:37.566667, 126.975162:37.566956, 126.974379:37.567543, 126.973961:37.567483, 126.973231:37.566539, 126.973488:37.565255, 126.973456:37.564745, 126.974025:37.564915, 126.975860:37.564804, 126.976772:37.565748, 126.976901~덕수궁~덕수궁~red~ ~ ~tomato~0.8; |
− | |circles=37.571277, 126.988259:50~탑골공원~ ~blue~ ~ ~navy~0.8; | + | |circles=37.571277, 126.988259:50~탑골공원~ ~blue~ ~ ~navy; |
| |service=googlemaps3 | | |service=googlemaps3 |
| |width=70% | | |width=70% |
이 문서는 Extension:Maps의 기능을 중심으로 작성되었습니다.
(DH WORKSHOP WIKI에 설치된 Extension:Maps 버전 5.6)
전자지도 예시
<display_map height="300px" width="70%" scrollwheelzoom="on" service="google">
37.555186,126.970743~서울역~[[서울역]]
37.559915,126.975313~숭례문~[[숭례문(남대문)]]
</display_map>
지도를 불러오는 중...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"70%","height":"300px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"","enablefullscreen":false,"scrollwheelzoom":true,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\n","link":"","lat":37.555186,"lon":126.970743,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc22d\ub840\ubb38\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8(%EB%82%A8%EB%8C%80%EB%AC%B8)\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38) (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38)\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc22d\ub840\ubb38\n","link":"","lat":37.559915,"lon":126.975313,"icon":""}]}
경위도 좌표 구하기
- 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
- 관심 지점의 경위도 좌표를 구한다.
- 구글 맵 상에 찾고자 하는 지점을 검색
- '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
- '구글 맵'이 알려주는 경도, 위도 값을 복사
Spots
{{#display_map:
37.555186,126.970743~서울역~[[서울역]];
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
|service=googlemaps3
|width=70%
|height=500px
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=dropdown
|resizable=yes
|searchmarkers=all
}}
지도를 불러오는 중...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"70%","height":"500px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DROPDOWN_MENU","autoinfowindows":false,"resizable":true,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"all","enablefullscreen":false,"scrollwheelzoom":false,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\n","link":"","lat":37.555186,"lon":126.970743,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc22d\ub840\ubb38\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8(%EB%82%A8%EB%8C%80%EB%AC%B8)\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38) (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38(\ub0a8\ub300\ubb38)\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc22d\ub840\ubb38\n","link":"","lat":37.559915,"lon":126.975313,"icon":""}]}
Lines/Polygons/Circles
{{#display_map:lines=
37.555186,126.970743:37.559915,126.975313:37.562092,126.979905~서울역에서 한국은행까지~[[서울역]]->[[숭례문]]->[[한국은행]]
|service=leaflet
|center=37.555186,126.970743
|copycoords=yes
}}
address:address:address~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity~Show only on hover
address:Diameter~~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity
지도를 불러오는 중...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"70%","height":"500px","centre":{"text":"","title":"","link":"","lat":37.564908,"lon":126.977982,"icon":""},"title":"","label":"","icon":"","visitedicon":"","lines":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\uc11c\uc6b8\uc5ed\uc5d0\uc11c \ud55c\uad6d\uc740\ud589\uae4c\uc9c0\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/workshop/index.php?title=%EC%84%9C%EC%9A%B8%EC%97%AD\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc11c\uc6b8\uc5ed (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc11c\uc6b8\uc5ed\u003C/a\u003E-\u0026gt;\u003Ca href=\"/workshop/index.php?title=%EC%88%AD%EB%A1%80%EB%AC%B8\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\uc22d\ub840\ubb38 (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\uc22d\ub840\ubb38\u003C/a\u003E-\u0026gt;\u003Ca href=\"/workshop/index.php?title=%ED%95%9C%EA%B5%AD%EC%9D%80%ED%96%89\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"\ud55c\uad6d\uc740\ud589 (\uc5c6\ub294 \ubb38\uc11c)\"\u003E\ud55c\uad6d\uc740\ud589\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"\uc11c\uc6b8\uc5ed\uc5d0\uc11c \ud55c\uad6d\uc740\ud589\uae4c\uc9c0\n","link":"","strokeColor":"orange","strokeOpacity":"1","strokeWeight":"7","pos":[{"lat":37.555186,"lon":126.970743},{"lat":37.559915,"lon":126.975313},{"lat":37.562092,"lon":126.979905}]},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[]}],"polygons":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\ub355\uc218\uad81\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\ub355\uc218\uad81\n\u003C/p\u003E\u003C/div\u003E","title":"\ub355\uc218\uad81\n","link":"","strokeColor":"red","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":37.566624,"lon":126.976857},{"lat":37.566667,"lon":126.975162},{"lat":37.566956,"lon":126.974379},{"lat":37.567543,"lon":126.973961},{"lat":37.567483,"lon":126.973231},{"lat":37.566539,"lon":126.973488},{"lat":37.565255,"lon":126.973456},{"lat":37.564745,"lon":126.974025},{"lat":37.564915,"lon":126.97586},{"lat":37.564804,"lon":126.976772},{"lat":37.565748,"lon":126.976901}],"onlyVisibleOnHover":false,"fillColor":"tomato","fillOpacity":"0.8"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"}],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":14,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DROPDOWN_MENU","autoinfowindows":false,"resizable":true,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"all","enablefullscreen":false,"scrollwheelzoom":false,"locations":[]}
googlemap 요소의 Data Value
36.56591, 127.517885, [[청주 이항희 가옥]]
-------- ---------- --------------------
위도 경도 POI 이름 및 링크
응용
Path
<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
</googlemap>
<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
</googlemap>
- Path에 해당되는 좌표값을 입력하고, 첫줄에 Path 속성 설정하기
- 3#000000
- 3: Path 굵기
- #000000: Path 색상 코드
Areas
<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000 (#80FFFFFF)
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
42.711618, -73.25112, 4
</googlemap>
<googlemap lat="42.711618" lon="-73.205112" zoom="5">
3#000000 (#80FFFFFF)
42.711618, -73.25112, 1
43.224024, -70.28301, 2
45.214425, -72.48114, 3
42.711618, -73.25112, 4
</googlemap>
- Areas에 해당되는 좌표값을 입력하고, 첫줄에 Areas 속성 설정하기
- Areas 속성
- 3#000000
- 3: Path 굵기
- #000000: Path 색상 코드
- #80FFFFFF
- 80: 투명도. 투명도 값: 00 ~ FF
- #FFFFFF: Areas 색상
Marker 설정하기
<googlemap lat="42.711618" lon="-73.205112" zoom="5" icons="http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/marker{label}.png">
(C) 45.688323,-74.465706, 4
6#000000
(B) 42.711618, -73.25112, 1
(B) 43.224024, -70.28301, 2
(B) 45.214425, -72.48114, 3
</googlemap>
<googlemap lat="42.711618" lon="-73.205112" zoom="5" icons="http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/marker{label}.png">
(C) 45.688323,-74.465706, 4
6#000000
(B) 42.711618, -73.25112, 1
(B) 43.224024, -70.28301, 2
(B) 45.214425, -72.48114, 3
</googlemap>
KML 파일 불러오기
<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8">
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
</googlemap>
<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8">
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
</googlemap>
KML로 내보내기
예시: <googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>
<googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>