vue+leaflet示例:热力图(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

本篇主要参考leaflet官网热力图插件：
https://leafletjs.com/plugins.html#heatmaps

除此之外，还参照以下博客：
https://www.jianshu.com/p/8cc863c4c085
https://www.cnblogs.com/mengjiaxing/p/7766924.html

• 核心源码

<template>
  <div id="map" ref="mapDiv"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:热力图</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";

// const mapDiv = ref(null);
let map = null;
//数据
const testData = {
  max: 108,
  data: [
    {
      lat: 39.62117439,
      lng: 121.9936396,
      value: 98,
    },
    {
      lat: 39.61809405,
      lng: 121.9918268,
      value: 70,
    },
    {
      lat: 39.62066229,
      lng: 121.9944071,
      value: 88,
    },
    {
      lat: 39.62037488,
      lng: 121.9908595,
      value: 77,
    },
    {
      lat: 39.61839083,
      lng: 121.9893449,
      value: 98,
    },
    {
      lat: 39.61808874,
      lng: 121.9888359,
      value: 89,
    },
    {
      lat: 39.61929969,
      lng: 121.9927034,
      value: 76,
    },

    {
      lat: 39.6193,
      lng: 121.9926137,
      value: 45,
    },
    {
      lat: 39.62334245,
      lng: 121.9935193,
      value: 23,
    },
    {
      lat: 39.623184,
      lng: 121.9931208,
      value: 44,
    },
    {
      lat: 39.62208411,
      lng: 121.99343,
      value: 34,
    },
    {
      lat: 39.62305201,
      lng: 121.9937288,
      value: 77,
    },
    {
      lat: 39.62353145,
      lng: 121.9937485,
      value: 99,
    },
    {
      lat: 39.62009813,
      lng: 121.9929025,
      value: 66,
    },
  ],
};
//配置
const cfg = {
  radius: 0.0009,
  maxOpacity: 0.4,
  scaleRadius: true,
  useLocalExtrema: true,
  latField: "lat",
  lngField: "lng",
  valueField: "value",
};
onMounted(() => {
  // 待加载的 JS 文件数组
  const files = [
    "./lib/heatmap/heatmap.min.js",
    "./lib/heatmap/leaflet-heatmap.js",
  ];
  loadScripts(files, function () {
    console.log("All scripts loaded");
    initMap();
  });
});
const loadScripts = (files, callback) => {
  if (files.length === 0) {
    callback();
    return;
  }
  const file = files.shift();
  const script = document.createElement("script");
  script.onload = function () {
    loadScripts(files, callback);
  };
  script.src = file;
  document.head.appendChild(script);
};
const initMap = () => {
  const heatmapLayer = new HeatmapOverlay(cfg);
  //图层
  const baseLayer = L.tileLayer(
    "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
    {
      attribution: "...",
      maxZoom: 21,
    }
  );
  map = new L.Map("map", {
    center: new L.LatLng(39.62353145, 121.9937485),
    zoom: 15,
    layers: [baseLayer, heatmapLayer],
  });
  heatmapLayer.setData(testData);
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

下载源码：GIS之家的学习交流圈