热力图

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

示例

TIP

leaflet-heatmap docs 是一个 Leaflet 插件，用于创建热力图。

新标签页预览

代码实现

<template>
  <div id="map" class="w-full h-96"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted, ref } from "vue";
import "leaflet-heatmap/leaflet-heatmap.css"; // 引入热力图样式
import HeatmapOverlay from "leaflet-heatmap"; // 引入热力图插件

const map = ref(null);

onMounted(() => {
  const urlLayer =
    "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.value = L.map("map", {
    center: [39.094899, 117.33083], // 天津
    zoom: 4, // 缩放比列
    zoomControl: true,
    doubleClickZoom: false, // 禁用双击放大
    attributionControl: false, // 不展示版权信息
  });

  const baseLayer = L.tileLayer(urlLayer, {
    maxZoom: 18,
    minZoom: 0,
    attribution: "天地图",
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  }).addTo(map.value);

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

  testData.data.forEach((item) => {
    const marker = L.marker([item.lat, item.lng]).bindPopup(item.count);
    markers.addLayer(marker);
  });

  const cfg = {
    radius: 2,
    maxOpacity: 0.8,
    scaleRadius: true,
    useLocalExtrema: true,
    latField: "lat",
    lngField: "lng",
    valueField: "count",
  };

  const heatmapLayer = new HeatmapOverlay(cfg);
  map.value.addLayer(heatmapLayer);
  heatmapLayer.setData(testData);
});
</script>

参考

• leaflet-side-by-side