MapLibre GL JS 研发 热力图 如何初始化与自定义展示

MapLibre GL JS 是一个用于创建交互式地图应用的JavaScript库，其中包含热力图功能。热力图是一种常用的数据可视化技术，它表示地理区域上数据点的密度，通常用于显示人口、交通流量等信息。

以下是使用 MapLibre GL JS 初始化热力图并自定义展示的基本步骤：

1. **安装依赖**:
首先，你需要在项目中引入 Mapbox GL JS 和相关的插件，例如 `maplibregl` 和 `heatmap-gl`。你可以通过npm安装：

   npm install mapbox-gl heatmap-gl

2. **初始化地图**:
创建一个新的 Mapbox GL JS 地图实例，并设置视口和样式：

   const map = new mapboxgl.Map({
     container: 'map', // 指定容器元素ID
     style: 'mapbox://styles/mapbox/streets-v11', // 或者你自己的样式URL
     center: [longitude, latitude], // 中心位置
     zoom: 10 // 初始缩放级别
   });

3. **加载数据**:
获取你的热力数据，可以是一个二维数组，每个元素代表一个地理坐标及其对应的密度值。然后创建一个 HeatmapLayer 来处理数据：

   const heatmapData = ...; // 根据你的数据源填充
   const heatmap = new mbgl.HeatmapLayer({
     radius: 25, // 热度半径
     blur: 10, // 模糊程度
     data: heatmapData,
     // 可能需要的其他属性如 maxzoom, minzoom, paint等
   });

4. **添加到地图**:
将 HeatmapLayer 添加到地图上：

   map.addLayer(heatmap);

5. **自定义展示**:
- **颜色范围**: 可以调整颜色渐变，比如 `heatmap.paint.gradient.stops` 属性设置不同颜色对应的不同密度范围。
- **动画效果**: 使用 `heatmap.update` 方法实时更新热力图，可以配合时间线或其他交互事件实现动态变化。
- **交互性**: 提供点击、悬停等事件监听，响应用户的操作。

// 示例：当点击热力图时高亮显示
heatmap.on('click', (e) => {
  console.log('Clicked at:', e.features[0].geometry.coordinates);
});