openlayer熱力圖製作，本文結合最新的openlayer6.2.1版本，講述熱力圖的生成過程。

首先看一下熱力圖的效果，這裡我自己生成的一些樣例數據。其中數據主要包含熱力點的經緯度，和權重。熱力圖也是根據這三個數據生成的。下面給大家先看一下效果。

熱力圖效果

數據是geojson格式的，下面是我的一個樣例數據。

熱力圖數據

具體實現代碼為：

1 導入相關openlayer類

<code>import {Map, Vector, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import 'ol/ol.css'
import VectorSource from 'ol/source/Vector.js'
import { transform } from 'ol/proj'
import GeoJSON from 'ol/format/GeoJSON'
import Heatmap from "ol/layer/Heatmap";/<code>

2 解析要生成熱力圖的數據

<code>let vector = new Heatmap({
  // 矢量數據源
  source: new VectorSource({
    features: (new GeoJSON()).readFeatures(heatData1[0], {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    }),
  }),
  blur: 15, // 模糊尺寸
  radius: 20 // 熱點半徑
})/<code>

在這裡可以設置座標系統、熱力點的模糊尺寸、熱力點半徑。

3 創建地圖，並引入熱力圖圖層

<code>let map = new Map({
  target: 'map',
  layers: [
    vector
  ],
  view: new View({
    center: transform( [121.407,41.146], 'EPSG:4326', 'EPSG:3857'),
    zoom: 10 

  })
});/<code>

至此，運行便可看到相應的熱力圖。

熱力圖效果

好了，今天就給大家分享到這裡。後續我也會製作熱力圖相關的在線工具，只要上傳相應的數據，即可一鍵生成你想要的熱力圖。

想要代碼的可關注私信我，送完整代碼。

閱讀更多 beant 的文章

關鍵字: GeoJSON EPSG 一鍵