数据源（Source）

支持设置GeoJson、TileJson数据

示例

示例源码

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import {
  MbMap,
  MbPolygonLayer,
  MbSource,
  MbTiandituLayer,
} from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([120.30782359643746, 31.49292271319491])
  const [zoom, setZoom] = useState(11)

  const [showLayer, setShowLayer] = useState(false)
  const geoJsonSource = {
    type: 'geojson',
    data: `https://mapbox-web.github.io/mapbox-react/geojson/wuxi.geojson`,
  }

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />

        {showLayer && (
          <MbPolygonLayer sourceId="sourceExample" opacity={0.5} color="blue" />
        )}

        <MbSource
          id="sourceExample"
          geoJsonSource={geoJsonSource}
          onSourceAdded={() => setShowLayer(true)}
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

名称	描述	类型	默认值
id	数据源Id	string	-
geoJsonSource	参考：GeoJson	IndexAny	-
tileJsonSource	参考：TileJson	IndexAny	-

EVENTS

名称	描述	参数
onSourceAdded	数据源添加完成事件	source

METHODS

名称	描述	定义