时间戳

首页 > 解决方案 > 使用 Mapbox 使用 react-mapbox-gl 渲染矢量瓦片

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

问题描述

vector.tiles我有一个 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" must specify a "source-layer"

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

我同样浏览了 Mapbox 的文档，但我找不到我做错了什么。任何帮助都会有很大帮助。非常感谢。

标签： reactjsmapboxmapbox-gl-jsmapbox-glvector-tiles

解决方案

文档表明矢量图层的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>
...

推荐阅读