"나의 전자지도 제작 방법"의 두 판 사이의 차이

workshop
둘러보기로 가기 검색하러 가기
(→‎전자지도 예시)
6번째 줄: 6번째 줄:
 
==전자지도 예시==
 
==전자지도 예시==
 
<pre>
 
<pre>
−
<display_map height="300px" width="70%" scrollwheelzoom="on" service="google">
+
{{#display_map:
−
37.555186,126.970743~서울역~[[서울역]]
+
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
−
37.559915,126.975313~숭례문~[[숭례문(남대문)]]
+
37.567249, 127.003736~[[훈련원 터]]~
−
</display_map>
+
*훈련원
 +
*경성사범학교 및 부속소학교(1921-1945)
 +
*서울대학교 사범대학(1946-1950)
 +
*서울대학교 부속중학교(1946-1947)
 +
*서울대학교 부속고등학교(1946-1947, 1954-1967)
 +
*서울대학교 부속국민학교(1947-1950, 1953-1975)
 +
*헌법재판소(1988-1993);
 +
|service=googlemaps
 +
}}
 
Location~Popuptitle~Popuptext~File:CustomIcon~Group~Inline label~File:VisitedIcon
 
Location~Popuptitle~Popuptext~File:CustomIcon~Group~Inline label~File:VisitedIcon
 
</pre>
 
</pre>
 
{{#display_map:
 
{{#display_map:
 +
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
 
37.567249, 127.003736~[[훈련원 터]]~
 
37.567249, 127.003736~[[훈련원 터]]~
 
*훈련원
 
*훈련원
21번째 줄: 30번째 줄:
 
*서울대학교 부속국민학교(1947-1950, 1953-1975)
 
*서울대학교 부속국민학교(1947-1950, 1953-1975)
 
*헌법재판소(1988-1993);
 
*헌법재판소(1988-1993);
−
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
 
 
|service=googlemaps
 
|service=googlemaps
 
}}
 
}}

2019년 7월 31일 (수) 07:20 판

이 문서는 Extension:Maps의 기능을 중심으로 작성되었습니다.
(DH WORKSHOP WIKI에 설치된 Extension:Maps 버전 5.6)

전자지도 예시

{{#display_map:
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
37.567249, 127.003736~[[훈련원 터]]~
*훈련원
*경성사범학교 및 부속소학교(1921-1945)
*서울대학교 사범대학(1946-1950)
*서울대학교 부속중학교(1946-1947)
*서울대학교 부속고등학교(1946-1947, 1954-1967)
*서울대학교 부속국민학교(1947-1950, 1953-1975)
*헌법재판소(1988-1993);
|service=googlemaps
}}
Location~Popuptitle~Popuptext~File:CustomIcon~Group~Inline label~File:VisitedIcon
지도를 불러오는 중...

위경도 좌표 구하기

  1. 전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
  2. 관심 지점의 위경도 좌표를 구한다.
    1. 구글 맵 상에 찾고자 하는 지점을 검색
    2. '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
    3. '구글 맵'이 알려주는 위도, 경도 값을 복사

Spots

{{#display_map:
37.555186,126.970743~서울역~[[서울역]];
37.559915,126.975313~숭례문~[[숭례문(남대문)]];
|service=googlemaps
|width=70%
|height=500px
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=dropdown
|resizable=yes
|searchmarkers=all
}}
지도를 불러오는 중...

Lines/Polygons/Circles

{{#display_map:
|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;
|circles=37.571277, 126.988259:50~탑골공원~ ~blue~ ~ ~navy
|service=googlemaps
|width=70%
|height=500px
|center=37.564908, 126.977982
|zoom=14
|type=roadmap
|types=roadmap, satellite, hybrid, terrain
|typestyle=default
|resizable=yes
|searchmarkers=all
}}
address:address:address~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity~Show only on hover
address:Diameter~~PopupTitle~PopupText~BorderColor~BorderOpacity~BorderThickness~FillColor~FillOpacity
지도를 불러오는 중...

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>
원본 주소 "http://dh.aks.ac.kr/workshop/index.php?title=나의_전자지도_제작_방법&oldid=1079"