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