当前位置：首页 > news >正文

OpenLayers 可视化之热力图

news 来源：原创 2025/6/13 2:02:24

注：当前使用的是 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>