지도 상자 스타일 메모표

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

Mapbox 밑그림은 내가 처음으로 Mapbox를 만났을 때다.전단지 프로젝트를 위해 더 좋은 밑그림을 찾기 위해서, 나는 줄곧 서로 다른 지도 제공자를 미리 볼 수 있는 사이트를 탐색해 왔다.나는 내가 Mapbox Streets 스타일을 만났던 것을 분명히 기억한다.신선한 색깔, 선명한 것은 단지 전체적인 아름다운 지도일 뿐이다.오늘의 상황도 마찬가지다.
Mapbox를 자주 사용하지만, 나는 여전히 그들이 미리 정의한 스타일의 URL을 기억하지 못하고, 그들의 문서를 참고해야 한다.이 글은 Mapbox 양식을 사용한 메모용으로 사용되기 위한 것이다.이것은 Mapbox의 모든 미리 정의된 스타일과 각 스타일의 가장 좋은 용례를 포함할 것이다.

사용법

나는 내 Introduction to Mapbox and React post에서 기본 지도를 만드는 방법을 소개했고, 여기에 한 토막을 발표할 것이다.지도에서 미리 정의된 Mapbox 스타일을 사용하려면 이 코드 세그먼트style의 속성 값을 사용할 스타일로 바꾸기만 하면 됩니다.

const map = new mapboxgl.Map({
  container: mapContainer.current,
  style: "mapbox://styles/mapbox/streets-v11", // replace me
  center: [-87.903982, 43.020403],
  zoom: 12,
});

가두

https://www.mapbox.com/maps/streets
스타일 URL:mapbox://styles/mapbox/streets-v11거리 스타일은 아마도 대부분의 용례의 기본 스타일일 것이다.어떤 좋은 정보 제품과 마찬가지로, 그것은 복잡한 사물을 간단하고 쉽게 가깝게 만든다.지도 양식은 뚜렷한 도로, 행정 경계와 취미를 특색으로 한다.지형 과장도 의외로 좋다.
유용하다

도시 지역과 취미를 주목하는 지도

내비게이션, 교통, 서비스와 상업에 전념한 지도

범용

바깥

https://www.mapbox.com/maps/outdoors
스타일 URL:mapbox://styles/mapbox/outdoors-v11야외 스타일은 개인적으로 가장 좋아하는 것이고 내가 가장 자주 접하는 것이다.맵박스는 거리 스타일과 유사하게 거의 완벽한 팔레트를 선택해 고도의 기능성과 심미성을 지녔다.지도 풍격은 지형과 자연 특징을 두드러지게 나타내는 동시에 도로, 행정 경계와 취미 등 특징을 뚜렷하게 전달했다.이 지도는 위대한 도로망을 제외하고는 오솔길을 표시하는 데 아주 잘 되어 있다.만약 네가 이전에 Strava를 사용한 적이 있다면, 너는 이런 스타일의 변화를 보게 될 것이다.
유용하다

야외지도(도보여행, 자전거 타기, 낚시, 스키 등)

비도시 지역에 집중한 지도

비도시 환경에서의 일반 용도

위성.

https://www.mapbox.com/maps/satellite
스타일 URL:mapbox://styles/mapbox/satellite-streets-v11스타일 URL:mapbox://styles/mapbox/satellite-v9두 가지 위성 지도 양식이 있는데 그것이 바로 일반적인 낡은 위성 지도와 위성 거리이다.전자는 바로 그것이 듣는 모습이다.라벨이 없는 위성 영상.후자는 거리 스타일과 위성 이미지의 융합이고 위성 스타일은 대부분의 응용에서 필요할 수 있는 주력이다.위성 영상은 상업과 정부 공급업체의 혼합을 대표한다.나는 줄곧 그림이 높은 축소 수준에서의 선명도에 놀랐다.
유용하다

언제나 진실한 세계의 대상(즉 건축물, 자연특징, 도로)을 보는 진실한 표시가 중요하다

토지 커버/개발, 부동산, 도시 계획, 내비게이션, 크로스컨트리/도로 여행에 전념한 지도

범용

어둠과 광명

https://www.mapbox.com/maps/dark
https://www.mapbox.com/maps/light
스타일 URL:mapbox://styles/mapbox/dark-v10스타일 URL:mapbox://styles/mapbox/light-v10짙은 색과 연한 색은 내가 두 번째로 좋아하는 지도 상자 양식이다.이 최소 양식들은 데이터가 시각화된 지도의 이상적인 용례이다.Mapbox는 소음을 없애고 최소한의 양식을 만들어 공간 이야기를 할 수 있는 상하문만 충분합니다.이런 스타일은 데이터를 쉽게 팝업할 수 있게 한다.맵박스는 명암 스타일 외에도 맵박스 스튜디오에서 어떤 색상을 기반으로 음소거 단색 스티커를 만드는 방법도 제공합니다.응용 프로그램에 최소한의 맵을 만들어야 한다면, 이것은 매우 유용하다.나는 미래의 게시물에 이 점을 보도할 계획이지만, 이곳은 example의 과도기이다.
유용하다

데이터 시각화 및 중첩

밑그림의 부차적인 모든 상하문

탐색 미리 보기 - 낮과 밤

스타일 URL:mapbox://styles/mapbox/navigation-preview-day-v4스타일 URL:mapbox://styles/mapbox/navigation-preview-night-v4물론, 나는 이전에 내비게이션 미리 보기 스타일을 사용한 적이 없다. 왜냐하면 나는 내비게이션에 의존하는 프로그램을 구축한 적이 없기 때문이다.Mapbox는 이러한 양식에 대해 독립된 제품 페이지를 제공하지 않았지만 Mapbox GL JS docs.에서 인용하여 로컬에서 양식을 미리 보았습니다. 공평하게 말하자면 이 양식들은 내비게이션 노선을 미리 보기 위해 설계된 것이라고 생각합니다.두 가지 스타일이 있는데 그것이 바로 낮과 밤이다.
유용하다

탐색 미리 보기

탐색 안내서 - 낮과 밤

스타일 URL:mapbox://styles/mapbox/navigation-guidance-day-v4스타일 URL:mapbox://styles/mapbox/navigation-guidance-night-v4마찬가지로 Mapbox가 이러한 양식에 대해 독립된 제품 페이지를 제공하기 전에 나도 내비게이션 가이드 양식을 사용한 적이 없지만 Mapbox GL JS docs.에서 인용하여 로컬에서 이 양식들을 미리 보았다. 공평하게 말하자면 이 양식들은 노선 내비게이션을 할 때 지도를 제공하기 위해 설계된 것이라고 생각한다.두 가지 스타일이 있는데 그것이 바로 낮과 밤이다.
유용하다

내비게이션 안내

최적화

이 글을 쓰면서 맵박스 스타일을 최적화하는 게 얼마나 쉬운지 배웠다.스타일 URL의 끝에 검색 문자열을 추가하기만 하면 됩니다.그래서 만약에 내가 최적화된 야외 스타일을 보여주고 싶다면 나는 이렇게 할 수 있다mapbox://styles/mapbox/outdoors-v11?optimize=true또 다른 멋있는 점은 맵박스의 미리 정의된 스타일뿐만 아니라Mapbox가 위탁 관리하는 모든tileset에서optimize 로고를 사용할 수 있습니다. (앞으로 댓글에 더 많은 설명이 있을 것입니다.)

다음 단계

이 기능을 실제로 사용하려면 myIntroduction to Mapbox and React post에서 코드 세션을 가져와 다양한 스타일의 URL을 교환해 보십시오.
만약 당신이 이 문장이 매우 유용하다고 생각한다면, 전송, 공유, 또는 한 부를 찾아 주십시오 The Mapbox Developer's Handbook!