使用react-mapbox-gl和Mapbox渲染矢量瓦片。

Question

使用react-mapbox-gl和Mapbox渲染矢量瓦片。

reactjsmapboxmapbox-gl-jsmapbox-glvector-tiles

9

我有一个geoJSON文件，使用这个npm包将其转换为矢量切片。我使用const tileIndex = geojsonvt(geoJSON)。该geoJSON文件的格式如下，并且可以无错误地进行转换。

const geoJSON = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' }
  },
  features: [
    {
      properties: [Object],
      geometry: [Object],
      type: 'Feature',
      _id: '5ed7b221a61a4b2970433932'
    },
    ... 1840 more items
 ]
}

我获得的转换后结果（geoJSON 矢量瓦片）如下 -

const tiles = {
    options: {},
    tiles: {
      '0': {
        features: [Array],
        numPoints: 540529,
        numSimplified: 3,
        numFeatures: 1940,
        source: null,
        x: 0,
        y: 0,
        z: 0,
        transformed: false,
        minX: 0.5162953202777778,
        minY: 0.316725863688461,
        maxX: 0.5338655772222223,
        maxY: 0.34955196703359503
      },
      '1': { ... } 
    },
    tileCoords: [
        { z: 0, x: 0, y: 0 },   { z: 1, x: 1, y: 1 },
        { z: 1, x: 1, y: 0 },   { z: 2, x: 3, y: 1 },
        { z: 2, x: 3, y: 0 },   { z: 2, x: 2, y: 1 },
        { z: 3, x: 5, y: 3 },   { z: 3, x: 5, y: 2 },
        { z: 3, x: 4, y: 3 },   { z: 3, x: 4, y: 2 },
        { z: 4, x: 9, y: 5 },   { z: 4, x: 9, y: 4 },
        { z: 4, x: 8, y: 5 },   { z: 5, x: 17, y: 11 },
        { z: 5, x: 17, y: 10 }, { z: 5, x: 16, y: 11 },
        { z: 5, x: 16, y: 10 }, { z: 4, x: 8, y: 4 },
        { z: 2, x: 2, y: 0 },   { z: 1, x: 0, y: 1 },
        { z: 1, x: 0, y: 0 }
      ]
}

在将一个拥有5000个图层的巨大GeoJSON文件转换成矢量切片后，我将这些数据发送到客户端，在客户端使用React.js和Mapbox*渲染地图。我使用以下代码来渲染地图，但是我一直没有找出问题所在。报错信息如下：error: layers.jsx-layer-0: layer "jsx-layer-0"必须指定一个"source-layer"。

<Source type="vector" tiles={data.tiles} >
  <Layer  {...dataLayer}/>
</Source>

我已经仔细阅读了 Mapbox 的文档，但仍然找不到我的问题所在。希望得到帮助，非常感谢。

- relu

分享你的图层JSON和一点React JS代码。这里的意思是在你的图层中需要定义源图层。例如，你的JSON图层可能像这样： "layers": [ { "id": "rivers", "source": "my-source", "source-layer": "waterway", "type": "line", "paint": { "line-color": "#FFC0CB" } } ] - Muni Kumar Gundu

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chrismarx · Answer 1

react-mapbox-gl 在很多地方只是 mapbox-gl 的一个包装器，如果你查看文档：

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#tiled-sources

你会发现，“tiles”属性仅适用于URL源，而“url”属性可用于加载具有瓦片的文件：

“url”：“http://api.example.com/tilejson.json”

- nrako · Answer 2

文档指出，对于矢量图层，source-layer是必需字段。

尽管如此，在声明式 API 中，它的工作方式显然不透明。根据示例，您可以尝试这样做以查看其是否有效 -

...
const url = 'mapbox://mapbox.mapbox-terrain-v2' 
const source = 'my-source';

<Source id={{source}} name={{source}} type="vector" url={url} tiles={data.tiles} >
    <Layer source={{source}} {...dataLayer}/>
</Source>
...

- adel · Answer 3

使用源代码渲染图层，因此您需要在图层中引用源ID + 您需要添加source-layer属性，如下所示：

  <Source id='contours' type='vector' url='mapbox://mapbox.mapbox-terrain-v2' tileJsonSource={data.tiles}/>
  <Layer
    id='contours'
    type='line'
    source='contours'
    source-layer='contour'
    paint={{
      'line-color': '#877b59',
      'line-width': 1
    }}
  />
</MapGL>;