qgis2leaf로 웹 지도 만들기¶

과업 개요¶

세계 공항의 리플릿 웹맵을 만들고자 합니다.

데이터 획득¶

Natural Earth의 `Airports <http://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/>`_데이터셋을 사용합니다.

Download the Airports shapefile.

데이터 출처: [NATURALEARTH]

과정¶

1. 메뉴 플러그인 –> 플러그인 관리 및 설치 :menuselection:`Plugins –> Manage and Install Plugin`로 가서 ``qgis2leaf``를 설치합니다. 이 플러그인은 현재 설치되지 않음 **experimental**으로 표시되어 있습니다. 그래서 플러그인 세팅에서 :guilabel:`Show also experimental plugins`을 체크할 필요가 있습니다. 상위버젼에서는 명령어 등의 내용과 다소 틀릴 수 있습니다. (QGIS에서 플러그인 설치를 하기해 보다 자세한 사항은 :doc:`using_plugins`를 보시기 바랍니다.)

2. 다운로드한 ``ne_10m_airports.zip``파일을 압축해제합니다. QGIS를 구동시키고 메뉴 레이어 –> 레이어 추가 –> 벡터 레이어 추가 :menuselection:`Layer –> Add Vector Layer`로 갑니다. 파일이 압축해제된 디렉토리를 찾아서 ``ne_10m_airports.shp``를 선택합니다. 확인 :guilabel:`OK`을 클릭합니다.

3. 일단 ``ne_10m_airports``레이어가 불러들여지면 객체 확인 Identify 툴을 사용하여 아무 객체나 눌러 속성을 살펴봅니다. 여기서는 공항을 3개의 범주로 나누어 공항지도를 만들고자 합니다. 속성 ``type``은 객체를 분리하는데 유용할 것입니다.

4. ``ne_10m_airports``레이어를 우측클릭하고 속성테이블 열기 :guilabel:`Open Attribute Table`를 선택합니다.

5. 속성 테이블 다이알로그에서 편집모드전환 Toggle Editing 단추를 누릅니다. 일단 레이어가 편집모드가 되면 필드계산기 열기 Open Field Calculator 단추를 누릅니다.

6. ``type_code``라는 새로운 속성을 만들려고 하는데, 주요한 공항은 3, 중간 크기의 공항은 2 그리고 나머지 모든 공항은 1의 값을 부여하고자 합니다. 이 상태에서 ``type``의 속성을 보고 ``type_code``속성을 만드는 표현식을 만들기 위해 *CASE*구문을 사용할 수 있습니다. 출력 필드이름 Output field name`으로 ``type_code``를 입력하고 새 필드 생성 :guilabel:`Create a new field 상자를 체크합니다. 출력 필드 유형 :guilabel:`Output field type`으로 정수 :guilabel:`Whole number (integer)`를 선택합니다. 표현식 :guilabel:`Expression`창에는 다음의 식을 입력합니다.

CASE  WHEN "type" LIKE '%major%'  THEN 3
 WHEN "type" LIKE '%mid%' THEN 2
 ELSE 1
END

7. 속성 테이블 Attribute Table`창으로 되돌아가면 끝에 새로운 컬럼을 볼 수 있을 것입니다. 표현식이 정확하게 작동했는지 확인하고 편집모드전환 :guilabel:`Toggle Editing 단추를 눌러 변경된 내용을 저장합니다.

8. 이제 새롭게 만들어진 type_code``속성을 이용하여 공항 레이어를 스타일링합니다. ``ne_10m_airports 레이어를 우측클릭하고 속성 :guilabel:`Properties`을 선택합니다.

9. 레이어 속성 Layer Properties 다이알로그에서 스타일 Style 탭을 선택합니다. 드롭다운 메뉴에서 분류된 Categorized 스타일을 선택하고 컬럼 Column`으로 ``type_code` 을 선택합니다. 색상표를 고르고 분류 :guilabel:`Classify`를 누릅니다. 확인 :guilabel:`OK`을 누르고 QGIS 메인 창으로 되돌아 갑니다.

10. 멋지게 스타일링된 지도를 보게됩니다. 상호작용하는 웹맵을 만들기위해 이것을 내보내보도록 합시다. 메뉴 :menuselection:`Web –> qgis2leaf –> Exports a QGIS Project to a working leaflet webmap`로 갑니다.

11. In the QGIS 2 Leaflet dialog, click Get Layers to get the refreshed layer list. Select the Full screen option to have a full screen web map. Choose layer extent as the Extent of the exported map. Choose a Output project folder on your system where the plugin will write the output files. Click OK.

12. 일단 내보내기 과정이 종료되면, 컴퓨터의 출력 폴더를 찾아보십시오. 탐색기에서 ``index.html``파일을 여십시오. QGIS지도와 똑같은 상호작용 웹 지도를 보게됩니다. 지도 주위를 확대 그리고 이동할 수 있습니다. 그리고 아무 객체나 눌러서 속성정보가 담긴 팝업창을 볼 수 있습니다. 완전한 객체 웹 지도를 얻기 위해서 웹 서버에 이 폴더의 내용을 복사할 수 있습니다.

13. 이제 지도를 보다 사용자 중심으로 만들기 위해 이플러그인의 고급 특성을 알보겠습니다. 주목해 보면 팝업창은 객체의 모든 속성을 포함하고 있습니다. 어떤 속성은 유용하지 않고 전체 팝업은 보기 좋지 않습니다. 이것을 보다 낫게 만들기 위해 사용자 HTML로 대체할 수 있습니다. 이것은 ``html_exp``라는 컬럼에서 사용자 HTML을 추가함으로써 할 수 있습니다. ``ne_10m_airports``레이어를 우측클릭하고 속성 테이블 열기 :guilabel:`Open Attribute Table`를 선택합니다.

14. 속성 테이블 다이알로그에서 편집모드전환 Toggle Editing 단추를 누릅니다. 일단 레이어가 편집모드가 되면 필드계산기 열기 Open Field Calculator 단추를 누릅니다.

15. 새필드생성 Create a new field 상자를 체크하고 출력필드이름 Output field name`으로 ``html_exp``를 입력합니다. 출력필드유형 :guilabel:`Output field type`으로 텍스트 :guilabel:`Text (string)`를 선택합니다. 긴 HTML 문자열을 입력해야 하므로 출력필드폭 :guilabel:`Output field width`으로 ``200``을 입력합니다. 표현식 :guilabel:`Expression`영역에서 다음의 식을 입력합니다. 복잡해 보이는 표현식은 단순하게 ``iata_code`, name 그리고 type 속성으로부터 HTML표를 정의하고 셀값을 대신합니다. 표현식이 정확한지 확인하기 위해 출력미리보기 Output preview 를 체크합니다.

concat('<h3>', "iata_code", '</h3><table>', '<tr><td>Airport Name: <b> ',
"name", '</b></td></tr><tr><td>Category: <b> ', "type",
'</b></td></tr></table>')

16. 속성 테이블 Attribute Table`창으로 되돌아가면 끝에 새로운 컬럼을 볼 수 있을 것입니다. 표현식이 정확하게 작동했는지 확인하고 편집모드전환 :guilabel:`Toggle Editing 단추를 눌러 변경된 내용을 저장합니다.

17. 이제 메뉴 :menuselection:`Web –> qgis2leaf –> Exports a QGIS Project to a working leaflet webmap`를 이용하여 다시 한번 지도를 내보내 보겠습니다.

18. 전처럼 옵션을 선택합니다.

19. 일단 내보내기 과정이 종료되면 출력 폴더로 갑니다. 현재의 시간이 적힌 하위 폴더가 생길 것입니다. 탐색기에서 하위 폴더 안에 있는 ``index.html``를 찾아 엽니다. 아무 객체나 누르고 팝업을 봅니다. 전보다 깔끔하고 필요한 정보만 들어 있는 것을 알게됩니다.

20. Another useful feature of the qgis2leaf plugin is the ability to specify a custom icon to use with the web map. This is accomplished by specifying the path to the custom icon in a field called icon_exp. We will create a new layer containing only the major airports and style using a custom SVG icon. Locate the Select features using an expression tool from the toolbar.

21. 아래의 식을 입력하고 모든 주요 공항을 선택하기 위해 선택 :guilabel:`Select`을 누릅니다.

"type_code" = 3

22. ne_10m_airports 레이어를 우측 클릭하고 다른 이름으로 저장 :guilabel:`Save Selection As...`을 선택합니다.

23. 새 이름으로 벡터 레이어 저장하기 :guilabel:`Save vector layer as...`다이알로그에서 출력파일의 이름을 ``major_airports.shp``로 입력합니다. 선택된 객체만 저장과 저장된 파일을 지도에 추가:guilabel:`Add saved file to map`를 체크하고 확인 :guilabel:`OK`을 누릅니다.

24. 일다 QGiS에 ``major_airports``레이어가 추가되면 우측클릭하고 속성 테이블 열기 :guilabel:`Open Attribute Table`를 선택합니다.

25. 속성 테이블 다이알로그에서 편집모드전환 Toggle Editing 단추를 누릅니다. 일단 레이어가 편집모드가 되면 필드계산기 열기 Open Field Calculator 단추를 누릅니다.

26. 필드계산기 Field Calculator 다이알로그에서 출력필드이름 :guilabel:`Output field name`으로 ``icon_exp``를 입력합니다. 텍스트 :guilabel:`Text (string)`로 설정합니다. 표현식 :guilabel:`Expression`영역에서 다음의 식을 입력합니다.

'airport.svg'

27. 속성테이블 Attribute Table.에서 편집모드전환 Toggle Editing 단추를 눌러 편집된 내용을 저장합니다.

28. 메뉴 Web ‣ qgis2leaf ‣ Exports a QGIS Project to a working leaflet webmap`에서 ``qgis2leaf` 플러그인을 엽니다. QGIS에서 두 개의 레이어를 가져오기 위해 Get Layers 단추를 누릅니다. 베이스맵으로 사용가능한 많은 다른 타일 레이어가 있습니다. 여기서는 다른 것을 시도해보고자 :guilabel:`Basemap`으로 :guilabel:`Stamen Watercolor`를 선택하겠습니다. :guilabel:`OK`를누릅니다.

29. 공항의 아이콘으로 airport.svg``을 명시했던 것을 기억해 봅시다. 출력 디렉토리에 이 아이콘을 추가할 필요가 있습니다. QGIS는 많은 아이콘을 제공합니다. 윈도우상에서 이러한 아이콘들은  메뉴  :menuselection:`C: --> Program Files --> OSGEO4W64 혹은 QGIS Brighton --> apps --> qgis --> svg`에 위치해 있습니다. 경로는 사용자 컴퓨터의 플랫폼과 설치 유형에 따라 다를 수 있습니다. 디렉토리를 찾아서 좋아하는 아이콘을 고릅니다. 지도에서는 ``transport 카테고리 하위에 있는 ``amenity=airport.svg``을 시도해 봅니다.

30. 내보내기를 할 때 명시했던 출력 디렉토리에 이 아이콘을 복사하고 붙여넣기를 합니다. ``airport.svg``로 이름을 바꿉니다.

31. 이제 폴더에서 index.html 파일을 열어봅니다. 주요 공항에대한 사용자 아이콘을 가진 멋진 베이스맵을 볼 수 있을 것입니다. 또한 레이어 패널의 우측 상단 구석에 두개의 레이어가 컨트롤 될 수 있게 된 것을 주목하십시오.

Hope this tutorial gives you a head start in creating web maps. Below is the live interactive map created for this tutorial.