지리원 지도 Vector(가칭)의 벡터 타일을 사용하여 지도 해설을 시도했다(UNVT와 MapLibre를 이용했다)
벡터 타일을 쓰고 싶지만 아무래도 어려울 것 같다는 생각이 많은 것 같아요.여기서 우리는 텍스트 편집기에서 > 파일을 편집하기만 하면 벡터 판도를 사용하는 '지도 해설' 방법을 간단하게 소개할 수 있다.금방 할 수 있으니까 손이라도 한번 움직여 보세요.(상부에서 스스로 전선을 만질 수 있다.)
배경은 국토지리원의 지리원 지도 벡터(가칭)를 사용하고, 지도의 라이브러리는 맵리브르이기 때문에 이용 시에도 아무런 제한이 없다.배경 그림도 자신의 벡터 맵을 사용할 수 있습니다.
개시하다
우리는 벡터 기와 조각 기술 중 데이터 소비 분야 기술 중 하나인'지도 해설'(이야기)을 시도했다.이런 느낌.
기존 (생산, 호스트의) 벡터 기와 데이터와 기존 양식에서 > 파일 편집을 통해 지도 해설을 간단하게 만드는 방법을 시도해 본다.2021년 10월 22일 실시된UNVT Storytelling Workshop을 참고했다.
용어(지도 해설)
이 페이지에는 배경지도에 교과서 등을 올려 이야기를 다룬 지도와 그 일을'지도 해설'이라고 부른다.
이번 사업의 포지셔닝
일반적으로 벡터 기와 조각에 대해 데이터 제작부터 인터넷 지도에 이르기까지 소비는 각양각색의 단계가 있다.벡터 타일의 라이프 사이클에 따라 분류하면 프로덕션(생산), 스타일(스타일링), 호스팅(호스트), 옵티머스(최적화), 유저(소비)의 단계Fujimura 등이 있다.
이번'지도 해설'(스토리) 제작은 벡터 타일 소비 분야 기술이다.벡터 타일을 소비하기 위해서는 이전 단계의 기술을 아는 것이 좋겠지만, 이번 코디는 다른 분야는 몰라도 편집만 할 수 있는 소재를 골랐다.
작업 환경
아래의 물건을 사용했다.
*Google Chrome 버전 95.044638.69(Official Build)
* 텍스트 편집기(메모장)
사용된 재료
생산된 벡터 타일과 그 스타일이 그대로 유지된 상태에서 UN Vector Tile Tolkit의 unvt/tell(스토리맵을 만드는 도구)로 스토리맵을 제작했다.
이야기는 스스로 창작한 것이다.
절차.
소스 정보 정리 등
작업에 앞서 재활용한 재료를 재정비하다.
배경 맵 스타일
국토지리원 정보보급 수업을 이용한 지아이허브 창고에서 제공하는 스타일(지리원 지도 Vector 바람의 지도).
https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json
이 스타일 파일에는 인용된 벡터 기와 조각의 출처도 포함되어 있습니다.지리원 지도 Vector(가칭)에서 제공한 벡터 타일은 출처만 표시하면 자신의 사이트나 앱 등에서 사용할 수 있다여기..
이야기의 준비와 위치의 확인
먼저 이야기에 대한 정보를 준비하세요.이야기(전체)의 제목, 부제목, 옆줄, 꼬리표 등을 미리 결정한다.
지도 해설은 몇 장을 만들어 지도를 진행하기 때문에 매 장마다 다음과 같은 내용을 준비한다
경위도의 단위는 분초가 아니라 십진법의 도이다.
지리원 지도 Vector(가칭)의 주소 표시줄을 확인하면 위치를 간단하게 알 수 있다(아래 그림).자리에 이름을 써라.
(위치에 대한 설명(예)
이름: gsi-z12
중심(경도, 위도): (140.0853436.104703)
크기 조정 레벨: 12
파일 만들기
파일을 만들고 텍스트 편집기에서 다음과 같이 시도해 보세요.text/yaml이 아직 기재되지 않았기 때문에 아무것도 나오지 않았습니다.
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<script type="module" src="https://unvt.github.io/tell/module-s.js"></script>
</head>
<body>
<script type="text/yaml">
</script>
</body>
</html>
지도 해설의 배경 지도를 상호작용으로 이동하려면 모듈-sint.js 대신 모듈-s.js를 사용하십시오. (웹 스크롤과 지도 이동이 혼합되어 처리하기 어려울 수 있습니다.)
스토리를 파일에 추가
텍스트 편집기를 사용하여 방금 만든 파일의 스크립트 (type="text/yaml") 탭에 다음과 같이 스토리보드의 정보를 기입합니다.여기에는 View로 3개의 위치(gsi-z8, gsi-z10, gsi-z15), chapters로 3개의 장(chapter1, chapter2, chapter3)을 썼다.채우기 후 저장 및 업데이트).
style: https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json
title: 地図語りのテスト
subtitle: 2021年11月のテスト
byline: 背景地図には 地理院地図Vector（仮称）を使っています。 (powered by UNVT)
theme: light
footer: これでストーリーは終わりです。地理院地図Vector（仮称）は <a href='https://maps.gsi.go.jp/vector/'>こちら</a>
view:
gsi-z8:
center: [140.084722, 36.104578]
zoom: 8
gsi-z10:
center: [140.084722, 36.104578]
zoom: 10
gsi-z15:
center: [140.084722, 36.104578]
zoom: 15
chapters:
- id: chapter1
alignment: center
url: https://www.gsi.go.jp/
title: 国土地理院
description: >
国土地理院は茨城県にあります。
location: gsi-z8
- id: chapter2
alignment: left
url: https://www.gsi.go.jp/
title: 国土地理院
description: >
国土地理院はつくば市にあります。北に筑波山、東に霞ヶ浦があります。
location: gsi-z10
- id: chapter3
alignment: right
url: https://www.gsi.go.jp/
title: 国土地理院
description: >
国土地理院は学園西大通り沿いにあります。警察署のそばです。
location: gsi-z15
이상의 업무가 끝났습니다.yaml에 대한 작성은 아래에 쓰십시오.
결과를 확인하다
마지막으로 GiitHub 페이지 등 사이트 어딘가에 확인 동작을 올려야 한다고 생각했지만 파일 시스템에서 파일을 열어도 지도가 보인다고 생각했다(외부 모듈을 참조했기 때문에 인터넷에 연결해야 한다).
배경 그림 사용 정보
이번에 사용된지리원 지도 Vector(가칭)에 제공된 벡터 타일은 출처만 표시하면 자신의 사이트와 앱 등도 사용할 수 있다여기..
이번에 참조한 벡터 타일의 풍격에는 우리가 제작한 배경지도의 오른쪽 아래에 지리원 지도 Vector(가칭)가 있다는 좋은 전고가 있다.
감사의 말
UNVT Storytaling Workshop의 강사로서 unvt/tell을 제작해 주신 Fujimura씨에게 감사드립니다.
또한optgeo/s를 개발해 주신 여러분(특히 halsk씨와taisukef씨)에게 감사드립니다.
이번 작업은Map Libre를 사용했지만 unvt/tell에 기재된 바와 같이 많은 부분을 맵박스/storyelling에서 지도했습니다.
이 창고들을 참고하게 해 주세요.
References
Reference
이 문제에 관하여(지리원 지도 Vector(가칭)의 벡터 타일을 사용하여 지도 해설을 시도했다(UNVT와 MapLibre를 이용했다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/T-ubu/items/b970339a49d8f584acf6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
