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

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

0 голосов
/ 07 декабря 2018

Возможно ли это?

Это говорит мне, что это так, но не знаю, почему оно определяет и ключ 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>

Спасибо

Редактировать: из правильного ответа, и чтобы держать вещи в SO, это json живет на S3: 

{
  "version": 8,
  "name": "OSM",
  "metadata": {

  },
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://free.tilehosting.com/data/v3.json?key={key}"
    },
    "osm": {
      "type": "raster",
      "tiles": [
        "http://tile.openstreetmap.org/{z}/{x}/{y}.png"
      ],
      "minzoom": 0,
      "maxzoom": 14
    },
    "91y5159eg": {
      "type": "vector",
      "url": "http://localhost:3000/tilejson.json"
    }
  },
  "sprite": "https://openmaptiles.github.io/klokantech-basic-gl-style/sprite",
  "glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=undefined",
  "layers": [
    {
      "id": "osm",
      "type": "raster",
      "source": "osm"
    }
  ],
  "id": "klokantech-basic"
}

1 Ответ

0 голосов
/ 09 мая 2019

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

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

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

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

...