ColumnLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.314177, 39.832819])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(60)
  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 [radius, setRadius] = 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']} />
        <MbColumnLayer
          data={data}
          position={position}
          elevation={elevation}
          fillColor={fillColor}
          radius={radius}
          pickable={true}
          autoHighlight={true}
          onMouseMove={mousemoveHandler}
          onMouseLeave={mouseleaveHandler}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
radius	Radius of the shape in meters.	number	1000
position	Function to retrieve the position of each data point. This function should accept a data item as an argument and return an array representing the [longitude, latitude] or [longitude, latitude, altitude/elevation].	function	-
autoHighlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data.	string / IndexAny / AnyArr / Promise<any>	''
elevation	Elevation/Height of the shape. This can be a fixed number or a function that returns the elevation based on the data.	number / AnyNumberFunc	1000
extruded	Whether the shapes are rendered in 3D (extruded).	boolean	true
fillColor	Fill color of the shape. This can be a string representing a color name (e.g., 'red', 'blue'), a function that returns a color based on the data, or an array of RGBA values (e.g., [255, 0, 0, 255] for red).	string / AnyFunc	'black'
filled	Whether the shapes are filled.	boolean	true
highlightColor	The color to blend with the original color of the highlighted object. This creates the highlight effect. The value can be a color string or an RGBA array.	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
lineColor	Line color of the shape's outline. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
lineWidth	Width of the shape's outline. This can be a fixed number or a function that returns the line width based on the data.	string / AnyNumberFunc	1
lineWidthMaxPixels	The maximum line width in pixels. This limits the maximum width of the rendered lines.	number	Number.MAX_SAFE_INTEGER
lineWidthMinPixels	The minimum line width in pixels. This ensures that lines are not rendered with a width smaller than this value.	number	0
lineWidthScale	A scaling factor applied to the line width. This allows you to easily adjust the width of all lines in the layer.	number	1
lineWidthUnits	Units for the line width: 'pixels' or 'meters'. Specifies whether the width values are interpreted as pixels on screen or meters in world space. This is especially relevant for geographic visualizations where the width should represent a physical distance.	string ('pixels', 'meters')	'meters'
opacity	The opacity of the shape (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
stroked	Whether the shapes have an outline (stroke).	boolean	false

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

Name	Description	Definition