leaflet.heat 热力图

使用 leaflet 、leaflet.heat、vue 加载热力图。

示例

安装依赖

leaflet.heat 仓库

pnpm install leaflet.heat

# ts 项目需要安装类型文件
pnpm install @types/leaflet.heat

代码实现

leafletHeat.vue

<script setup>
import { ref, defineAsyncComponent } from 'vue';
// todo 项目使用请放开注释
// import 'leaflet.heat';

const InitMap = defineAsyncComponent(() =>
  import('../../components/InitMapTianditu.vue')
);

// 数组 第三个参数表示强度，对象 max 表示强度
const points = [
  [32.020274, 118.803319, 0.3],
  [32.037394, 118.803834, 0.8],
  [32.037394, 118.814834, 1],
  {
    lat: 32.037394,
    lng: 118.894834,
    max: 100
  }
];

const config = {
  minOpacity: 0.8,
  maxZoom: 20,
  max: 1,
  radius: 40,
  blur: 15,
  gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' }
};

const mapObj = ref();

const mapLoad = (map) => {
  mapObj.value = map;
  L.heatLayer(points, config).addTo(map);
};
</script>

<template>
  <init-map @map-load="mapLoad"></init-map>
</template>

<style scoped></style>

InitMapTianditu.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
// todo 项目使用请放开 leaflet 引入
// import L from 'leaflet';

const props = defineProps({
  center: {
    type: Array,
    default: [32.0237855, 118.8075675]
  }
})

const emit = defineEmits(['mapLoad']);

const mapRef = ref();

const initMap = () => {
  const map = L.map(mapRef.value, {
    center: props.center,
    zoom: 11,
    minZoom: 6,
    maxZoom: 20
  });

  const mapType = 'vec';
  L.tileLayer(
    'https://t{s}.tianditu.gov.cn/' +
      mapType +
      '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      mapType +
      '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
    {
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      attribution:
        '&copy; <a href="http://lbs.tianditu.gov.cn/home.html">天地图 GS(2022)3124号 - 甲测资字1100471</a>'
    }
  ).addTo(map);

  const mapLabelType = 'cva';
  L.tileLayer(
    'https://t{s}.tianditu.gov.cn/' +
      mapLabelType +
      '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
      mapLabelType +
      '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
    {
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }
  ).addTo(map);

  // 地图初始化完成发送事件
  emit('mapLoad', map);

  return map;
};

const mapObj = ref();

// 在 onMounted 中初始化地图
onMounted(() => {
  mapObj.value = initMap();
});

const removeMap = () => {
  if (mapObj.value) {
    mapObj.value.remove();
  }
};

// 在组件卸载时删除地图
onUnmounted(() => {
  removeMap();
});
</script>

<template>
  <div ref="mapRef" class="map"></div>
</template>

<style scoped>
.map {
  height: 40vh;
  z-index: 0;
}
</style>

options

options	描述	类型
minOpacity	最小不透明度	Number
maxZoom	点达到最大强度的缩放级别（强度随着缩放而缩放），maxZoom 默认情况下等于地图 zoom	Number
max	点默认强度，默认为1	Number
radius	热图每个“点”的半径， 默认 25	Number
blur	模糊，默认 15	Number
gradient	渐变颜色渐变配置：{ 0.4: 'blue', 0.65: 'lime', 1: 'red' }	Object

Methods

methods	描述	参数
setOptions	设置新的热力图数据并重新绘制。	options
addLatLng	向热力图添加一个新点并重新绘制它。	latlng{ lat: 1, lng: 1, max: 1 }
setLatLngs	重新设置热力图数据并重新绘制它	latlngs
redraw	重新绘制	-

贡献者

vaebe