在 WebGIS 里热力图很常见：人流密度、事件热点、设施覆盖、巡查频次…，它把「一堆带权重的点」渲染成连续色带，一眼看出哪里「热」、哪里「冷」。

今天聊聊按完整链路说明：

1. 至于理解热力图。点 + 权重 + 模糊叠加

2. 用 OpenLayers 原生 Heatmap 图层跑通最小示例

3. 介绍 ym-giswidget-2d 已封装好的 Heatmap 组件

4. 数据格式、控制面板参数、多数据源切换与定位

至于先看效果，地图上叠加可调半径、模糊度、色带的热力面。

*热力图效果*

一、思路先讲清楚

热力图不是画一堆圆点，而是：

1. 每个热点是一个 Point带上 weight

2. 图层按半径、模糊度把点「摊开」成高斯状强度场

3. 强度再映射到颜色渐变

从可以简单记成来看。

坐标点 + 权重 → HeatmapLayer → 色带渲染

业务侧通常只关心两件事：

• 数据怎么组织

• 半径、模糊、透明度、色带怎么调

下面先用原生 OL 打通，再看组件封装。

二、引入 OpenLayers。准备地图与热力层

. 安装依赖

// 终端执行
npm i ol

. 页面结构 & 基础代码示例

页面里放一个地图容器，高度自行设置。接下来创建底图 + 热力图层：

import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';import { Heatmap as HeatmapLayer } from 'ol/layer';import { Vector as VectorSource } from 'ol/source';import Feature from 'ol/Feature';怎么说呢，import Point from 'ol/geom/Point';import { fromLonLat } from 'ol/proj';// 创建向量源并加入示例点
const heatSource = new VectorSource;老实说，.forEach(pt => {
heatSource.addFeature(
new Feature({
geometry: new Point)。weight: pt.weight,})
);})，// 热力图层配置
const heatLayer = new HeatmapLayer({
source的观点是，heatSource,blur: 15,radius: 12。opacity: 0.7,gradient:,// 可自定义权重读取方式
从weight来看，feature => {
const w = feature.get?，0;按理说，return Math.min;},})，// 初始化地图
const map = new Map({
说到target，'map',layers:。view: new View({
center这方面，fromLonLat,zoom: 12,}),});

. 常用可调参数说明

• radius: 点半径，越大「摊」得越开。
• blur: 模糊度，越大边界越柔和。
• opacity: 图层不透明度。怎么说呢，
• gradient: 色带数组，从低到高。

*OL 原生热力图效果*

三、痛点剖析 —— 为什么不自己写控制面板？

• P1：手动实现 UI 拖拽、滑块同步属性需要额外的状态管理。 其实，
• P2：多组数据切换后需要自行清理旧要素并重新定位视野。
• P3：不同业务场景对色带、透明度等细节要求各异，若不统一封装会导致代码重复。
• P4：项目中若已有工具条或布局框架，还要兼容这些容器的样式冲突。

A‑step 的方法是使用已经封装好的组件库，它帮你一次性搞定上述所有痛点。

四、ym-giswidget-2d：Heatmap组件已封装

`ym-giswidget-2d` 基于 OpenLayers Heatmap 图层，提供了：

• - 可拖动的「热力图控制」面板；- 点半径 / 模糊度 / 色带 / 不透明度实时调节； - 支持多组 data 切换数据源； - 渲染后自动定位到当前点集范围。

. 安装组件库

//终端执行
npm i ym-giswidget-2d
// 或 pnpm / yarn 同理；话说回来，monorepo 内可用 workspace依赖

. 引入样式

组件库样式不会自动注入需在入口文件中显式引入：

import { createApp } from 'vue';import App from './App.vue';import 'ym-giswidget-2d/css/index.css';// 必须引入的全局样式
createApp.mount;怎么说呢，

若项目已使用 Element Plus。可与其样式一起放在入口：

import 'element-plus/dist/index.css';import 'ym-giswidget-2d/css/index.css';

. 最小用法示例

import { reactive } from 'vue';import { MapView,Heatmap } from 'ym-giswidget-2d';const state = reactive;不过，const heatData =,},];function onInitMap {
state.mapInstance = mapView;// 按需叠加底图，按理说，}

模板示意这方面。

• 要点：

  • 入口已引入 ym-giswidget-2d/css/index.css

  • Heatmap 与 MapView 建议放在同一个 position: relative 容器内，以确保面板定位正确。

  • 打开后会出现可拖动的控制面板；点击「确认」仅收起面板，点击「关闭」会移除热力图层。

*组件控制面板*

五、数据格式说明

data 是数组。每一项是一组热力数据源：

/ * 示例 * /
const heatData =,},];

从字段说明来看，

• title: 数据源标题。说起来，

• points: 热点数组。

• points.x/points.y: 与地图投影一致的坐标。不过，

• points.weight: 权重。数值越大该处越「热」，

定位到当前点集范围。)

半径 （range=5~30 default=12),模糊。不透明 (range=0~1 step=0. 05 default=0. 7),色 带 .

。

---