前言
之前寫過一篇openlayers4版本的地圖熱力圖文章，但是由於是封裝一層 js代碼寫的，很多初學者看起來比較有點吃力，所以本篇文章重新寫一篇地圖熱力圖文章，直接基於最新版本openlayers6寫的，純粹html + js + css形式，沒有任何封裝。
內容概覽
1.基於openlayers6實現地圖熱力圖效果
2.源代碼demo下載
效果圖如下：
大概實現思路如下：讀取熱力圖模擬數據源json，構造openlayers熱力圖數據源features，然后創建熱力圖圖層（核心類Heatmap），設置Heatmap的初始化一些參數值，比如weight權重值，radius，gradient，blur等等，參數詳細說明自行看openlayers官網文檔apiHeatmap；創建好熱力圖圖層之后，radius值我這里不是固定寫死，是通過監聽地圖縮放事件動態設置radius不同大小的，個人純粹覺的為了讓熱力圖渲染更看好一點，別無他意。
具體實現過程
- html 樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using OpenLayers with Webpack</title> <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> <style> html, body { margin: 0; height: 100%; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <div id="heatmapFeatureLayer" style="padding:5px;background:#ffffff;width:70px;position:absolute;right:10px;top:10px;border-radius:5px;"> <input type="checkbox" checked="checked" name="heatmapFeatureLayer" id="heatmap1" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/> <label style="font-weight: normal;vertical-align: middle;margin: auto;">熱力圖</label> </div> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="./dz.js"></script> <script src="./bundle.js"></script> </body> </html> 部分核心代碼，完整的見源碼demo下載 1.創建熱力圖 /** * 初始化加載-熱力圖 */ function initHeatMapLayer(data){ isLoad = true; var num = data.features.length; if (num > 0) { var features = new Array(num); for (var i = 0; i < num; i++) { var geo = data.features[i].geometry; var coordinate = [geo.x, geo.y]; features[i] = new Feature({ geometry: new Point(coordinate), weight: data.features[i].attributes[field_dz] }); } loadHeatLayer(features); } } function loadHeatLayer(features){ layer = createHeatMap({ features: features, radius: self.radius, gradient: self.gradient1 });//創建熱力圖層 map.addLayer(layer); map.getView().on('change:resolution', handleHeatMap); //縮放至范圍 map.getView().fit(layer.getSource().getExtent(), map.getSize()); } /** * 創建熱力圖層 * @method createHeatmap * @param features 渲染熱力圖的要素集 * @return Heatmap 返回熱力圖層 */ function createHeatMap(options){ var vector = new HeatmapLayer({ source: new VectorSource({//熱力圖數據來源 features: options.features }), id: 'heat', extent: options.extent, weight: weightFunction,//設置權重,值在0-1之間 gradient: options.gradient, blur: 15,//默認15 radius: options.radius || 8//默認8 }); /* *設置權重 */ function weightFunction(feature) { var weight = feature.get('weight'); weight = parseFloat(weight); //weight = parseFloat(weight) / 10; return weight; } return vector; }
2.根據地圖縮放級別動態設置熱力圖的渲染半徑
/** * 監聽地圖縮放事件 * 根據地圖縮放級別動態設置熱力圖的渲染半徑 */ function handleHeatMap(){ if (layer) { layer.setVisible(true); var radius = getRadiusByMapZoom(); //console.log('熱力圖半徑',radius); layer.setRadius(radius); } } function getRadiusByMapZoom(){ var radius = 2; //console.log('map.getView().getZoom()',map.getView().getZoom()); switch (Math.floor(map.getView().getZoom())) { case 9: radius = 2; break; case 10: radius = 3; break; case 11: radius = 4; break; case 12: radius = 5; break; case 13: radius = 6; break; case 14: radius = 7; break; case 15: radius = 8; break; case 16: radius = 9; break; default: if (map.getView().getZoom() > 16) { radius = 9; } else { radius = 2; } } return radius; } /** * 創建熱力圖層 * @method createHeatmap * @param features 渲染熱力圖的要素集 * @return Heatmap 返回熱力圖層 */ function createHeatMap(options){ var vector = new HeatmapLayer({ source: new VectorSource({//熱力圖數據來源 features: options.features }), id: 'heat', extent: options.extent, weight: weightFunction,//設置權重,值在0-1之間 gradient: options.gradient, blur: 15,//默認15 radius: options.radius || 8//默認8 }); /* *設置權重 */ function weightFunction(feature) { var weight = feature.get('weight'); weight = parseFloat(weight); //weight = parseFloat(weight) / 10; return weight; } return vector; }
3.設置熱力圖圖層可見性