openlayers6熱力圖(附源碼下載)

時間 2020-05-16

標籤 openlayers6 openlayers 熱力源碼下載简体版

原文原文鏈接

前言

以前寫過一篇openlayers4版本的地圖熱力圖文章，可是因爲是封裝一層 js代碼寫的，不少初學者看起來比較有點吃力，因此本篇文章從新寫一篇地圖熱力圖文章，直接基於最新版本openlayers6寫的，純粹html + js + css形式，沒有任何封裝。css

內容概覽

1.基於openlayers6實現地圖熱力圖效果
2.源代碼demo下載html

效果圖以下：
jquery

大概實現思路以下：讀取熱力圖模擬數據源json，構造openlayers熱力圖數據源features，而後建立熱力圖圖層（核心類Heatmap），設置Heatmap的初始化一些參數值，好比weight權重值，radius，gradient，blur等等，參數詳細說明自行看openlayers官網文檔apiHeatmap；建立好熱力圖圖層以後，radius值我這裏不是固定寫死，是經過監聽地圖縮放事件動態設置radius不一樣大小的，我的純粹覺的爲了讓熱力圖渲染更看好一點，別無他意。json

具體實現過程

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.根據地圖縮放級別動態設置熱力圖的渲染半徑api

/**
* 監聽地圖縮放事件
* 根據地圖縮放級別動態設置熱力圖的渲染半徑
*/
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;
}