OpenLayers 可视化之热力图

❝

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示数据的密度或值的大小。本节主要介绍热力图。

1. 创建热力图

通过ol.layer.Heatmap创建热力图图层，可以设置热力图半径和模糊半径等。

php 复制代码

// 创建热力图图层
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. 监听半径事件

监听半径和模糊半径值改变事件，并将其设置为更新后的值。

javascript 复制代码

// 监听input值改变事件
radiusInput.addEventListener("input", () => {
    heatmapLayer.setRadius(parseInt(radiusInput.value))
})
sizeInput.addEventListener("input", () => {
    heatmapLayer.setBlur(parseInt(sizeInput.value))
})

3. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

xml 复制代码

<!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>