没有使用OSM磁贴的API密钥的react-map-gl [英] react-map-gl without API key using osm tiles

问题描述

有可能吗?

这告诉我它是，但是不知道为什么要定义和API密钥.

This tells me it is, but dont know why it defines and API key.

，但我无法使其与react-map-gl StaticMap类一起使用.我从该类中看到的属性只是mapStyle，它将采用标准的Mapbox矢量图块路径/名称.它带物体吗?我的代码没有给我任何错误，也没有显示我请求的图块.

but I cannot get it to work with react-map-gl StaticMap class. The property I can see from that class is just mapStyle which would take a standard Mapbox vector tiles path/name. Does it take an object? My code does not give me an error or show the tiles I request.

    <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上:

from the correct answer, and to keep things in SO, this is the json living on the 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"
}

推荐答案

该技巧采用了所使用的样式.样式是JSON对象，您可以在此处上阅读其规范. >.您可以使用 Maputnik 之类的工具生成自定义样式，这是一种可视化编辑器，可生成与样式兼容的文件以供在MapboxGL中使用地图.生成适当的样式后，可以在React Map GL中使用它.

The trick is in the style that's used. A style is a JSON object, whose specification you can read more about here. You can generate custom styles using tools such as Maputnik, a visual editor that generates style-compliant files for use in MapboxGL maps. Once you have an appropriate style generated, you can use it in React Map GL.

这是基本组件的外观，与 Github存储库中的示例类似. a>:

Here's what the basic component would look like, as altered from the example in the Github repo:

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

请注意，这只是一个抽象示例. OSM的图块加载速度太慢，无法用于生产.但是它应该说明如何在不依赖Mapbox服务端的情况下制作地图.

Note that this is just an abstract example. The tile loads from OSM here are a bit too slow to be useful in production. But it should illustrate how to make maps without relying on the services side of Mapbox.

这篇关于没有使用OSM磁贴的API密钥的react-map-gl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！