【vue@leaflet】熱力圖

原創

2020-05-08 02:02

插件

下載地址
引入

  // 通過npm 安裝 heatmap.js
  npm install --save heatmap.js 
  import "heatmap.js";
  import HeatmapOverlay from "@/assets/Leaflet/leaflet-heatmap.js";

最終實現效果

options 設置說明

{
        //熱力圖的配置項
        radius: 0.5, //設置每一個熱力點的半徑
        maxOpacity: 0.9, //設置最大的不透明度
        // minOpacity: 0.3,     //設置最小的不透明度
        scaleRadius: true, //設置熱力點是否平滑過渡
        blur: 0.95, //係數越高，漸變越平滑，默認是0.85,
        //濾鏡係數將應用於所有熱點數據。
        useLocalExtrema: true, //使用局部極值
        latField: "lat", //維度
        lngField: "lng", //經度
        valueField: "count", //熱力點的值
        gradient: {
          "0.99": "rgba(255,0,0,1)",
          "0.9": "rgba(255,255,0,1)",
          "0.8": "rgba(0,255,0,1)",
          "0.5": "rgba(0,255,255,1)",
          "0": "rgba(0,0,255,1)"
        } 
      };

數據格式

{
    max: 15,
    data: [
        { lng: 104.044449, lat: 31.662711, count: 3 },
        ... 
    ],
};

代碼實現

 let option = this.getConfig();
      this.heatmapLayer = new HeatmapOverlay(option);
      this.heatmapLayer.addTo(map);
      this.heatmapLayer.setData(this.points);

【Leaflet開發】

【Leaflet開發】L.Control 自定義一個Control

【Leaflet開發】Leaflet 類擴展

【Leaflet開發】L.GridLayer 擴展

Leaflet入門系列

leaflet 入門系列 hello world

Leaflet入門系列圖層管理控件

Leaflet入門系列比例尺控件Scale

Leaflet入門系列 Zoom控件

Leaflet入門系列屬性控件

Leaflet入門系列圖標(marker) 樣式和事件處理

LeafLet入門系列圖標(marker)屬性配置