Openlayers：实现简单的热力图

一、什么是热力图？

热力图是一种通过颜色分布来直观描述地理现象的空间分布与变化趋势的地图表现手法，能够呈现一些原本不易理解或表达的数据，比如密度、频度、温度等。

二、Opnelayers中实现热力图

Openlayers中主要通过 Heatmap图层实现热力图。在创建热力图的过程中主要有以下的几个属性比较重要，热力图的效果主要由它们决定：

Name	Type	Description
gradient	Array. (defaults to ['#00f', '#0ff', '#0f0', '#ff0', '#f00'])	热力图的颜色渐变，指定为一个由 CSS 颜色字符串组成的数组。
radius	NumberExpression(defaults to 8)	半径大小，单位为像素。请注意，对于线串（LineStrings）来说，线条的宽度将是半径的两倍。
blur	NumberExpression(defaults to 15)	模糊尺寸，单位为像素。该尺寸会与上述的半径参数相加，从而确定最终模糊效果的尺寸。
weight	WeightExpression(defaults to 'weight')	用于确定权重的要素属性。这也支持返回数值的表达式，或者支持使用一个从要素中获取权重值的函数。权重值的范围应在 0 到 1 之间（超出该范围的值将被限制在这个区间内）。
source	VectorSourceType	Point source.

下面是我写的一个简易的热力图示例，以示参考：

<template>
  <activity-panel title="热力图">
    <el-form class="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="Blur" label-position="left">
        <el-slider
          v-model="blur"
          :min="0"
          :max="100"
          :step="1"
          @change="changeBlur"></el-slider>
      </el-form-item>

      <el-form-item label="Radius" label-position="left">
        <el-slider
          v-model="radius"
          :min="0"
          :max="100"
          :step="1"
          @change="changeRadius"></el-slider>
      </el-form-item>
    </el-form>
  </activity-panel>
  <base-map :center="center" :zoom="zoom" @loadend="onLoadEnd" />
</template>

<script setup>
  import { ref, onMounted, nextTick } from "vue";

  import { Vector as VectorLayer, Heatmap } from "ol/layer";
  import { Vector as VectorSource, Cluster } from "ol/source";
  import { GeoJSON } from "ol/format";

  const center = [108.89766828762245, 33.42875613964681];
  const zoom = 5;

  function onLoadEnd() {
    addHeatMapLayer();
  }

  let heatMapLayer;
  const blur = ref(15);
  const radius = ref(8);

  function addHeatMapLayer() {
    const weatherStationSource = new VectorSource({
      format: new GeoJSON(),
      url: "src/data/气象站点/stations-wgs.geojson",
    });

    heatMapLayer = new Heatmap({
      source: weatherStationSource,
      blur: blur.value,
      radius: radius.value,
    });

    window.map.addLayer(heatMapLayer);
  }

  function changeBlur(value) {
    heatMapLayer.setBlur(value);
  }

  function changeRadius(value) {
    heatMapLayer.setRadius(value);
  }
</script>

<style lang="less" scoped></style>

参考资料

1. 热力图
2. OpenLayers v10.5.0 API - Module: ol/layer/Heatmap