2c:null 2d:["$","title",null,{"children":"Использование Mapbox GL JS | Сандро | Observable"}] 32:T7e8,md`# Использование Mapbox GL JS ![](https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/-122.4241,37.78,14.25,0,60/${width}x640?access_token=pk.eyJ1IjoidG1jdyIsImEiOiJjamJ6eXpkd2EwMndoMzRtb3B6NjkyZG85In0.8kzWTUAe9DL5YzckMAEYfA) Mapbox GL JS - это современная библиотека для веб-карт, разработанная [Mapbox](http://mapbox.com/). Использование его похоже на [Листовку](http://leafletjs.com/) с несколькими заметными отличиями: - Mapbox GL JS - это векторная библиотека. Вместо отображения графических фрагментов, отображаемых сервером, он отображает векторные фрагменты в браузере. Это означает, что он не полагается на дискретные уровни масштабирования, и все аспекты стиля карты изменяются в библиотеке. - Плитки для векторов немного отличаются от графических плит, а различные организации и компании поставляют их. В этом примере используются векторные плитки из Mapbox самостоятельно, но есть и другие источники. Если вы хотите использовать службу плитки Mapbox, вам необходимо зарегистрироваться для доступа к токену на своем сайте: токен, поддерживающий эту демонстрацию, циклический. Как и в Листовке: - Я использую трюк в [Diposing Content](https://beta.observablehq.com/@mbostock/disposing-content) для правильной очистки после любых ресурсов, которые выделяет карта.`33:[] 30:{"id":"57013e7fd1223a49","slug":"n-mapbox-gl-js","title":"Использование Mapbox GL JS","thumbnail":"cecd5dfffc0fe3255e854b4162092f1488d98a5f1ed90858358dd9a531eb4f9d","access_level":"public","create_time":"$D2018-07-24T12:18:27.094Z","update_time":"$D2018-07-24T19:38:45.619Z","view_time":null,"first_public_time":"$D2018-07-24T14:45:09.231Z","has_unpublished_edits":null,"fork":{"id":"8df4248910c363e5","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0a9c12baacff9b60","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":"starter_2024"},"version":303,"publish_version":303,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null}],"members":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Использование Mapbox GL JS","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n // Создаем объект \\`map\\` с помощью конструктора mapboxgl.Map, ссылаясь на \n // контейнер div\n let map = new mapboxgl.Map({\n container,\n center: [\n 65.61457, 55.524149\n ],\n zoom: 10,\n style: 'mapbox://styles/mapbox/streets-v9',\n scrollZoom: false\n });\n \n if (showNavigationControl) {\n map.addControl(new mapboxgl.NavigationControl(), 'top-right');\n }\n \n // Будьте осторожны, при очистке ресурса карты, используя \\`map.remove()\\` всякий раз \n // эта ячейка обновляется.\n try {\n yield map;\n yield invalidation;\n } finally {\n map.remove();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`Вот пример реактивных ячеек, влияющих на карту: вы можете включать и выключать навигацию. Когда значение ячейки - **showNavigation** - изменяется, карта удаляется и повторно создается с новой конфигурацией.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Карта, реагирующая на реактивные переменные\n\nВот пример немного более сложной настройки: карта, которая реагирует на реактивные переменные без повторного инстанцирования.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"container2 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"centerpoint = {\n // Создайте объект \\`map\\` с помощью конструктора mapboxgl.Map, ссылаясь на \n // контейнер div\n let map = new mapboxgl.Map({\n container: container3,\n center: [\n 65.352731704711914,\n 55.846272321172954\n ],\n zoom: 4,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n \n return Generators.observe(change => {\n map.on('mousemove', e => {\n change(e.lngLat);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`Эта карта прослушивает события \\`mousemove\\` и испускает новые «входные» события на элементе карты.\nЗатем я использую viewof, чтобы мы могли видеть карту как элемент, а для ее значения - центральную точку - значение этого элемента, которое показано ниже.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## Включая библиотеку\n\nMapbox GL JS также можно загрузить из CDN Mapbox, но он отлично работает с unpkg, и именно так мы загружаем большинство вещей, поэтому ... Я загружаю его оттуда. Как и в Leaflet, для правильной работы необходимы как JavaScript, так и CSS.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg';\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## Административный материал\n\nЭто только стиль, используемый для этого яркого флажка.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"