Preview Updated 2026-05-10

HeatMap 地理热力

Canvas KDE 渲染的地理密度热图，可叠加在 CfMapTile 上；不是日历热力（→ CalendarHeatmap）。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

输入点位 { lng, lat, weight? }，组件用径向渐变核 + 颜色 LUT 在 <canvas> 上画出密度热图。每个点的强度叠加，最终走梯度 stops 着色。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfHeatMap } from '@chufix-design/maps-vue';

// ~ 600 random weighted points clustered around 4 Chinese megacities.
const centers = [
  { lng: 116.4, lat: 39.9 }, // Beijing
  { lng: 121.5, lat: 31.2 }, // Shanghai
  { lng: 113.3, lat: 23.1 }, // Guangzhou
  { lng: 104.1, lat: 30.7 }, // Chengdu
];
const data: { lng: number; lat: number; weight?: number }[] = [];
for (const c of centers) {
  for (let i = 0; i < 150; i++) {
    data.push({
      lng: c.lng + (Math.random() - 0.5) * 6,
      lat: c.lat + (Math.random() - 0.5) * 4,
      weight: 0.3 + Math.random() * 0.7,
    });
  }
}
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfHeatMap :data="data" :radius="22" :opacity="0.75" />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfHeatMap } from '@chufix-design/maps-vue';

// ~ 600 random weighted points clustered around 4 Chinese megacities.
const centers = [
  { lng: 116.4, lat: 39.9 }, // Beijing
  { lng: 121.5, lat: 31.2 }, // Shanghai
  { lng: 113.3, lat: 23.1 }, // Guangzhou
  { lng: 104.1, lat: 30.7 }, // Chengdu
];
const data= [];
for (const c of centers) {
  for (let i = 0; i < 150; i++) {
    data.push({
      lng: c.lng + (Math.random() - 0.5) * 6,
      lat: c.lat + (Math.random() - 0.5) * 4,
      weight: 0.3 + Math.random() * 0.7,
    });
  }
}
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfHeatMap :data="data" :radius="22" :opacity="0.75" />
  </CfMapTile>
</template>

import { CfHeatMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfHeatMap } from '@chufix-design/maps-vue';

  // ~ 600 random weighted points clustered around 4 Chinese megacities.
  const centers = [
    { lng: 116.4, lat: 39.9 }, // Beijing
    { lng: 121.5, lat: 31.2 }, // Shanghai
    { lng: 113.3, lat: 23.1 }, // Guangzhou
    { lng: 104.1, lat: 30.7 }, // Chengdu
  ];
  const data: { lng: number; lat: number; weight?: number }[] = [];
  for (const c of centers) {
    for (let i = 0; i < 150; i++) {
      data.push({
        lng: c.lng + (Math.random() - 0.5) * 6,
        lat: c.lat + (Math.random() - 0.5) * 4,
        weight: 0.3 + Math.random() * 0.7,
      });
    }
  }
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={520} >
          <CfHeatMap data={data} radius={22} opacity={0.75} />
        </CfMapTile>
    </>
  );
}

import { CfHeatMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfHeatMap } from '@chufix-design/maps-vue';

  // ~ 600 random weighted points clustered around 4 Chinese megacities.
  const centers = [
    { lng: 116.4, lat: 39.9 }, // Beijing
    { lng: 121.5, lat: 31.2 }, // Shanghai
    { lng: 113.3, lat: 23.1 }, // Guangzhou
    { lng: 104.1, lat: 30.7 }, // Chengdu
  ];
  const data= [];
  for (const c of centers) {
    for (let i = 0; i < 150; i++) {
      data.push({
        lng: c.lng + (Math.random() - 0.5) * 6,
        lat: c.lat + (Math.random() - 0.5) * 4,
        weight: 0.3 + Math.random() * 0.7,
      });
    }
  }
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={520} >
          <CfHeatMap data={data} radius={22} opacity={0.75} />
        </CfMapTile>
    </>
  );
}

与 CalendarHeatmap 的区别

	HeatMap	CalendarHeatmap
输入	地理点位 `{ lng, lat }`	日历日期 `{ date, count }`
渲染	canvas 密度核	SVG 格子方块
用途	地图密度分析	GitHub 风格活跃热力

两者无依赖关系，按场景选择即可。

API

属性	类型	默认	说明
`data`	`HeatPoint[]`	—	`{ lng, lat, weight? }`
`geojson`	`FeatureCollection`	—	可选底图
`extent`	`MapBounds`	自动	独立投影范围
`projection`	`(lng, lat) => {x, y}`	—	显式投影
`width` / `height`	`number`	`480 / 280`	独立使用尺寸
`radius`	`number`	`32`	每个点的核半径 (px)
`maxIntensity`	`number`	自动	强度上限
`gradient`	`Array<{ stop, color }>`	cool→warm	颜色 LUT
`opacity`	`number`	`0.7`	整体透明度