<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol加载热力图</title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<div class="span4">
<form>
<label>radius size</label>
<input id="radius" type="range" min="1" max="50" step="1" value="5"/>
<label>blur size</label>
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
</form>
</div>
</div>
</div>
<script>
//底图
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [117.3626, 32.9184],
projection: ol.proj.get('EPSG:4326'),
zoom: 12
})
});
var blur = document.getElementById('blur');
var radius = document.getElementById('radius');
//热力图数据 GeoJSON默认参考坐标系为 EPSG:4326.,根据实际需要进行更改
var heatData = [
{type: "FeatureCollection",
features: [
{type: "Point","coordinates": [117.363228, 32.939667], count: 80},
{type: "Point","coordinates": [117.359623, 32.941612], count: 60},
{type: "Point","coordinates": [117.365631, 32.94651], count: 90},
{type: "Point","coordinates": [117.36443, 32.928789], count: 80},
{type: "Point","coordinates": [117.351212, 32.95328], count: 60},
{type: "Point","coordinates": [117.363228, 32.936281], count: 90},
{type: "Point","coordinates": [117.385029, 32.948383], count: 60},
{type: "Point","coordinates": [117.370781, 32.920144], count: 80},
{type: "Point","coordinates": [117.393097, 32.936137], count: 80},
{type: "Point","coordinates": [117.373528, 32.919856], count: 80},
{type: "Point","coordinates": [117.353443, 32.916541], count: 80},
{type: "Point","coordinates": [117.397217, 32.913803], count: 80},
{type: "Point","coordinates": [117.35207, 32.904148], count: 80}
]}];
//矢量图层 获取geojson数据
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(heatData[0],{
dataProjection : 'EPSG:4326',
featureProjection : 'EPSG:4326'
})
});
// Heatmap热力图
var vector = new ol.layer.Heatmap({
source: vectorSource,
opacity: [0, 0.8],//透明度
blur: 15,//模糊大小(以像素为单位),默认15
radius: 12,//半径大小(以像素为单位,默认8
shadow: 250,//阴影像素大小,默认250
//矢量图层的渲染模式:
//'image':矢量图层呈现为图像。性能出色,但点符号和文本始终随视图一起旋转,像素在缩放动画期间缩放。
//'vector':矢量图层呈现为矢量。即使在动画期间也能获得最准确的渲染,但性能会降低。
renderMode: 'vector'
});
map.addLayer(vector);
</script>
</body>
</html>
基于openlayer4生成热力图
最新推荐文章于 2024-07-20 16:35:33 发布