---
title: "MapboxTemperature"
description: "把温度采样点按属性渲染为热力层，支持权重范围、半径与配色断点。"
seo_title: "MapboxTemperature Component"
seo_description: "Render temperature sample points as a heatmap layer with weight range, radius and color stops."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/environment/temperature"
---
# MapboxTemperature

> 把温度采样点按属性渲染为热力层，支持权重范围、半径与配色断点。

## 简介

`MapboxTemperature` 把 GeoJSON 点按温度属性渲染为 mapbox 原生 heatmap：`weightProperty` 取权重字段、`weightRange` 线性映射到热力权重，`radius`/`intensity`/`opacity` 与 `colorStops` 控制呈现。

## 用法

各城市温度采样点的热力分布，调整 `radius` 观察扩散：

```vue [TemperatureExample.vue]
<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.40, 39.90] } },
    { 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

```ts
/**
 * Props for the MapboxTemperature component
 */
interface MapboxTemperatureProps {
  /**
   * 点要素数据（GeoJSON 或其 URL）
   */
  data: string | GeoJSON.GeoJSON<GeoJSON.Geometry, GeoJSON.GeoJsonProperties> | undefined;
  /**
   * 图层 id；省略时自动生成
   */
  layerId?: string | undefined;
  /**
   * 权重取值的要素属性
   * @default "\"temperature\""
   */
  weightProperty?: string | undefined;
  /**
   * 温度取值范围 [min, max]，线性映射到热力权重
   */
  weightRange?: [number, number] | undefined;
  /**
   * 密度-颜色断点；缺省为蓝→红五档
   */
  colorStops?: [number, string][] | undefined;
  /**
   * 热力半径（像素）
   * @default "30"
   */
  radius?: number | undefined;
  /**
   * 热力强度
   * @default "1"
   */
  intensity?: number | undefined;
  /**
   * 不透明度
   * @default "1"
   */
  opacity?: number | undefined;
  /**
   * 超过该缩放级别隐藏热力（通常切到点图）；省略不限制
   */
  maxzoom?: number | undefined;
  /**
   * 插入到该图层之前
   */
  beforeId?: string | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/environment/Temperature.vue](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/components/environment/Temperature.vue).


## Sitemap

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