当前位置：首页 > React

react 热力图如何制作

2026-03-31 16:06:07React

使用 react-heatmap.js 库

安装 react-heatmap.js 库：

npm install react-heatmap.js

引入并使用基础热力图组件：

import HeatMap from 'react-heatmap.js';

const data = [
  { x: 1, y: 1, value: 10 },
  { x: 2, y: 2, value: 20 },
  // 更多数据点...
];

function App() {
  return (
    <HeatMap
      data={data}
      width={500}
      height={500}
    />
  );
}

使用 DeckGL 创建高级热力图

安装相关依赖：

react 热力图如何制作

npm install deck.gl @deck.gl/react @deck.gl/aggregation-layers

实现代码示例：

import React from 'react';
import DeckGL from '@deck.gl/react';
import { HeatmapLayer } from '@deck.gl/aggregation-layers';

const data = [
  { position: [longitude1, latitude1], weight: 0.5 },
  // 更多数据点...
];

function App() {
  const layers = [
    new HeatmapLayer({
      id: 'heatmap-layer',
      data,
      getPosition: d => d.position,
      getWeight: d => d.weight,
      radiusPixels: 30,
      intensity: 1
    })
  ];

  return <DeckGL
    initialViewState={{
      longitude: centerLng,
      latitude: centerLat,
      zoom: 12
    }}
    controller={true}
    layers={layers}
  />;
}

自定义 SVG 热力图

手动创建基于 SVG 的热力图组件：

react 热力图如何制作

function CustomHeatmap({ data, width, height }) {
  const maxValue = Math.max(...data.map(d => d.value));

  return (
    <svg width={width} height={height}>
      {data.map((point, i) => (
        <circle
          key={i}
          cx={point.x}
          cy={point.y}
          r={10 + (point.value / maxValue) * 20}
          fill={`rgba(255, 0, 0, ${point.value / maxValue})`}
        />
      ))}
    </svg>
  );
}

使用 react-google-maps 创建地图热力图

安装依赖：

npm install @react-google-maps/api

实现代码：

import { GoogleMap, LoadScript, HeatmapLayer } from '@react-google-maps/api';

const heatmapData = [
  { lat: 40.7128, lng: -74.0060 },
  // 更多坐标点...
];

function MapWithHeatmap() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '400px' }}
        zoom={12}
        center={{ lat: 40.7128, lng: -74.0060 }}
      >
        <HeatmapLayer
          data={heatmapData.map(location => (
            new google.maps.LatLng(location.lat, location.lng)
          ))}
        />
      </GoogleMap>
    </LoadScript>
  );
}

使用 D3.js 集成方案

结合 React 和 D3.js 创建热力图：

import * as d3 from 'd3';
import { useRef, useEffect } from 'react';

function D3Heatmap({ data, width, height }) {
  const ref = useRef();

  useEffect(() => {
    const svg = d3.select(ref.current);

    const colorScale = d3.scaleSequential(d3.interpolateOranges)
      .domain([0, d3.max(data, d => d.value)]);

    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', d => d.x * 30)
      .attr('y', d => d.y * 30)
      .attr('width', 25)
      .attr('height', 25)
      .attr('fill', d => colorScale(d.value));
  }, [data]);

  return <svg ref={ref} width={width} height={height} />;
}

标签: react