Mapbox React

中文

English

中文

English

Appearance

热力图图层（HeatmapLayer） ​

热力图图层 本组件仅适用与展示与密度强相关的数据，如企业分布，油罐分布等；其他数据如温度、aqi污染值等不适合用此图层展示，不支持鼠标事件

示例 ​

示例源码
tsx
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 ​

名称描述类型默认值
id图层idstring-
radius每个热力点的"影响半径"，以px为单位,值越高，外观越平滑。 若传入数组，则半径将与zoom级别关联 例如:[1,2,14,50] 表示zoom为1/14时，radius为2/50number / number[]30
intensity强度，强度越高，热力点对展现效果的影响越大 若设置为数组，则强度值将于zoom级别关联 例如：[1,3,10,5],表示zoom为1/10时，对应的强度值为3/5number / number[]1
color颜色值，默认设置与热力点密度相关Array<string | number>[0,'rgba(0, 0, 255, 0)',0.1,'royalblue',0.3,'cyan',0.5,'lime',0.7,'yellow',1,'red']
data矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形VectorLayerData-
geoJsonDataSourcegeojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效string / GeoJSONSource-
opacity透明度number1
maxzoom最大缩放级别number22
minzoom最小缩放级别number0
pickable图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件booleantrue
show是否显示booleantrue
sourceId图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效string-
sourceLayerName源数据中图层名称 设置sourceId时，此属性生效string-
weight用于定义热力点对热力图贡献的权重,值为10时表示对一个热力点重绘10次 若设置为数组，则表示基于目标属性值的线性变化 例如["mag",0,0,6,1]表示对每个热力点的mag属性取值，其值为0时权重为0，值为6或大于6时权重为1number / Array<string | number>1

EVENTS ​

名称描述参数
onCreated地图初始化完成事件-
onClick图层单击事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseMove鼠标移动事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseLeave鼠标移出元素事件MapMouseEvent

METHODS ​

名称描述定义
exportToGeoJson将本图层数据导出为geojson格式数据文本 若图层数据源来自source组件或为url，则输出null（）=> object | null