Skip to main content

介紹

調用 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']。

範例

// 熱力圖資料
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 },
];

// 新增 HeatmapLayer
const 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) 格式。

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 },

];