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 的文章

關鍵字: 效果 EPSG new