MapboxTemperature
把温度采样点按属性渲染为热力层，支持权重范围、半径与配色断点。
简介
MapboxTemperature 把 GeoJSON 点按温度属性渲染为 mapbox 原生 heatmap：weightProperty 取权重字段、weightRange 线性映射到热力权重，radius/intensity/opacity 与 colorStops 控制呈现。
用法
各城市温度采样点的热力分布，调整 radius 观察扩散：
<script setup lang="ts">
import type { FeatureCollection } from 'geojson'
withDefaults(defineProps<{ radius?: number }>(), {
radius: 40
})
// 各城市温度采样点（temperature 属性）
const data: FeatureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { temperature: 34 },
geometry: { type: 'Point', coordinates: [113.26, 23.13] }
},
{
type: 'Feature',
properties: { temperature: 30 },
geometry: { type: 'Point', coordinates: [121.47, 31.23] }
},
{
type: 'Feature',
properties: { temperature: 27 },
geometry: { type: 'Point', coordinates: [116.4, 39.9] }
},
{
type: 'Feature',
properties: { temperature: 22 },
geometry: { type: 'Point', coordinates: [104.07, 30.67] }
},
{
type: 'Feature',
properties: { temperature: 12 },
geometry: { type: 'Point', coordinates: [87.62, 43.79] }
},
{
type: 'Feature',
properties: { temperature: 5 },
geometry: { type: 'Point', coordinates: [126.63, 45.76] }
},
{
type: 'Feature',
properties: { temperature: 18 },
geometry: { type: 'Point', coordinates: [91.13, 29.65] }
}
]
}
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{ style: 'mapbox://styles/mapbox/light-v11', center: [105, 35], zoom: 3.4 }"
>
<MapboxTemperature :data="data" :weight-range="[0, 40]" :radius="radius" />
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
data | string | GeoJSON.Point | GeoJSON.MultiPoint | GeoJSON.LineString | GeoJSON.MultiLineString | GeoJSON.Polygon | GeoJSON.MultiPolygon | GeoJSON.GeometryCollection<GeoJSON.Geometry> | GeoJSON.Feature<GeoJSON.Geometry, { [name: string]: any; }> | GeoJSON.FeatureCollection<GeoJSON.Geometry, { [name: string]: any; }>点要素数据（GeoJSON 或其 URL） | |
layerId | string图层 id；省略时自动生成 | |
weightProperty | 'temperature' | string权重取值的要素属性 |
weightRange | `[0, 40]` | [number, number]温度取值范围 min, max，线性映射到热力权重 |
colorStops | [number, string][]密度-颜色断点；缺省为蓝→红五档 | |
radius | 30 | number热力半径（像素） |
intensity | 1 | number热力强度 |
opacity | 1 | number不透明度 |
maxzoom | number超过该缩放级别隐藏热力（通常切到点图）；省略不限制 | |
beforeId | string插入到该图层之前 |
Changelog
No recent changes