介紹

調用 new mapPlus.HeatmapLayer(options)，開始使用地圖熱力圖功能。

調用 new mapPlus.HeatmapLayer(options)，開始使用地圖熱力圖功能。

開始使用

  • options (object): 必填，熱力圖的參數。

    參數描述
    options.map object必填，帶入 new mapPlus() 返回的物件。
    options.data object[]必填，要帶入的熱力圖資料。
    options.opacity number選填，透明度，預設為 0.6。
    options.radius number選填，半徑，預設為 30。
    options.maxIntensity number選填，最大強度的數值，預設為 1。
    options.gradient string[]選填，漸層色，預設為 ['#0000FF', '#00FF00', '#FFFF00', '#FF0000']。

範例

js
// 熱力圖資料const heatmapData = [  { location: [121.441, 25.027], weight: 2 },  { location: [121.443, 25.027], weight: 3 },  { location: [121.445, 25.027], weight: 1 },  { location: [121.447, 25.027], weight: 0.5 },  { location: [121.449, 25.027], weight: 2 },];
// 新增 HeatmapLayerconst heatmap = new mapPlus.HeatmapLayer({  map: map,  data: heatmapData,  opacity: 0.6,  radius: 30,  maxIntensity: 1,  gradient: ['#0000FF', '#00FF00', '#FFFF00', '#FF0000'],});

熱力圖資料

可接收 {location, weight}（座標與權重）資料，或是僅 location 的資料（weight 預設為 1）。

座標資料可接收 [lng, lat]、{lng, lat} 或是 new mapPlus.LngLat(lng, lat) 格式。

javascript
const heatmapData = [
  // [lng, lat]  [ 121.441, 25.025 ],  { location: [ 121.441, 25.027 ], weight: 2 },
  // {lng, lat}  { lng: 121.445, lat: 25.025 },  { location: { lng: 121.445, lat: 25.027 }, weight: 2 },
  // new mapPlus.LngLat(lng, lat)  new mapPlus.LngLat( 121.443, 25.025 ),  { location: new mapPlus.LngLat( 121.443, 25.027 ), weight: 2 },
];