/**
* 基于小程序Canvas API的核密度估计热力图
* 实现类似test.html中的效果,但适配uni-app小程序环境
*/
/**
* Epanechnikov核函数
* @param {Number} bandwidth 带宽参数
* @returns {Function} 核函数
*/
function kernelEpanechnikov(bandwidth) {
return function (v) {
const r = Math.sqrt(v[0] * v[0] + v[1] * v[1]);
return r <= bandwidth
? (3 / (Math.PI * bandwidth * bandwidth)) *
(1 - (r * r) / (bandwidth * bandwidth))
: 0;
};
}
/**
* 核密度估计器 - 优化版本
* @param {Function} kernel 核函数
* @param {Array} range 范围[xmin, xmax]
* @param {Number} samples 采样点数
* @returns {Function} 密度估计函数
*/
function kernelDensityEstimator(kernel, range, samples) {
return function (data) {
const gridSize = (range[1] - range[0]) / samples;
const densityData = [];
const bandwidth = 0.8; // 从核函数中提取带宽
// 预计算核函数值缓存(减少重复计算)
const kernelCache = new Map();
const maxDistance = Math.ceil(bandwidth * 2 / gridSize); // 最大影响范围
for (let dx = -maxDistance; dx <= maxDistance; dx++) {
for (let dy = -maxDistance; dy <= maxDistance; dy++) {
const distance = Math.sqrt(dx * dx + dy * dy) * gridSize;
if (distance <= bandwidth * 2) {
kernelCache.set(`${dx},${dy}`, kernel([dx * gridSize, dy * gridSize]));
}
}
}
// 使用稀疏网格计算(只计算有数据点影响的区域)
const affectedGridPoints = new Set();
// 第一步:找出所有受影响的网格点
data.forEach(point => {
const centerX = Math.round((point[0] - range[0]) / gridSize);
const centerY = Math.round((point[1] - range[0]) / gridSize);
// 只考虑带宽范围内的网格点
for (let dx = -maxDistance; dx <= maxDistance; dx++) {
for (let dy = -maxDistance; dy <= maxDistance; dy++) {
const gridX = centerX + dx;
const gridY = centerY + dy;
if (gridX >= 0 && gridX < samples && gridY >= 0 && gridY < samples) {
affectedGridPoints.add(`${gridX},${gridY}`);
}
}
}
});
// 第二步:只计算受影响的网格点
affectedGridPoints.forEach(gridKey => {
const [gridX, gridY] = gridKey.split(',').map(Number);
const x = range[0] + gridX * gridSize;
const y = range[0] + gridY * gridSize;
let sum = 0;
let validPoints = 0;
// 只考虑附近的点(空间分割优化)
data.forEach(point => {
const dx = (x - point[0]) / gridSize;
const dy = (y - point[1]) / gridSize;
const cacheKey = `${Math.round(dx)},${Math.round(dy)}`;
if (kernelCache.has(cacheKey)) {
sum += kernelCache.get(cacheKey);
validPoints++;
}
});
if (validPoints > 0) {
densityData.push([x, y, sum / data.length]);
}
});
// 归一化
if (densityData.length > 0) {
const maxDensity = Math.max(...densityData.map((d) => d[2]));
densityData.forEach((d) => {
if (maxDensity > 0) d[2] /= maxDensity;
});
}
return densityData;
};
}
/**
* 生成随机射箭数据点
* @param {Number} centerCount 中心点数量
* @param {Number} pointsPerCenter 每个中心点的箭数
* @returns {Array} 箭矢坐标数组
*/
export function generateArcheryPoints(centerCount = 2, pointsPerCenter = 100) {
const points = [];
const range = 8; // 坐标范围 -4 到 4
const spread = 3; // 分散度
for (let i = 0; i < centerCount; i++) {
const centerX = Math.random() * range - range / 2;
const centerY = Math.random() * range - range / 2;
for (let j = 0; j < pointsPerCenter; j++) {
points.push([
centerX + (Math.random() - 0.5) * spread,
centerY + (Math.random() - 0.5) * spread,
]);
}
}
return points;
}
/**
* 颜色映射函数 - 将密度值映射到颜色
* @param {Number} density 密度值 0-1
* @returns {String} RGBA颜色字符串
*/
function getHeatColor(density) {
// 绿色系热力图:从浅绿到深绿
if (density < 0.1) return "rgba(0, 255, 0, 0)";
const alpha = Math.min(density * 1.2, 1); // 增强透明度
const intensity = density;
if (intensity < 0.5) {
// 低密度:浅绿色
const green = Math.round(200 + 55 * intensity);
const blue = Math.round(50 + 100 * intensity);
return `rgba(${Math.round(50 * intensity)}, ${green}, ${blue}, ${alpha * 0.7})`;
} else {
// 高密度:深绿色
const red = Math.round(50 * (intensity - 0.5) * 2);
const green = Math.round(180 + 75 * (1 - intensity));
const blue = Math.round(30 * (1 - intensity));
return `rgba(${red}, ${green}, ${blue}, ${alpha * 0.7})`;
}
}
// 添加缓存机制
const heatmapCache = new Map();
/**
* 基于小程序Canvas API绘制核密度估计热力图 - 带缓存优化
* @param {String} canvasId 画布ID
* @param {Number} width 画布宽度
* @param {Number} height 画布高度
* @param {Array} points 箭矢坐标数组 [[x, y], ...]
* @param {Object} options 可选参数
* @returns {Promise} 绘制完成的Promise
*/
export function drawKDEHeatmap(canvasId, width, height, points, options = {}) {
return new Promise((resolve, reject) => {
try {
const {
bandwidth = 0.8,
gridSize = 100,
range = [-4, 4],
showPoints = true,
pointColor = "rgba(255, 255, 255, 0.9)",
} = options;
// 创建绘图上下文
const ctx = uni.createCanvasContext(canvasId);
// 清空画布
ctx.clearRect(0, 0, width, height);
// 如果没有数据,直接绘制
if (!points || points.length === 0) {
ctx.draw(false, () => resolve());
return;
}
// 生成缓存key(基于参数和数据点的哈希)
const cacheKey = `${bandwidth}-${gridSize}-${range.join(',')}-${points.length}-${JSON.stringify(points.slice(0, 10))}`;
// 检查缓存
if (heatmapCache.has(cacheKey)) {
console.log('使用缓存的热力图数据');
const cachedDensityData = heatmapCache.get(cacheKey);
// 直接使用缓存数据绘制
const cellWidth = width / gridSize;
const cellHeight = height / gridSize;
const xRange = range[1] - range[0];
const yRange = range[1] - range[0];
cachedDensityData.forEach((point) => {
const [x, y, density] = point;
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * width;
const canvasY = normalizedY * height;
const color = getHeatColor(density);
ctx.setFillStyle(color);
ctx.beginPath();
ctx.arc(canvasX, canvasY, Math.min(cellWidth, cellHeight) * 0.6, 0, 2 * Math.PI);
ctx.fill();
});
// 绘制原始数据点
if (showPoints) {
ctx.setFillStyle(pointColor);
points.forEach((point) => {
const [x, y] = point;
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * width;
const canvasY = normalizedY * height;
ctx.beginPath();
ctx.arc(canvasX, canvasY, 2.5, 0, 2 * Math.PI);
ctx.fill();
});
}
ctx.draw(false, () => {
console.log("KDE热力图绘制完成(缓存)");
resolve();
});
return;
}
// 计算核密度估计
const kernel = kernelEpanechnikov(bandwidth);
const kde = kernelDensityEstimator(kernel, range, gridSize);
const densityData = kde(points);
// 缓存结果(限制缓存大小)
if (heatmapCache.size > 10) {
const firstKey = heatmapCache.keys().next().value;
heatmapCache.delete(firstKey);
}
heatmapCache.set(cacheKey, densityData);
// 计算网格大小
const cellWidth = width / gridSize;
const cellHeight = height / gridSize;
const xRange = range[1] - range[0];
const yRange = range[1] - range[0];
// 绘制热力图网格 - 批量绘制优化
const colorGroups = new Map();
// 按颜色分组,减少setFillStyle调用
densityData.forEach((point) => {
const [x, y, density] = point;
const color = getHeatColor(density);
if (!colorGroups.has(color)) {
colorGroups.set(color, []);
}
colorGroups.get(color).push(point);
});
// 批量绘制相同颜色的点
colorGroups.forEach((points, color) => {
ctx.setFillStyle(color);
points.forEach((point) => {
const [x, y, density] = point;
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * width;
const canvasY = normalizedY * height;
ctx.beginPath();
ctx.arc(canvasX, canvasY, Math.min(cellWidth, cellHeight) * 0.6, 0, 2 * Math.PI);
ctx.fill();
});
});
// 绘制原始数据点 - 批量绘制优化
if (showPoints) {
ctx.setFillStyle(pointColor);
ctx.beginPath(); // 开始批量路径
points.forEach((point) => {
const [x, y] = point;
const normalizedX = (x - range[0]) / xRange;
const normalizedY = (y - range[0]) / yRange;
const canvasX = normalizedX * width;
const canvasY = normalizedY * height;
ctx.arc(canvasX, canvasY, 2.5, 0, 2 * Math.PI);
});
ctx.fill(); // 一次性填充所有圆点
}
// 执行绘制
ctx.draw(false, () => {
console.log("KDE热力图绘制完成");
resolve();
});
} catch (error) {
console.error("KDE热力图绘制失败:", error);
reject(error);
}
});
}
/**
* 生成热力图图片(类似原有的generateHeatmapImage函数)
* 但使用核密度估计算法
*/
export function generateKDEHeatmapImage(
canvasId,
width,
height,
points,
options = {}
) {
return new Promise((resolve, reject) => {
drawKDEHeatmap(canvasId, width, height, points, options)
.then(() => {
// 生成图片
uni.canvasToTempFilePath({
canvasId: canvasId,
width: width,
height: height,
destWidth: width * 3, // 提高输出分辨率,让图像更细腻
destHeight: height * 3,
success: (res) => {
console.log("KDE热力图图片生成成功:", res.tempFilePath);
resolve(res.tempFilePath);
},
fail: (error) => {
console.error("KDE热力图图片生成失败:", error);
reject(error);
},
});
})
.catch(reject);
});
}
/**
* 清除热力图缓存
* 在数据或参数需要强制更新时调用
*/
export function clearHeatmapCache() {
heatmapCache.clear();
console.log('热力图缓存已清除');
}
export const generateHeatMapData = (width, height, amount = 100) => {
const data = [];
const centerX = 0.5; // 中心点X坐标
const centerY = 0.5; // 中心点Y坐标
for (let i = 0; i < amount; i++) {
let x, y;
// 30%的数据集中在中心区域(高斯分布)
if (Math.random() < 0.3) {
// 使用正态分布生成中心区域的数据
const angle = Math.random() * 2 * Math.PI;
const radius = Math.sqrt(-2 * Math.log(Math.random())) * 0.15; // 标准差0.15
x = centerX + radius * Math.cos(angle);
y = centerY + radius * Math.sin(angle);
} else {
x = Math.random() * 0.8 + 0.1; // 0.1-0.9范围
y = Math.random() * 0.8 + 0.1;
}
// 确保坐标在0-1范围内
x = Math.max(0.05, Math.min(0.95, x));
y = Math.max(0.05, Math.min(0.95, y));
data.push({
x: parseFloat(x.toFixed(3)),
y: parseFloat(y.toFixed(3)),
ring: Math.floor(Math.random() * 5) + 6, // 6-10环
});
}
return data;
};