Leaflet-vue 熱力圖 （設定熱力圖顏色）

真正的大英雄發表於2024-07-05
Vue

使用的熱力圖是 heatmap.js

因為是Leaflet，所以還要引入一個對應的外掛 leaflet-heatmap.js，這個外掛就在heatmap目錄下的plugins裡面。

程式碼如下：

import "heatmap.js";
import HeatmapOverlay from "@/utils/leaflet-heatmap.js";

let cfg = {
  radius: 0.5, //半徑
  maxOpacity: 0.8, //最大透明度
  scaleRadius: true,//設定熱力點是否平滑過渡
  useLocalExtrema: false,//使用區域性極值
  latField: "lat",//緯度
  lngField: "lng",//經度
  valueField: "count" ,
  gradient: { 0.25: "rgb(0,255,128)", 0.55: "rgb(0,255,255)", 0.85: "rgb(0,128,255)", 1.0: "blue"} //此處為設定顏色
};
this.heatmapLayer = new HeatmapOverlay(cfg);
this.heatmapLayer.addTo(this.heatMapLayerGroup);

//處理資料，此處程式碼部分省略
this.mapData.data.push({
  lat: data.at, 
  lng: data.ng, 
  count: data.value
})

this.heatmapLayer.setData(this.mapData);

坑1：官方文件中並沒有提示如何修改顏色，我胡亂試出來才發現可以。

坑2：此熱力圖無法與地圖旋轉外掛一起使用，熱力圖不會跟隨地圖旋轉。

相關文章