❝
注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示数据的密度或值的大小。本节主要介绍热力图。
1. 创建热力图
通过ol.layer.Heatmap创建热力图图层，可以设置热力图半径和模糊半径等。
// 创建热力图图层
const heatmapLayer = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: "./earthquake_2012.kml",
format: new ol.format.KML({
extractStyles: false
}),
wrapX: false
}),
radius: parseInt(radiusInput.value) || 8, // 热点半径（单位像素）
blur: parseInt(sizeInput.value) || 15 // 模糊半径（单位像素）
})
map.addLayer(heatmapLayer)
2. 监听半径事件
监听半径和模糊半径值改变事件，并将其设置为更新后的值。
// 监听input值改变事件
radiusInput.addEventListener("input", () => {
heatmapLayer.setRadius(parseInt(radiusInput.value))
})
sizeInput.addEventListener("input", () => {
heatmapLayer.setBlur(parseInt(sizeInput.value))
})
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热力图</title>
<meta charset="utf-8" />
<script src="../libs/js/ol-5.3.3.js"></script>
<script src="../libs/js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../libs/css//ol.css">
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
}
#top-content {
position: absolute;
width: 100%;
height: 50px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
}
.heatmap-set {
position: absolute;
line-height: 50px;
width: 30%;
left: 50%;
transform: translateX(-50%);
text-align: center;
background: #00000063;
border-radius: 5px;
font-weight: bold;
}
input[type='text'] {
padding: 0 10px;
height: 25px;
border: none;
border-radius: 2.5px;
}
input[type='text']:focus-visible {
outline: 2px solid #8BC34A;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
<div id="top-content">
<div class="heatmap-set">
<label for="">半径：</label><input type="text" class="radius-input">
<label for="">模糊尺寸：</label><input type="range" step="1" class="size-input" min="1" max="100">
</div>
</div>
</body>
</html>
<script>
//地图投影坐标系
const projection = ol.proj.get('EPSG:3857');
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
const TDTImgLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgCvaLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
// center: [11421771, 4288300],
// center: [102.6914059817791, 25.10595662891865],
center: [104.0635986160487, 30.660919181071225],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
projection: "EPSG:4326"
}),
layers: [TDTImgLayer, TDTImgCvaLayer],
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
// 加载鼠标控件
// new ol.control.MousePosition()
])
})
map.on('click', evt => {
console.log(evt.coordinate)
})
const radiusInput = document.querySelector(".radius-input")
const sizeInput = document.querySelector(".size-input")
// 创建热力图图层
const heatmapLayer = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: "./earthquake_2012.kml",
format: new ol.format.KML({
extractStyles: false
}),
wrapX: false
}),
radius: parseInt(radiusInput.value) || 8, // 热点半径（单位像素）
blur: parseInt(sizeInput.value) || 15 // 模糊半径（单位像素）
})
map.addLayer(heatmapLayer)
// 监听input值改变事件
radiusInput.addEventListener("input", () => {
heatmapLayer.setRadius(parseInt(radiusInput.value))
})
sizeInput.addEventListener("input", () => {
heatmapLayer.setBlur(parseInt(sizeInput.value))
})
</script>
