---
title: "heatmapPaint"
description: "生成 mapbox heatmap 图层 paint，把要素属性线性映射为热力权重并按密度着色。"
seo_title: "heatmapPaint"
seo_description: "Build a mapbox heatmap layer paint that maps a feature property to heat weight and colors by density with sensible defaults."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/utils/heatmap"
---
# heatmapPaint

> 生成 mapbox heatmap 图层 paint，把要素属性线性映射为热力权重并按密度着色。

## 简介

`heatmapPaint` 一步生成 heatmap 图层的完整 paint：把指定要素属性按 `weightRange` 线性映射为 0..1 热力权重，并按 `heatmap-density` 经颜色断点着色（density 0 处自动透明，避免全图铺底色）。免去手写冗长的 `interpolate` 表达式。

从 `@movk/mapbox/utils/heatmap` 导入（非自动导入）。

## 用法

把带 `temperature` 属性的点数据渲染为热力图：

```vue [HeatmapPaintExample.vue]
<script setup lang="ts">
import { heatmapPaint } from '@movk/mapbox/utils/heatmap'
import type { FeatureCollection } from 'geojson'

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 200 }, (_, i) => ({
    type: 'Feature',
    properties: { temperature: (i * 37) % 40 },
    geometry: { type: 'Point', coordinates: [116.3 + ((i * 53) % 100) / 500, 39.85 + ((i * 71) % 100) / 600] }
  }))
}

const paint = heatmapPaint({ weightProperty: 'temperature', weightRange: [0, 40], radius: 28 })
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/dark-v11', center: [116.4, 39.93], zoom: 11 }">
      <MapboxLayer layer-id="heat" type="heatmap" :source="{ type: 'geojson', data }" :paint="paint" />
    </MapboxMap>
  </div>
</template>
```

## API

### `heatmapPaint()`

生成 heatmap 图层 paint。

**options.weightProperty** (`string`): 权重取值的要素属性，默认 'temperature'。

**options.weightRange** (`[number, number]`): 权重属性取值范围 \[min, max\]，线性映射到 0..1，默认 \[0, 40\]。

**options.colorStops** (`[number, string][]`): 密度-颜色断点 \[密度比 0..1, 颜色\]\[\]；缺省为蓝→红五档，density 0 处自动透明。

**options.radius** (`number`): 热力半径（像素），默认 30。

**options.intensity** (`number`): 热力强度，默认 1。

**options.opacity** (`number`): 整体不透明度，默认 1。

返回热力图层 paint 对象，可直接绑定到 `<MapboxLayer type="heatmap">` 的 `paint`。

## Changelog

See commit history for [src/runtime/utils/heatmapPaint.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/heatmapPaint.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.