Angular6+Leaflet1.4.7两种热力图实现及替代地图库咨询

1. 带彩色图标的热力图（Angular 6 + Leaflet 1.4.7） #

核心思路是动态生成SVG图标（无需PNG），复用Highcharts热力图的颜色映射逻辑，再将SVG转为Leaflet可识别的图标格式：

步骤实现 #

• 复用Highcharts颜色计算：
  Highcharts热力图的颜色由colorAxis.stops定义，直接提取这个数组，用Highcharts内置的颜色插值方法计算对应数值的颜色：

  // 假设从Highcharts配置中拿到colorStops，格式为[[0, '#fff'], [0.5, '#ff9900'], [1, '#ff0000']]
  import * as Highcharts from 'highcharts';
  
  function getHeatColor(value: number, minVal: number, maxVal: number): string {
    const normalizedValue = (value - minVal) / (maxVal - minVal);
    let targetColor = '#ffffff';
  
    // 遍历颜色区间，计算插值颜色
    for (let i = 1; i < colorStops.length; i++) {
      const [prevRatio, prevColor] = colorStops[i-1];
      const [currRatio, currColor] = colorStops[i];
      
      if (normalizedValue <= currRatio) {
        const ratio = (normalizedValue - prevRatio) / (currRatio - prevRatio);
        targetColor = Highcharts.color(prevColor).tweenTo(ratio, currColor).get();
        break;
      }
    }
    return targetColor;
  }
  

• 动态生成SVG图标：
  用字符串拼接SVG代码（比如圆形图标），转为Data URL后创建Leaflet Icon：

  function createCustomIcon(color: string): L.Icon {
    const svgTemplate = `<svg width="22" height="22" viewBox="0 0 22 22">
      <circle cx="11" cy="11" r="9" fill="${color}" stroke="#ffffff" stroke-width="2"/>
    </svg>`;
    // 转Base64 Data URL
    const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgTemplate)}`;
    
    return L.icon({
      iconUrl: svgDataUrl,
      iconSize: [22, 22],
      iconAnchor: [11, 11] // 图标锚点对应经纬度位置
    });
  }
  

• 在Angular中添加标记：
  遍历经纬度数据，生成对应颜色的标记添加到地图：

  // 假设data为[{lat: number, lng: number, value: number}, ...]
  const minVal = Math.min(...data.map(item => item.value));
  const maxVal = Math.max(...data.map(item => item.value));
  
  data.forEach(item => {
    const markerColor = getHeatColor(item.value, minVal, maxVal);
    const customIcon = createCustomIcon(markerColor);
    L.marker([item.lat, item.lng], { icon: customIcon }).addTo(this.map);
  });
  

2. 无图标传统热力图（Leaflet） #

推荐使用leaflet.heat插件（Leaflet生态最成熟的热力图实现），支持动态定义颜色范围：

实现步骤 #

• 安装与引入：
  执行npm install leaflet.heat，在Angular组件中引入：

  import 'leaflet.heat';
  

• 动态生成颜色渐变：
  根据数据的数值范围自定义渐变映射，格式为{ [ratio: number]: color }：

  // 处理数据格式：leaflet.heat要求数组格式为[lat, lng, weight]
  const heatData = data.map(item => [item.lat, item.lng, item.value]);
  const minVal = Math.min(...data.map(item => item.value));
  const maxVal = Math.max(...data.map(item => item.value));
  
  // 自定义渐变：按数值区间映射颜色
  const colorGradient = {
    0: '#0066ff', // 最小值对应蓝色
    ((maxVal - minVal) * 0.3 + minVal)/maxVal: '#00ffcc', // 30%区间对应青绿色
    ((maxVal - minVal) * 0.7 + minVal)/maxVal: '#ffff00', // 70%区间对应黄色
    1: '#ff3300' // 最大值对应红色
  };
  

• 创建热力图层：

  L.heatLayer(heatData, {
    radius: 30, // 热力点半径
    blur: 20, // 模糊程度
    gradient: colorGradient,
    max: maxVal, // 数值上限
    maxZoom: 18
  }).addTo(this.map);
  

3. 支持卫星/物理视图的免费替代地图库 #

如果不想用Leaflet，推荐以下几个免费方案：

• Mapbox GL JS：
  免费额度满足小型项目需求，自带卫星、地形、街道底图；热力图可用官方HeatmapLayer，带图标热力图可通过Marker+动态SVG实现，适配性强。
• OpenLayers：
  完全开源免费，支持加载多种第三方底图（比如OpenStreetMap卫星图层、Bing Maps卫星图）；可通过自定义图层实现热力图，灵活性极高。
• Google Maps JavaScript API：
  免费额度内可使用，支持卫星、地形视图；官方提供HeatmapLayer组件，带图标标记可复用动态SVG生成逻辑。

这些库都能独立实现热力图功能，无需依赖Highcharts，若需结合Highcharts，可在地图上叠加悬浮的Highcharts图表组件。

内容的提问来源于stack exchange，提问作者Ruchita Deshmukh