3D棱柱图层（GridCellLayer）

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.314177, 39.832819])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(45)
  const mapInst = useRef<any>()

  const data = 'https://mapbox-web.github.io/mapbox-react/geojson/beijing_price.json'
  const position = (d: { lnglat: any }) => d.lnglat
  const elevation = (d: { transPrice: number }) => d.transPrice / 30
  const fillColor = (d: { transPrice: number }) =>
    `rgba(${(d.transPrice / 10000) * 15},125,125,0.8)`
  const [cellSize, setCellSize] = useState(150)

  const mousemoveHandler = ({ object }: { object: any }) => {
    console.log(object)
  }
  const mouseleaveHandler = () => {
    console.log('mouseleaveHandler')
  }

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTiandituLayer types={['vec']} />
        <MbGridCellLayer
          data={data}
          position={position}
          elevation={elevation}
          fillColor={fillColor}
          cellSize={cellSize}
          pickable={true}
          autoHighlight={true}
          onMouseMove={mousemoveHandler}
          onMouseLeave={mouseleaveHandler}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
position	位置信息	function	-
autoHighlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
cellSize	半径，单位为米	number	1000
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
elevation	高程	number / AnyNumberFunc	1000
extruded	是否为3D模式	boolean	true
fillColor	填充颜色	string / AnyFunc	black
filled	是否填充	boolean	true
highlightColor	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	高亮元素序号	number	-1
lineColor	线颜色	string / AnyFunc	black
lineWidth	线宽度	string / AnyNumberFunc	1
lineWidthMaxPixels	-	number	Number.MAX_SAFE_INTEGER
lineWidthMinPixels	-	number	0
lineWidthScale	-	number	1
lineWidthUnits	-	string（pixels / meters）	meters
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
show	是否显示	boolean	true
stroked	是否描边	boolean	false

EVENTS

名称	描述	参数
onCreated	初始化完成事件	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

名称	描述	定义