response-map-gl без ключа API с использованием плиток osm

Question

Является ли это возможным?

Это говорит мне, что это так, но не знаю, почему он определяет и ключ API.

но я не могу заставить его работать react-map-gl Класс StaticMap. Свойство, которое я вижу из этого класса, просто mapStyle который будет принимать стандартный путь / имя векторных плиток Mapbox. Это берет объект? Мой код не выдает ошибку и не показывает плитки, которые я запрашиваю.

    <DeckGL>
        <StaticMap
            mapStyle= {{
                "version": 7,
                "sources": {
                  "simple-tiles": {
                    "type": "raster",
                    "tiles":["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                    "tileSize": 256
                  },
                  "power": {
                  "type": "vector",
                  "tiles": ["http://gpstrails.info/ex/leaflet/power/osm/{z}/{x}/{y}.json"]
                }
                },
                "layers": [{
                  "id": "simple-tiles",
                  "type": "raster",
                  "source": "simple-tiles",
                  "minzoom": 0,
                  "maxzoom": 22
                },
                {
                "id": "road",
                "source": "power",
                "source-layer": "power",
                "type": "line",
                "layout": {
                  "line-join": "round",
                  "line-cap": "round",
                },
                "paint": {
                  "line-color": "red",
                  "line-width": 4,
                }
              }]
              }}/>
    </DeckGL>

Спасибо

Answer 1

Уловка в том стиле, который используется. Стиль - это объект JSON, спецификацию которого вы можете прочитать здесь. Вы можете создавать собственные стили с помощью таких инструментов, как Maputnik, визуальный редактор, который создает файлы, соответствующие стилям, для использования в картах MapboxGL. Создав подходящий стиль, вы можете использовать его в React Map GL.

Вот как будет выглядеть базовый компонент, измененный по сравнению с примером в репозитории Github:

<ReactMapGL
        mapStyle="https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.json"
        {...this.state.viewport}
        onViewportChange={viewport => this.setState({ viewport })}
      />

Обратите внимание, что это всего лишь абстрактный пример. Загрузка плитки из OSM здесь слишком медленная, чтобы ее можно было использовать в продакшене. Но он должен показать, как создавать карты, не полагаясь на сервисы Mapbox.