webGL 热力图
使用 leaflet 、leaflet-webgl-heatmap、vue 加载热力图。
示例
安装依赖
shell
pnpm install leaflet-webgl-heatmap
代码实现
vue
<script setup>
import { ref, defineAsyncComponent } from 'vue';
const InitMap = defineAsyncComponent(() =>
import('../../components/InitMapTianditu.vue')
);
import { useWebGLHeatMap } from './useWebGLHeatMap';
const mapObj = ref();
const { initWebGLHeatmap } = useWebGLHeatMap(mapObj);
const mapLoad = (map) => {
mapObj.value = map;
mapObj.value.setZoom(14);
initWebGLHeatmap();
};
</script>
<template>
<init-map @map-load="mapLoad"></init-map>
</template>
<style scoped></style>
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:
'© <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>
js
// todo 项目使用请放开注释
// import 'leaflet-webgl-heatmap';
// import 'leaflet-webgl-heatmap/src/webgl-heatmap/webgl-heatmap';
import { ref } from 'vue';
export const useWebGLHeatMap = (mapObj) => {
const heatmapLayer = ref();
const clearHeatmapLayer = () => {
if (heatmapLayer.value) {
mapObj.value.removeLayer(heatmapLayer.value);
heatmapLayer.value = null;
}
};
const initWebGLHeatmap = () => {
clearHeatmapLayer();
const heatmap = new L.webGLHeatmap({
size: 1000,
units: 'm',
alphaRange: 1 // 热力图透明度
});
const points = [
[32.020274, 118.803319, 2],
[32.020274, 118.803319, 1],
[32.015762, 118.800572],
[32.015762, 118.800572],
[32.015762, 118.800572],
[32.013869, 118.803834],
[32.013869, 118.803834],
[32.013869, 118.803834]
];
// 设置数据
heatmap.setData(points);
// 将图层加载到地图
mapObj.value.addLayer(heatmap);
};
return {
initWebGLHeatmap
};
};
配置参考
js
const opts = {
size: 1000,
units: 'm', // size 单位 m、km
opacity: 1, // 透明度 默认1
gradientTexture: "", // 图片网址或图片
alphaRange: 1 // 热力图透明度 0-1, 默认1
}
const heatmap = new L.webGLHeatmap(opts);
// 3 表示数据强度
const points = [32.020274, 118.803319, 3]
// 强制更改所有元素的强度
heatmap.multiply(2)