有可能吗?
This告诉我它是,但是不知道为什么要定义和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"
}
答案 0 :(得分:1)
诀窍在于使用的样式。样式是一个JSON对象,您可以通过其规范来详细了解here。您可以使用Maputnik之类的工具生成自定义样式,Github repo是一种可视化编辑器,可生成与样式兼容的文件以供在MapboxGL地图中使用。生成适当的样式后,可以在React Map GL中使用它。
这是基本组件的外观,与{{3}}中的示例类似:
<ReactMapGL
mapStyle="https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.json"
{...this.state.viewport}
onViewportChange={viewport => this.setState({ viewport })}
/>
请注意,这只是一个抽象示例。 OSM的图块加载速度太慢,无法用于生产。但是它应该说明如何在不依赖Mapbox服务端的情况下制作地图。