热力图

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

热力图(Heatmap)是一种数据可视化方式,通过颜色的深浅来展示数据的密度分布。OpenLayers 提供了内置的热力图图层支持。

示例

新标签页预览

代码实现

<template>
  <div class="flex flex-col h-96">
    <div
      id="popup"
      class="h-42px leading-42px bg-white text-black text-base font-bold text-center"
    >
      2023年出生人口热力图
    </div>
    <div id="map" class="w-full flex-1"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Heatmap from "ol/layer/Heatmap";
import { fromLonLat } from "ol/proj";

onMounted(() => {
  // 创建地图
  const map = new Map({
    target: "map",
    view: new View({
      center: fromLonLat([117.33083, 39.094899]), // 天津
      zoom: 4,
    }),
  });

  // 添加天地图图层
  const tdtLayer = new TileLayer({
    source: new XYZ({
      url: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd",
    }),
  });
  map.addLayer(tdtLayer);

  // 热力图数据
  const heatmapData = [
    // 全国2023年主要城市出生人口
    { coordinates: [113.2644, 23.1291], weight: 1037000 }, // 广东省
    { coordinates: [113.6249, 34.757], weight: 695000 }, // 河南省
    { coordinates: [106.3315, 26.8154], weight: 411000 }, // 贵州省
    { coordinates: [117.3308, 39.0949], weight: 61000 }, // 天津
    { coordinates: [91.1322, 29.6469], weight: 76000 }, // 西藏
    { coordinates: [126.1924, 43.666], weight: 88000 }, // 吉林
    { coordinates: [95.66, 36.62], weight: 89000 }, // 青海
    { coordinates: [110.1999, 20.044], weight: 96000 }, // 海南
    { coordinates: [121.4737, 31.2304], weight: 98000 }, // 上海
    { coordinates: [87.6, 43.793], weight: 109000 }, // 新疆
    { coordinates: [106.2782, 38.469], weight: 113000 }, // 宁夏
    { coordinates: [111.6704, 40.8183], weight: 123000 }, // 内蒙古
    { coordinates: [116.4074, 39.9042], weight: 123000 }, // 北京
    { coordinates: [123.4315, 41.8057], weight: 175000 }, // 辽宁
    { coordinates: [106.55, 29.563], weight: 178000 }, // 重庆
    { coordinates: [102.4572, 36.0583], weight: 191000 }, // 甘肃
    { coordinates: [112.562, 37.8734], weight: 213000 }, // 山西
    { coordinates: [108.9402, 34.3293], weight: 273000 }, // 陕西
    { coordinates: [115.8221, 29.1042], weight: 295000 }, // 江西
    { coordinates: [114.3055, 30.5928], weight: 326000 }, // 湖北
    { coordinates: [120.1551, 30.2741], weight: 383000 }, // 浙江
    { coordinates: [102.8329, 24.882], weight: 385000 }, // 云南
    { coordinates: [117.2272, 31.82], weight: 395000 }, // 安徽
    { coordinates: [112.9834, 27.6104], weight: 399000 }, // 湖南
    { coordinates: [108.32, 23.1242], weight: 405000 }, // 广西
    { coordinates: [118.7969, 32.0603], weight: 409000 }, // 江苏
    { coordinates: [106.7135, 26.5783], weight: 412000 }, // 贵州
    { coordinates: [115.4839, 38.4161], weight: 418000 }, // 河北
  ];

  // 创建热力图图层
  const heatmapLayer = new Heatmap({
    source: new VectorSource({
      features: heatmapData.map((data) => {
        return new Feature({
          geometry: new Point(fromLonLat(data.coordinates)),
          weight: data.weight,
        });
      }),
    }),
    blur: 15,
    radius: 10,
    weight: function (feature) {
      const weight = feature.get("weight");
      return Math.min(weight / 1037000, 1); // 归一化权重
    },
  });

  map.addLayer(heatmapLayer);
});
</script>

<style scoped>
.h-96 {
  height: 24rem;
}
.h-42px {
  height: 42px;
}
.leading-42px {
  line-height: 42px;
}
</style>