HeatmapLayer

Heatmap Layer: This component is only suitable for displaying data strongly correlated with density, such as business distribution or oil tank distribution. Other data, such as temperature or AQI pollution values, are not suitable for display with this layer. Mouse events are not supported.

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(2)

  const [heatmap, setHeatmap] = useState({
    airpotDataSource: [] as VectorLayerData,
    color: [
      0,
      'rgba(33,102,172,0)',
      0.2,
      'rgb(103,169,207)',
      0.4,
      'rgb(209,229,240)',
      0.6,
      'rgb(253,219,199)',
      0.8,
      'rgb(239,138,98)',
      1,
      'rgb(178,24,43)',
    ],
    radius: [0, 5, 1, 10, 14, 80],
  })

  const loadCircleData = () => {
    setHeatmap((c) => ({ ...c, airpotDataSource: [] }))
    fetch(
      'https://mapbox-web.github.io/mapbox-react/geojson/ne_10m_airports.geojson'
    )
      .then((res) => res.json())
      .then((data) => {
        const airData = data.features.map(
          (feature: {
            geometry: { coordinates: string | any[] }
            properties: any
          }) => {
            return {
              coordinates: feature.geometry.coordinates.slice(),
              properties: feature.properties,
            }
          }
        )
        setHeatmap((c) => ({ ...c, airpotDataSource: [...airData] }))
      })
  }

  useEffect(() => {
    loadCircleData()
  }, [])

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />
        <MbHeatmapLayer
          data={heatmap.airpotDataSource}
          color={heatmap.color}
          radius={heatmap.radius}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	The ID of the layer	string	-
radius	The "influence radius" of each heatmap point, in pixels. Higher values result in a smoother appearance. If an array is provided, the radius will be associated with the zoom level. For example: [1, 2, 14, 50] means that when the zoom level is 1/14, the radius is 2/50	number / number[]	30
intensity	The intensity of the heatmap. Higher intensity values increase the influence of heatmap points on the visual effect. If an array is provided, the intensity values will be associated with the zoom level. For example: [1, 3, 10, 5] means that when the zoom level is 1/10, the corresponding intensity value is 3/5	number / number[]	1
color	The color values. The default setting is related to the heatmap point density	Array<string | number>	[0,'rgba(0, 0, 255, 0)',0.1,'royalblue',0.3,'cyan',0.5,'lime',0.7,'yellow',1,'red']
data	The data for the vector layer. Each object in the array must contain the required coordinates property and the optional properties property. Each object represents a point/line/polygon	VectorLayerData	-
geoJsonDataSource	GeoJSON data source. Can be set to a GeoJSON data link or a GeoJSON data object. Specification Link. If this property is set, the data property is ignored	string / GeoJSONSource	-
opacity	Opacity	number	1
maxzoom	Maximum zoom level	number	22
minzoom	Minimum zoom level	number	0
pickable	Whether the layer responds to pick events. If false, the component will not emit mouse-related events	boolean	true
show	Whether to show the layer	boolean	true
sourceId	ID of the layer's source. If this ID is set, both the geoJsonDataSource and data properties are ignored	string	-
sourceLayerName	Layer name in the source data. This property is effective when sourceId is set	string	-
weight	Defines the weight of each heatmap point's contribution to the heatmap. A value of 10 means that a heatmap point is redrawn 10 times. If an array is provided, it indicates a linear interpolation based on the target property value. For example, ["mag", 0, 0, 6, 1] means that the mag property of each heatmap point is used; when its value is 0, the weight is 0; when its value is 6 or greater than 6, the weight is 1	number / Array<string | number>	1

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-
onClick	Layer click event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseMove	Mouse move event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseLeave	Mouse leave element event	MapMouseEvent

METHODS

Name	Description	Definition
exportToGeoJson	Translate the layer's data to GeoJSON formatted text. If the layer's data source comes from a source component or a URL, output null.	（）=> object | null