2

使用 react-map-gl 我无法将我的自定义源/图层覆盖在预定义的样式模板之上。将样式道具传递给地图组件时，我可以添加模板或自定义源/图层，但不能同时添加两者。这是一个简单的例子：

mapStyle='mapbox://styles/mapbox/streets-v9'
mapStyle={mapStyle}

当我注释掉另一个时，任何一个都可以单独工作。有没有办法用我自己的源/图层轻松扩展 mapbox 样式？以下是完整的组件：

const Map = () => {
  const [viewport, setViewport] = React.useState({
    width: '100%',
    height: '100%',
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
  })

  const mapStyle = {
    version: 8,
    sources: {
      states: {
        type: 'geojson',
        data: 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
      }
    },
    layers: [
      {
        id: 'states-fill',
        type: 'fill',
        source: 'states',
        paint: {
          'fill-color': '#627BC1'
        }
      }
    ]
  }

  return (
    <ReactMapGL
      mapboxApiAccessToken={TOKEN}

      /* Here's the problem */
      mapStyle='mapbox://styles/mapbox/streets-v9'
      // mapStyle={mapStyle}

      {...viewport}
      onViewportChange={v => setViewport(v)}
    />
  )
}
4

0 回答 0