Programing

Mapbox GL JS와 Mapbox.js

crosscheck 2020. 12. 12. 10:06
반응형

Mapbox GL JS와 Mapbox.js


Mapbox 용어집, Mapbox.js에서

Mapbox.js는 웹 사이트에 대화 형지도를 추가 할 수있는 JavaScript 라이브러리입니다. Leaflet 용 플러그인이며 무료로 사용할 수있는 오픈 소스 라이브러리입니다.

Mapbox GL JS

Mapbox GL JS는 Mapbox GL을 사용하여 대화 형지도를 렌더링하는 JavaScript 라이브러리입니다. 무료로 사용할 수있는 오픈 소스 라이브러리입니다. Mapbox 스타일 또는 Mapbox Studio로 만든 사용자 지정 스타일을 Mapbox GL JS 응용 프로그램에 추가 할 수 있습니다.

과에서 이 답변

Mapbox 스타일은 Mapbox GL 및 기본 iOS 및 Android SDK와 함께 사용하기위한 것입니다. 클래식 Mapbox JS와 함께 사용할 수 없습니다. Mapbox JS는 래스터 타일을 지원하므로 스타일을 지정할 수 없습니다. 이미지 일뿐입니다. Mapbox GL과 네이티브 SDK는 벡터 타일을 사용할 수 있으며 스타일링이 가능합니다.

소스에 mapbox.js대한 대체물로 사용할 수 있다고 생각하지만을 사용 하여 동일하게 할 수 있습니까? 두 라이브러리간에 다른 차이점은 무엇입니까?leaflet cssjsmapbox-gl.js


내가 아는 한, Mapbox GL JS는 백그라운드에서 Leaflet을 사용하는 현재 Mapbox JS를 대체 ​​할 것입니다. Leaflet이하는 많은 일들, GL은 더 많은 것을 할 수 있습니다. 그러나 모든 것이 아닙니다. 그 반대도 마찬가지입니다. GL은 Leaflet이 할 수없는 일을 할 수 있습니다. GL의 가장 큰 점은 WebGL을 사용하여 벡터 타일을 중심으로 구축된다는 것입니다. 소개 기사에서 :

웹지도를위한 빠르고 강력한 새 시스템 인 Mapbox GL JS 발표. Mapbox GL JS는 클라이언트 측 렌더러이므로 JavaScript 및 WebGL을 사용하여 비디오 게임의 속도와 부드러움으로 데이터를 동적으로 그립니다. 서버 수준에서 스타일과 확대 / 축소 수준을 수정하는 대신 Mapbox GL은 JavaScript에 강력한 기능을 제공하여 동적 스타일과 자유로운 상호 작용을 허용합니다. 벡터 맵은 차세대 진화이며 개발자가이 프레임 워크로 무엇을 빌드하는지 보게되어 기쁩니다.

정말 두 사람을 나란히 비교하고 싶다면 내가 아는 한 아무도 없어서 미안합니다. 비교할 때 언급 / 고려할 사항이 너무 많으므로 자신의 요구 사항에 따라 직접 수행하는 것이 가장 좋습니다. 두 프레임 워크가 모두 수행 할 수있는 작업에 대한 좋은 아이디어를 제공하므로 각 프레임 워크의 예제를 비교하는 것이 좋습니다.

그 후 API를 비교할 수 있습니다.

명심해야 할 한 가지는 GL이 새로운 브랜드이며 우리 개발자 모두가 알다시피 가격과 함께 제공된다는 것입니다. 일부 꼬임은 해결되지 않았습니다. Leaflet은 매우 성숙하고 널리 사용되며 매우 잘 테스트 / 검증되었습니다. 현재 GL에 어떤 문제가 있는지 살펴보고 싶다면 저장소의 Github에서 문제를 살펴볼 수 있습니다.

도움이 되었기를 바랍니다. 행운을 빕니다!


iH8의 대답은 훌륭합니다.

들어 기본지도 , Mapbox.js 디스플레이는 그들이 HTML 및 CSS를 사용하여 타일 (PNG 및 JPEG) 파일 및 디스플레이를 래스터. Mapbox GL JS는 벡터 타일 (팬시 프로토콜 버퍼)을 표시하고 WebGL을 사용하여 표시합니다. 래스터 타일도 표시 할 수 있지만 초점이 아닙니다.

Mapbox.js와 Mapbox GL JS는 모두 GeoJSON 레이어 및 마커와 같은 오버레이를 지원합니다. 둘 다 오픈 소스이며 유사한 라이선스와 몇 명의 공유 기여자가 있습니다.

Mapbox.js 레이어의 스타일은 서버에 저장되고 서버 기술로 렌더링됩니다. Mapbox GL JS의 스타일은 브라우저에서 동적으로 렌더링되므로 실시간으로 변경할 수 있습니다.

Leaflet은지도 기울이기 및 회전과 같이 일부 브라우저가 지원할 수없는 몇 가지 비용으로 더 광범위한 브라우저 지원을 제공합니다. Mapbox GL은 WebGL을 지원하고 최신 컴퓨터에서 최상의 성능을 발휘하는 브라우저를 지원합니다. Mapbox GL Native라는 기본 버전이 있으며 모든 휴대폰에서 정말 잘 작동합니다.

이름에도 불구하고 Mapbox 및 Mapbox.js와 함께 Leaflet을 사용하고 Mapbox가 아닌 스타일의 Mapbox GL을 사용할 수 있습니다.


일반적으로 Leafletjs와 Mapbox.js는 동일 하지만 Mapbox.js에는 Leaflet을 감싸고 Mapbox의 서비스 (예 : 길 찾기)에 연결하는 플러그인과 확장 기능이 있습니다. 유사한 플러그인 및 기능이 다른 회사 또는 제품에 존재하며 Leaflet은 Mapbox에 추가하거나 대신 사용할 수 있습니다. Leaflet 기반 라이브러리는 일반적으로 더 나은 레거시 브라우저 지원, 래스터 타일 사용 등을 제공합니다. 즉, 벡터 타일 (pbf, mvt 등) 및 다양한 렌더러 (webgl 포함)와 같은 최신 기능을 통합하는 기능이 추가되고 있습니다.

Mapbox-gl-js 및 기본 변형 mapbox-gl벡터 타일 (pbf, mvt) 및 캔버스 요소로 렌더링 하기위한 webgl (-js 변형의 경우)에 대해 고도로 최적화 된 고성능 오픈 소스 라이브러리입니다 . 비교적 새롭기 때문에 Leaflet으로 쉽게 사용할 수있는 것들이 다르거 나 어려울 수 있습니다 (2016 년 4 월 현재) . 모바일 장치 (예 : iphone 5s)를 포함하여 매우 유사하고 매우 잘 작동한다고 말했습니다. ). 임의의 기이 한 예는 오른쪽에서 왼쪽으로 읽는 이스라엘의 히브리어 레이블이 거꾸로되어 있고 말도 안되는 것처럼 보인다는 것입니다 (해결중인 문제입니다).

이전 브라우저 지원을 중단해도 괜찮다면 Mapbox-gl (-js) 경로를 선택하는 것이 좋습니다. 내 제한된 경험 (몇 달 동안 작업)에서 전반적으로 최고의 사용자 + 개발자 경험을 가지고 있으며 Mapbox는 엔지니어링 / 출력에서 ​​일관되었습니다. 나는 그들의 유료 서비스에 대한 경험이 적고 그들의 라이브러리가 이러한 서비스에 얼마나 밀접하게 결합되어 있는지 불분명합니다. 모바일 프로젝트의 경우 Google Maps, Leaflet v0.7 및 v1을 살펴본 후 mapbox-gl-js로 이동했는데 좋은 결정 인 것 같습니다.

나는 이전 Leaflet 경험과 HTML / CSS / JS에 능숙한 Mapbox-gl-js를 사용하기 시작했고, 기술적 인 세부 사항을 이해하는 데 도움이되는 입문서예제를 발견 했습니다 . 지도 스타일이 JSON (CSS 아님)으로 지정되는 방식을 포함합니다. 또한 서비스 약관을 자세히 살펴보면 특히 Google과 비교했을 때 중요한 긍정적 인 차별화 요소였습니다 . Mapbox의 서비스는 미국 이외의 지역에서 가장 강력한 서비스를 제공하지 않으므로이 부분도 검토해야합니다 (내 경험상 다른 제공 업체가 일반적으로 이용 가능하므로 이것이 도서관 채택 결정에 반드시 영향을 미치지는 않습니다. Mapbox 기능 또는 표준과 매우 밀접하게 연결되어 있습니다.


I'm currently working on switching a complex Leaflet based map system over to Mapbox GL and I'd say that one notable difference I've found is in the draw tools and handling of GeoJSON layers. Leaflet has a suite of draw tools that include non-standard GeoJSON like markers, rectangles and circles. The developers of Mapbox GL made a decision to focus on native GeoJSON, which means there's no out of the box support for drawing/rendering circles and rectangles (e.g. there's nothing like L.Circle in Mapbox GL); there is a marker but styling it to look like a traditional Leaflet marker requires creating your own sprites or using an SVG. All of these things are still possible, but they take a little more set up on the part of the developer than they did in Leaflet.

Additionally, most of the Mapbox GL layers are rendered as canvas elements. This means that, unlike Leaflet, there are no HTML elements associated with your various layers. This makes it harder to target the elements with CSS if needed. One exception I've found here is markers which are rendered as separate HTML elements.

All of that being said, I've been able to almost fully replicate the existing draw tools and rendering styles with some small differences. If you need highly customized draw tools, Mapbox GL may be frustrating for you.

Browser support has been mentioned as a potential issue as well. Any browser that supports WebGL can run Mapbox GL. This includes all major browsers. The only significant browser set we saw that didn't support Mapbox GL was IE10 or older, but our analytics indicated that almost none of our users still used these browsers so we officially dropped support for them. Your mileage may vary obviously.

Overall though, I'm happy with the switch because I think Mapbox GL is easier to work with and provides a better user experience.


For developers who have experience building web maps with Mapbox.js or Leaflet, switching old projects to use Mapbox GL JS can drastically improve the performance of your existing applications. Mapbox GL JS uses WebGL client-side rendering to display your maps, which results in faster loading, smoother transitions when zooming or panning, and greater flexibility to change map data and styles on the fly. These improvements make switching to Mapbox GL JS well worth the effort, so I recently converted Peter’s Courier demo from Mapbox.js to GL


Mapbox.js is deprecated, use Mapbox GL JS as stated on their website :

Mapbox.js

  • No longer in active development
  • Supports raster tiles
  • Tiles are generated by the server
  • Map styles can’t be changed in the browser, but map overlays can be styled dynamically

Mapbox GL JS

  • In active development — we are adding new features, improving existing features, and fixing bugs
  • Supports vector tiles
  • Maps are rendered client-side by the browser
  • Map data and styles can be changed dynamically

The article also contains examples of differences and similarities between the two.


If you're planning on rendering more than 10 maps per page I'd recommend not using mapbox-gl. Mapbox-gl uses WebGl to dynamically draw maps. Although all modern browsers have support for WebGl we've ran into problems when opening too many WebGl contexts. Too many is subjective and dependent on exactly which browser your client is using. The number of contexts also seems to be tab independent so if your client has a tab open that is already using "too many" contexts your maps might not render as a consequence.

See below for a couple of linked issues:

https://github.com/mapbox/mapbox-gl-js/issues/6312

https://github.com/mapbox/mapbox-gl-js/issues/7332

I've never used mapbox.js or leaflet for that matter, but for pages that require 10 or more maps I can definitely recommend not using mapbox-gl.

참고URL : https://stackoverflow.com/questions/35069753/mapbox-gl-js-vs-mapbox-js

반응형