WebGIS客户端地图可视化：如何制作热力图

最新推荐文章于 2025-10-26 09:11:07 发布

原创

最新推荐文章于 2025-10-26 09:11:07 发布 · 2.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #web #gis

本文介绍如何使用OpenLayers加载地震数据的热力图。通过创建地图对象、实例化热力图图层并调整参数来实现。提供了完整的代码示例。

本文示例主要显示了如何在当前地图中加载部分区域地震数据的热力图。示例需要使用【include-openlayers-local.js】开发库，首先创建地图对象，添加 OSM 底图，后实例化ol.layer.Heatmap对象构建热力图图层并添加到地图中。

效果如下图所示：

实现步骤

1、引用开发库：

本示例引用 local 本地【include-openlayers-local.js 】开发库；

2、创建布局：

创建id="mapCon"的 div 作为地图容器，并设置其样式；

3、创建地图对象:

创建地图对象，设置地图必要参数；

  //初始化地图容器
  map = new ol.Map({
    target: 'mapCon', //地图容器div的ID
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: true,
      },
    }),
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [80, 30], //地图初始中心点
      maxZoom: 28, //最大瓦片显示级数
      minZoom: 1, //最小瓦片显示级数
      zoom: 3, //地图初始显示级数
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({ wrapX: false }),
        opacity: 0.7,
      }),
    ],
  })

4、构建热力图图层:

实例化ol.layer.Heatmap对象构建热力图图层，并添加到地图中。

source.addFeatures(features)
//创建热力图层
var Heatmap = new ol.layer.Heatmap({
  source,
  blur,
  radius,
  weight: 'weight', //默认热力图层权值字段（0-1）
})

最低0.47元/天解锁文章