@wayz/react-gl

安装

npm install --save @wayz/react-gl

or

yarn add @wayz/react-gl

升级

npm update @wayz/react-gl

or

yarn upgrade @wayz/react-gl

API参考

地图组件

• MapGL
• AMapGL
• BMapGL

图层组件

• ArcLayer
• GeoHashLayer
• PulseArcLayer
• AnimateArcLayer
• LabeledPolygonLayer
• LabeledGeoJsonLayer
• GeoJsonLayer
• PolygonLayer
• IconLayer
• IconClusterLayer
• IconLayerInViewport
• ScatterplotLayer
• PathLayer
• TextLayer
• HeatmapLayer
• TripsLayer

Context组件

• useMapGLContext
• MapGLContext

工具函数

• domToIconMapping (根据数据和自定义html生成函数, 生成iconAtlas和 iconMapping)

使用

引入组件到你的应用中

使用 mapbox 地图底图

  import { MapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
  // MapGL, AMapGL 支持DeckGL配置 https://deck.gl/docs/api-reference/core/deck
  const data = [
    {
      "type": "Feature",
      "properties": {
        "type": 0,
        "ratio": 0.0369,
        "lineWidthRatio": 1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            116.405285,
            39.904989
          ],
          [
            115.482331,
            38.867657
          ]
        ]
      }
    }
    // .......
  ]
  const example = () => (
    <MapGL
    // mapbox token mapbox官网申请
     MAP_ACCESS_TOKEN=''
     mapStyle= 'light',
     initialViewState= {
        longitude: 116.405285,
        latitude: 39.904989,
        zoom: 3,
        bearing: 0,
        pitch: 0,
        altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
    }
     // 监听viewState变化
    onViewStateChange= {viewState => {}}
    // 控制台输出, layers便于调试
    debug={true}
  >
    // 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
     <ArcLayer
        id='ArcLayer'
        data={data}
        visible={true}
        getHeight={1}
        getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
        getSourcePosition={(d) => d.geometry.coordinates[0]}
        getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
        getTargetPosition={(d) => d.geometry.coordinates[1]}
        // 扩展参数
        zIndex={3}
        // events
        onClick={(info)=> {}}
        onHover={(info) => {}}
        onDragStart={(info) => {}}
        onDrag={(info) => {}}
        onDragEnd={(info) => {}}
      />
    </MapGL>
  )

在 Typescript 中使用

type D = {
  type: string
  properties: {
    type: numer
    ratio: number
    lineWidthRatio: number
  }
  geometry: {
    type: LineString
    coordinates: any
  }
}

// 不传默认, 默认解析为数据类型
<ArcLayer<D>
  id="ArcLayer"
  data={data}
  visible={true}
  getHeight={1}
  getSourceColor={(d: D) => [Math.sqrt(d.ratio * 10000), 140, 0]}
  getSourcePosition={(d) => d.geometry.coordinates[0]}
  getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
  getTargetPosition={(d) => d.geometry.coordinates[1]}
  // 扩展参数
  zIndex={3}
  // events
  onClick={(info) => {}}
  onHover={(info) => {}}
  onDragStart={(info) => {}}
  onDrag={(info) => {}}
  onDragEnd={(info) => {}}
/>

使用高德地图底图

  import { AMapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
  // MapGL, AMapGL 支持DeckGL配置 https://deck.gl/docs/api-ref } from '@wayz/react-gl'
  const data = [
    {
      "type": "Feature",
      "properties": {
        "type": 0,
        "ratio": 0.0369,
        "lineWidthRatio": 1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            116.405285,
            39.904989
          ],
          [
            115.482331,
            38.867657
          ]
        ]
      }
    }
    // .......
  ]
  const example = () => (
    <AMapGL
    // 高德key
     MAP_ACCESS_TOKEN=''
     mapStyle= 'light',
     initialViewState= {
        longitude: 116.405285,
        latitude: 39.904989,
        zoom: 3,
        bearing: 0,
        pitch: 0,
        altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
    }
     // 监听viewState变化
    onViewStateChange= {viewState => {}}
     // 控制台输出, layers便于调试
    debug={true}
    // 支持高德地图配置 https://lbs.amap.com/api/javascript-api/reference/map
    mapOptions={{}}

  >
     // 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
     <ArcLayer
        id='ArcLayer'
        data={data}
        visible={true}
        getHeight={1}
        getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
        getSourcePosition={(d) => d.geometry.coordinates[0]}
        getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
        getTargetPosition={(d) => d.geometry.coordinates[1]}
        // 扩展参数
        zIndex={3}
        // events
        onClick={(info)=> {}}
        onHover={(info) => {}}
        onDragStart={(info) => {}}
        onDrag={(info) => {}}
        onDragEnd={(info) => {}}
      />
    </AMapGL>
  )

使用百度地图底图

  import { BMapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
  // MapGL, BMapGL 支持DeckGL配置 https://deck.gl/docs/api-ref } from '@wayz/react-gl'
  const data = [
    {
      "type": "Feature",
      "properties": {
        "type": 0,
        "ratio": 0.0369,
        "lineWidthRatio": 1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            116.405285,
            39.904989
          ],
          [
            115.482331,
            38.867657
          ]
        ]
      }
    }
    // .......
  ]
  const example = () => (
    <BMapGL
    // 高德key
     MAP_ACCESS_TOKEN=''
     mapStyle= 'light',
     initialViewState= {
        longitude: 116.405285,
        latitude: 39.904989,
        zoom: 3,
        bearing: 0,
        pitch: 0,
        altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
    }
     // 监听viewState变化
    onViewStateChange= {viewState => {}}
     // 控制台输出, layers便于调试
    debug={true}
    // 支持高德地图配置 https://lbs.amap.com/api/javascript-api/reference/map
    mapOptions={{}}

  >
     // 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
     <ArcLayer
        id='ArcLayer'
        data={data}
        visible={true}
        getHeight={1}
        getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
        getSourcePosition={(d) => d.geometry.coordinates[0]}
        getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
        getTargetPosition={(d) => d.geometry.coordinates[1]}
        // 扩展参数
        zIndex={3}
        // events
        onClick={(info)=> {}}
        onHover={(info) => {}}
        onDragStart={(info) => {}}
        onDrag={(info) => {}}
        onDragEnd={(info) => {}}
      />
    </BMapGL>
  )