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

DH 교육용 위키
이동: 둘러보기, 검색
(새 문서: ==나의 전자지도 예시== <center> <googlemap width="100%" height="300" lat="36.6424987" lon="127.4889750" type="normal" zoom="11" icon="http://maps.google.com/mapfiles/marker.p...)
 
 
(10명의 사용자에 의한 130개의 중간 편집이 숨겨짐)
1번째 줄: 1번째 줄:
  
 
==나의 전자지도 예시==
 
==나의 전자지도 예시==
−
<center>
+
<googlemap width="600" height="300" lat="37.391794" lon="127.056611" type="normal" zoom="15" icon="http://maps.google.com/mapfiles/marker.png">
−
<googlemap width="100%" height="300" lat="36.6424987" lon="127.4889750" type="normal" zoom="11" icon="http://maps.google.com/mapfiles/marker.png">
+
37.391794, 127.056611
 +
</googlemap>
 +
 
 +
==나의 전자지도 제작 방법==
 +
#전자지도 상에 표시할 관심 지점(Point of Interst, POI)을 정한다.
 +
#관심 지점의 경위도 좌표를 구한다.
 +
## [http://maps.google.com 구글 맵] 상에 찾고자 하는 지점을 검색
 +
## '구글 맵'에 표시된 관심 지점 위에서 마우스 오른쪽 버튼 클릭한 후, "이곳이 궁금한가요?"를 선택
 +
## '구글 맵'이 알려주는 경도, 위도 값을 복사
 +
#나의 위키 문서에 다음과 같이 CODING
 +
 
 +
==googlemap 요소의 Attributes==
 +
*width .... 지도 표시 창의 넓이: 절대값 또는 상대값으로 표시 (400, 600, 100%, 90%)
 +
*height .... 지도 표시 창의 높이: 절대값으로 표시
 +
*lat .... latitude, 표시할 지도 중심부의 위도
 +
*lon .... longitude, 표시할 지도 중심부의 경도
 +
*type .... 표시할 지도의 초기 형태: normal, satellite, hybrid
 +
*zoom .... 축척 0~19
 +
*icon .... 관심 지점 표시에 쓸 아이콘 이미지 URL
 +
 
 +
==googlemap 요소의 Data Value==
 +
<pre>
 
36.56591, 127.517885, [[청주 이항희 가옥]]
 
36.56591, 127.517885, [[청주 이항희 가옥]]
−
36.4723032, 127.4228475, [[청주 지선정]]
+
--------  ----------  --------------------
−
36.6090369, 127.402014, [[청주 신전동 고가]]
+
위도      경도        POI 이름 및 링크
−
36.558642, 127.557182, [[청주 신영호 고가]]
+
</pre>
 +
 
 +
=='''간단한 구글 맵''' 사용 예시==
 +
 
 +
===스크립트===
 +
<pre>
 +
<googlemap width="600" height="300" lat="36.56591" lon="127.517885" type="normal" zoom="12"
 +
icon="http://maps.google.com/mapfiles/marker.png">
 +
36.56591, 127.517885, [[청주 이항희 가옥]]
 +
</googlemap>
 +
</pre>
 +
 
 +
===표시===
 +
<googlemap width="600" height="300" lat="36.56591" lon="127.517885" type="normal" zoom="12" icon="http://maps.google.com/mapfiles/marker.png">
 +
36.56591, 127.517885, [[청주 이항희 가옥]]
 +
</googlemap>
 +
 
 +
==응용==
 +
 
 +
===Path: 경로 표시===
 +
 
 +
<googlemap lat="37.38" lon="127.099" zoom="12">
 +
3#00FFFF
 +
37.393512, 127.053715
 +
37.392142, 127.090316
 +
37.357394, 127.081634
 +
37.386235, 127.135188
 +
</googlemap>
 +
 
 +
<pre>
 +
<googlemap lat="37.38" lon="127.099" zoom="12">
 +
3#00FFFF
 +
37.393512, 127.053715
 +
37.392142, 127.090316
 +
37.357394, 127.081634
 +
37.386235, 127.135188
 +
</googlemap>
 +
</pre>
 +
* <nowiki><googlemap></nowiki> 태그 안의 데이타 영역에서 먼저 선의 굵기 및 색상 값을 입력하고, 그 다음 줄부터 각 지점의 좌표와 이동 순서를 차례로 입력.
 +
* 선의 굵기 및 색상 지정 방법
 +
**3#000000 .... 3: 선 굵기, ##00FFFF: 선 색상
 +
 
 +
===Areas: 구역 표시===
 +
 
 +
<googlemap lat="37.38" lon="127.099" zoom="12">
 +
3#00FFFF (#40FFFF00)
 +
37.357394, 127.081634
 +
37.386235, 127.135188
 +
37.393512, 127.053715
 +
</googlemap>
 +
 
 +
<pre>
 +
<googlemap lat="37.38" lon="127.099" zoom="12">
 +
3#00FFFF (#40FFFF00)
 +
37.357394, 127.081634
 +
37.386235, 127.135188
 +
37.393512, 127.053715
 +
</googlemap>
 +
</pre>
 +
 
 +
* <nowiki><googlemap></nowiki> 태그 안의 데이타 영역에서 먼저 구역(Area) 표시 선의 굵기 및 색상 값을 입력하고, 두번째 줄부터 각 지점의 좌표를 차례로 입력.
 +
* 선의 굵기, 색상, 구역 내부 색상 지정 방법
 +
**3#00FFFF ..... 3: 선 굵기, #000000: 선 색상
 +
**(#40FFFF00) ..... 40: 투명도(투명도 값: 00 ~ FF), #FFFF00: 구역 내부 색상
 +
 
 +
===Marker 설정하기===
 +
 
 +
<googlemap lat="37.38" lon="127.099" zoom="12" type="normal"
 +
icons="http://digerati.aks.ac.kr/VR/style/{label}.png">
 +
3#007F7F
 +
(school) 37.393512, 127.053715
 +
(pavilion_b) 37.392142, 127.090316
 +
(house) 37.357394, 127.081634
 +
(pavilion_r) 37.386235, 127.135188
 +
</googlemap>
 +
 
 +
<pre>
 +
<googlemap lat="37.38" lon="127.099" zoom="12" type="normal"
 +
icons="http://digerati.aks.ac.kr/VR/style/{label}.png">
 +
3#007F7F
 +
(school) 37.393512, 127.053715
 +
(pavilion_b) 37.392142, 127.090316
 +
(house) 37.357394, 127.081634
 +
(pavilion_r) 37.386235, 127.135188
 +
</googlemap>
 +
</pre>
 +
 
 +
<html>
 +
<img src="http://digerati.aks.ac.kr/VR/style/school.png" width="40"> http://digerati.aks.ac.kr/VR/style/school.png
 +
<br/><br/>
 +
<img src="http://digerati.aks.ac.kr/VR/style/house.png" width="40"> http://digerati.aks.ac.kr/VR/style/house.png
 +
<br/><br>
 +
<img src="http://digerati.aks.ac.kr/VR/style/pavilion_b.png" width="40"> http://digerati.aks.ac.kr/VR/style/pavilion_b.png
 +
<br/><br>
 +
<img src="http://digerati.aks.ac.kr/VR/style/pavilion_r.png" width="40"> http://digerati.aks.ac.kr/VR/style/pavilion_r.png
 +
<br/><br
 +
</html>
 +
 
 +
===KML 파일 불러오기===
 +
<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8">
 +
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
 +
</googlemap>
 +
 
 +
<pre>
 +
<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8">
 +
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
 
</googlemap>
 
</googlemap>
−
</center>
+
</pre>
 +
 
 +
※ KML File Source 보기: [[E001.kml]]
 +
 
 +
<!--
 +
===KML로 내보내기===
 +
예시: <googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>
 +
 
 +
<pre>
 +
<googlemapkml article="나의 전자지도 제작 방법">View in Google Earth</googlemapkml>
 +
</pre>
 +
-->
 +
 
 +
[[분류: 튜토리얼]]

2020년 3월 10일 (화) 12:50 기준 최신판

나의 전자지도 예시

나의 전자지도 제작 방법

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

googlemap 요소의 Attributes

  • width .... 지도 표시 창의 넓이: 절대값 또는 상대값으로 표시 (400, 600, 100%, 90%)
  • height .... 지도 표시 창의 높이: 절대값으로 표시
  • lat .... latitude, 표시할 지도 중심부의 위도
  • lon .... longitude, 표시할 지도 중심부의 경도
  • type .... 표시할 지도의 초기 형태: normal, satellite, hybrid
  • zoom .... 축척 0~19
  • icon .... 관심 지점 표시에 쓸 아이콘 이미지 URL

googlemap 요소의 Data Value

36.56591, 127.517885, [[청주 이항희 가옥]]
--------  ----------  --------------------
위도      경도        POI 이름 및 링크

간단한 구글 맵 사용 예시

스크립트

<googlemap width="600" height="300" lat="36.56591" lon="127.517885" type="normal" zoom="12" 
icon="http://maps.google.com/mapfiles/marker.png">
36.56591, 127.517885, [[청주 이항희 가옥]]
</googlemap>

표시

응용

Path: 경로 표시

<googlemap lat="37.38" lon="127.099" zoom="12">
3#00FFFF
37.393512, 127.053715
37.392142, 127.090316
37.357394, 127.081634
37.386235, 127.135188
</googlemap>
  • <googlemap> 태그 안의 데이타 영역에서 먼저 선의 굵기 및 색상 값을 입력하고, 그 다음 줄부터 각 지점의 좌표와 이동 순서를 차례로 입력.
  • 선의 굵기 및 색상 지정 방법
    • 3#000000 .... 3: 선 굵기, ##00FFFF: 선 색상

Areas: 구역 표시

<googlemap lat="37.38" lon="127.099" zoom="12">
3#00FFFF (#40FFFF00)
37.357394, 127.081634
37.386235, 127.135188
37.393512, 127.053715
</googlemap>
  • <googlemap> 태그 안의 데이타 영역에서 먼저 구역(Area) 표시 선의 굵기 및 색상 값을 입력하고, 두번째 줄부터 각 지점의 좌표를 차례로 입력.
  • 선의 굵기, 색상, 구역 내부 색상 지정 방법
    • 3#00FFFF ..... 3: 선 굵기, #000000: 선 색상
    • (#40FFFF00) ..... 40: 투명도(투명도 값: 00 ~ FF), #FFFF00: 구역 내부 색상

Marker 설정하기

<googlemap lat="37.38" lon="127.099" zoom="12" type="normal" 
icons="http://digerati.aks.ac.kr/VR/style/{label}.png">
3#007F7F
(school) 37.393512, 127.053715
(pavilion_b) 37.392142, 127.090316
(house) 37.357394, 127.081634
(pavilion_r) 37.386235, 127.135188
</googlemap>

http://digerati.aks.ac.kr/VR/style/school.png

http://digerati.aks.ac.kr/VR/style/house.png

http://digerati.aks.ac.kr/VR/style/pavilion_b.png

http://digerati.aks.ac.kr/VR/style/pavilion_r.png

KML 파일 불러오기

<googlemap lat="36.216770" lon="127.613973" type="hybrid" zoom="8"> 
http://digerati.aks.ac.kr/DhLab/2017/111/Tutorials/E001.kml
</googlemap>

※ KML File Source 보기: E001.kml

원본 주소 "https://dh.aks.ac.kr/Edu/wiki/index.php?title=나의_전자지도_제작_방법&oldid=111770"