heatmapPaint
生成 mapbox heatmap 图层 paint，把要素属性线性映射为热力权重并按密度着色。
简介
heatmapPaint 一步生成 heatmap 图层的完整 paint：把指定要素属性按 weightRange 线性映射为 0..1 热力权重，并按 heatmap-density 经颜色断点着色（density 0 处自动透明，避免全图铺底色）。免去手写冗长的 interpolate 表达式。
从 @movk/mapbox/utils/heatmap 导入（非自动导入）。
用法
把带 temperature 属性的点数据渲染为热力图：
<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
No recent changes