库位推荐是 AI 进入 WMS 时最容易被"演示化"的一个环节：一张花哨的 3D 仓库图，几个发光的库位，然后——就没有然后了。真正上不了生产的原因通常不在算法，而在

。得分只是输入，落地还要过库位尺寸、承重、先进先出、混放规则、锁定状态、通道可达性、温区约束这一连串硬门槛；任何一步被跳过，拣货员就会把一托贵重商品塞进最远的角落，或者让两个互斥 SKU 共享同一货位。

本文要交付的是一条可运行的链路：

离散货位点 → 高斯核密度场 → 归一化得分 → 规则剪枝 → 推荐排序 → 2D 热力图与 3D 货架同步着色 → 人工确认上架

。其中 2D 层负责"看趋势、找热区"，3D 层负责"看结构、做决策"，两者共用同一份得分数据，而不是各算各的。

一、数据模型：坐标系统一，才有可加和的场 

所有热力可视化的第一个坑不是渲染，是

 只在仓库内部有意义，Canvas 像素和 Three.js 世界坐标都读不懂它。所以要先建立一张 

export const ZONE_ORIGIN = { x: -48, z: -30 };   // 仓库西南角在世界坐标中的位置
export const CELL_SIZE   = { x: 2.4, z: 1.8 };   // 每个货位占用的世界空间（米）

export function codeToWorld(code) {
  // 编码约定：A-03-02 → 区/排/列。生产环境建议由后端 /api/location/map 返回映射表
  const [zone, row, col] = code.split('-');
  const r = parseInt(row, 10) - 1;
  const c = parseInt(col, 10) - 1;
  const offset = ZONE_OFFSETS[zone] || { x: 0, z: 0 };
  return {
    x: ZONE_ORIGIN.x + offset.x + c * CELL_SIZE.x + CELL_SIZE.x / 2,
    z: ZONE_ORIGIN.z + offset.z + r * CELL_SIZE.z + CELL_SIZE.z / 2,
  };
}

export function worldToGrid(p, cols, cell) {
  // 世界坐标 → 网格索引，用于把连续场离散到格子
  const gx = Math.floor((p.x - ZONE_ORIGIN.x) / cell.x);
  const gz = Math.floor((p.z - ZONE_ORIGIN.z) / cell.z);
  return { col: Math.max(0, Math.min(cols - 1, gx)), row: Math.max(0, gz) };
}

 是纯函数，不依赖 DOM 也不依赖 Three.js，因此同一份映射可以被 2D Canvas、3D 场景、路径动画、PDA 端共用。坐标系统一之后，"某货位的得分"才是一个可以在任何视图里复用的数据，而不是某个组件内部的局部状态。

二、得分生成：核密度估计把离散点变成连续场 

仓库里没有"每个库位的历史访问次数"这种天然数据。有的是离散事件：拣货任务、最近出库、补货记录。要把它们变成连续的"热度场"，用的是

——每个事件点向外扩散成一个高斯核，所有核叠加成一张场。

算法流程是：分箱 → 双线性权重累加 → 二维高斯卷积 → 阈值切片。这正是 

 在做的事：先通过双线性插值把点累加到网格（比"就近取整"平滑得多），再以指定带宽做高斯模糊得到连续密度面，最后用 marching squares 输出 GeoJSON MultiPolygon。

export function buildDensityField(points, cols, rows, { cellSize = 2, bandwidth = 6 } = {}) {
  const { contourDensity } = await import('d3-contour'); // 动态导入，非 3D 场景不必加载
  const size = [cols * cellSize, rows * cellSize];
  const density = contourDensity()
    .x((d) => d.p.x)
    .y((d) => d.p.z)
    .weight((d) => d.weight)      // 事件权重：出库 1.0，补货 0.6，拣货复核 0.8
    .size(size)
    .cellSize(cellSize)           // 越小越精细，但内存与算力同步上涨
    .bandwidth(bandwidth)         // 带宽决定"热区扩散半径"
    .thresholds(12);

  return density(points); // 返回 GeoJSON MultiPolygon 数组，每个 geometry.value 是一个阈值
}

为什么用 KDE 而不是简单计数？因为库位是离散格子，但

。只数格子会把相邻空位判成"完全没热过"，而 KDE 让热度自然溢出到周边货位，这才是"附近还有空位"的语义。带宽的选择有实际含义：带宽太小，热区碎成一粒粒的孤立点，找不到成片区域；带宽太大，整个仓库都变红，区分度为零。现场调试按货架排距的 1.5 倍取值通常比较合理。

三、推荐核心：先打分，再用硬规则剪枝 

得分生成后，真正的"推荐"发生在规则层。这里必须分清两类约束：

（近出口、高周转率、通道可达）可以写进权重；

（尺寸、承重、混放、温区、锁定）必须做成一票否决的过滤。把它们混在权重里，模型会在"更近一点"和"塞得下"之间做权衡，最终给出物理上不可行的方案。

export function recommend(sku, field, locations, opts = {}) {
  const {
    preferNearExit = 0.35,   // 距离出口的权重
    preferHighTurnover = 0.30,
    preferZoneMatch = 0.20,  // SKU 温区与货位温区匹配
    preferEvenLoad = 0.15,   // 货架承重均衡
  } = opts;

  const candidates = locations
    .filter((loc) => loc.status === 'EMPTY')           // 硬门槛：必须空
    .filter((loc) => loc.maxWeight >= sku.weight)      // 硬门槛：承重
    .filter((loc) => loc.maxDim <= sku.dim)            // 硬门槛：尺寸
    .filter((loc) => loc.zoneType === sku.zoneType)    // 硬门槛：温区/危险品互斥
    .filter((loc) => !loc.locked);                     // 硬门槛：未被盘点/移库锁定

  const maxDist = Math.max(...candidates.map((c) => c.distanceToExit));

  const scored = candidates.map((loc) => {
    const p = codeToWorld(loc.code);
    const f = sampleField(field, p);            // 从连续场采样该点密度值
    const turnScore = 1 - clamp(loc.idleDays / 60, 0, 1);
    const exitScore = 1 - loc.distanceToExit / maxDist;
    const zoneScore = loc.zoneType === sku.zoneType ? 1 : 0;
    const loadScore = 1 - clamp(loc.shelfLoad / loc.shelfCapacity, 0, 1);

    return {
      ...loc,
      score: f * 0.4
        + turnScore * preferHighTurnover
        + exitScore * preferNearExit
        + zoneScore * preferZoneMatch
        + loadScore * preferEvenLoad,
      density: f,
    };
  });

  return scored.sort((a, b) => b.score - a.score).slice(0, 5);
}

四、2D 热力图：预分配离屏 Canvas，绝不逐帧建渐变 

2D 热力图适合总览与找趋势。核心工艺是：把每个货位画成一个

（中心 alpha 1、边缘 0），按得分缩放 

，叠加到离屏灰度缓冲；再用 256 级 LUT 把灰度映射成彩色。

export class Heatmap2D {
  constructor(canvas, { cols, rows, cell, lut } = {}) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d', { willReadFrequently: false });
    this.cols = cols; this.rows = rows; this.cell = cell;
    this.lut = lut || buildLUT();                         // 256 级色彩查找表
    this.kernel = this.buildKernel(26);                   // 预生成一次，常驻内存
    this.off = document.createElement('canvas');          // 离屏灰度缓冲
    this.off.width = cols * cell; this.off.height = rows * cell;
    this.offCtx = this.off.getContext('2d');
  }

  buildKernel(radius) {
    const c = document.createElement('canvas');
    c.width = c.height = radius * 2;
    const g = c.getContext('2d');
    const grad = g.createRadialGradient(radius, radius, 0, radius, radius, radius);
    grad.addColorStop(0, 'rgba(0,0,0,1)');
    grad.addColorStop(1, 'rgba(0,0,0,0)');
    g.fillStyle = grad;
    g.fillRect(0, 0, radius * 2, radius * 2);
    return c;
  }

  draw(scores) {
    const { offCtx, cols, rows, cell } = this;
    offCtx.clearRect(0, 0, cols * cell, rows * cell);
    for (const s of scores) {
      const p = codeToWorld(s.code);
      const gx = (p.x - ZONE_ORIGIN.x) * (1 / cell);
      const gy = (p.z - ZONE_ORIGIN.z) * (1 / cell);
      const a = Math.pow(s.score, 0.8);                    // gamma 校正，拉开中低分区
      offCtx.globalAlpha = a;
      offCtx.drawImage(this.kernel, gx - 13, gy - 13);
    }
    offCtx.globalAlpha = 1;

    const img = offCtx.getImageData(0, 0, cols * cell, rows * cell);
    const data = img.data;
    for (let i = 0; i < data.length; i += 4) {
      const t = data[i + 3];                               // 用 alpha 通道作灰度值
      const [r, g, b, a] = this.lut[t];
      data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = a;
    }
    offCtx.putImageData(img, 0, 0);
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.drawImage(this.off, 0, 0);
  }
}

性能要点（这几条决定了能不能跑满 60fps）：

五、3D 货架着色：顶点色比贴图更适合实时数据 

3D 层不承担"找热区"的任务，它要回答的是

：这个货位在第几层、上下是否已被占用、通道从哪边走。因此用

而非纹理贴图——数据变了只更新一个 

// src/three/AisleView.jsx
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export function createAisleView(container, { cols, rows }) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf2f4f7);
  const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 500);
  camera.position.set(0, 28, 42);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制 DPR，避免 4K 下过采样
  container.appendChild(renderer.domElement);
  const controls = new OrbitControls(camera, renderer.domElement);

  const geometry = new THREE.PlaneGeometry(cols * CELL_SIZE.x, rows * CELL_SIZE.z, cols * 2, rows * 2);
  geometry.rotateX(-Math.PI / 2);
  const colors = new Float32Array(geometry.attributes.position.count * 3);
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  const material = new THREE.MeshBasicMaterial({ vertexColors: true, wireframe: false });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  const tmp = new THREE.Color();
  const cold = new THREE.Color(0x3b82f6);   // 蓝：冷区 / 呆滞
  const warm = new THREE.Color(0xf59e0b);   // 黄：中等
  const hot  = new THREE.Color(0xef4444);   // 红：高热 / 黄金货位

  function applyScores(scores) {
    const arr = scores; // 已按平面顶点索引排序的得分数组
    for (let i = 0; i < arr.length; i++) {
      const t = Math.pow(arr[i], 0.8);
      // 双段 lerp：0~0.5 冷→暖，0.5~1 暖→红
      if (t < 0.5) tmp.copy(cold).lerp(warm, t * 2);
      else tmp.copy(warm).lerp(hot, (t - 0.5) * 2);
      colors[i * 3] = tmp.r; colors[i * 3 + 1] = tmp.g; colors[i * 3 + 2] = tmp.b;
    }
    geometry.attributes.color.needsUpdate = true;   // 必须置位，否则 GPU 不会重读
  }

  function loop() {
    requestAnimationFrame(loop);
    controls.update();
    renderer.render(scene, camera);
  }
  loop();

  return {
    applyScores,
    dispose() { renderer.dispose(); controls.dispose(); },
  };
}

 是经验值：密度场的分辨率应当高于几何分段数，否则三角面会覆盖多个热力像素，产生阶梯状。1000×1000 顶点适合 256×256 的场（每个像素约对应 4 个顶点）。

六、交互与确认：AI 给候选，人做决策 

。AI 的排名必须可解释，否则拣货员不会信它；人工可以覆盖，但覆盖必须有理由。

// src/components/RecommendationPanel.jsx
import React, { useState } from 'react';

export function RecommendationPanel({ candidates, sku, onConfirm, onOverride }) {
  const [reason, setReason] = useState('');

  return (
    <aside className="wms-rec-panel">
      <header>
        <h3>AI 推荐上架位</h3>
        <span className="wms-sku">{sku.code} · {sku.weight}kg</span>
      </header>
      <ol className="wms-rec-list">
        {candidates.map((c, i) => (
          <li key={c.code} className={i === 0 ? 'is-top' : ''}>
            <div className="wms-rec-rank">{i === 0 ? '推荐' : i + 1}</div>
            <div className="wms-rec-body">
              <strong>{c.code}</strong>
              <span>得分 {c.score.toFixed(2)} · 热度 {c.density.toFixed(2)}</span>
              <small>距出口 {c.distanceToExit}m · 承重余量 {c.maxWeight - sku.weight}kg</small>
            </div>
            <button onClick={() => onConfirm(c)}>确认</button>
          </li>
        ))}
      </ol>
      <details className="wms-rec-override">
        <summary>推荐不合适？选择其他库位</summary>
        <select onChange={(e) => onOverride(e.target.value)}>
          <option value="">选择库位…</option>
          {/* 从通过硬门槛的候选集中取前 50 */}
        </select>
        <input placeholder="覆盖原因（必填，用于模型回灌）" value={reason} onChange={(e) => setReason(e.target.value)} />
      </details>
    </aside>
  );
}

每个候选都展示得分的组成部分

（热度、距出口、承重余量），而不是只给一个总分。这解决的是信任问题——拣货员看到"距出口 42 米"就能判断这个推荐是否适合当前波次。覆盖原因强制填写，是后面模型迭代的训练数据来源。

仓库现场的设备差异极大，从带独显的调度台到老旧 PDA 都有。一张热力图不能只跑在一台机器上。

// src/heatmap/adaptive.js
export async function createHeatmap(canvas, scores) {
  const dpr = window.devicePixelRatio || 1;
  const memory = navigator.deviceMemory || 4;

  if (dpr <= 2 && memory >= 4) {
    const Three = await import('../three/AisleView.js');   // 动态分包，3D 依赖不进首屏
    return Three.createAisleView(canvas, { cols, rows });
  }
  if (scores.length < 2000) {
    const C2D = await import('./Heatmap2D.js');
    return new C2D.Heatmap2D(canvas, { cols, rows, cell: 4 });
  }
  return await import('./HeatmapTiles.js');                 // 瓦片降级：只渲染视口内格子
}

分层逻辑按两个真实瓶颈决定：

（由 DPR 决定）。Three.js 相关代码必须动态 

，否则 3D 依赖会打进上架页的首屏包。

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

 这一行值得写进规范。Retina 屏的 3 倍 DPR 会让像素填充量变成 9 倍，而视觉收益几乎不可见。

本文交付了一条从离散作业事件到可确认上架指令的完整链路。要点可以收成四条。

 把货位编码映射成世界坐标，2D 与 3D 共用这一份映射，得分才成为可复用的数据资产，而不是某个组件的私有状态。

第二，密度场是连续场，不是格子计数。

 用高斯核密度估计把离散事件摊成连续面，热区才能自然溢出到周边空位；带宽决定"热"的扩散半径，是现场最需要调的参数。

第三，硬约束必须一票否决，不能写进权重。

 尺寸、承重、温区、锁定先过滤，加权打分在后。混在一起，模型会给出一个物理上不可行的"最优解"。

 2D 看趋势、找热区，靠预生成径向核加 256 级 LUT 保住帧率；3D 看结构、做决策，靠顶点色随数据更新。LUT 预生成、kernel 只建一次、

 显式置位，这三处决定了性能上限。

库位推荐是 AI 进入 WMS 时最容易被"演示化"的一个环节：一张花哨的 3D 仓库图，几个发光的库位，然后——就没有然后了。真正上不了生产的原因通常不在算法，而在前端把"得分"当成了"决策"。得分只是输入，落地还要过库位尺寸、承重、先进先出、混放规则、锁定状态、通道可达性、温区约束这一连串硬门槛；任何一步被跳过，拣货员就会把一托贵重商品塞进最远的角落，或者让两个互斥 SKU 共享同一货位。

智能仓储 WMS 前端系统 | AI 库位推荐引擎：3D 仓库布局与热力图实现

前端开发

前端

人工智能

算法

基于库位推荐落地难点，本文构建一条从离散事件到可确认上架指令的完整链路：统一坐标映射，用核密度估计生成连续热度场，硬规则一票否决后加权排序，2D热力图与3D顶点色同步展示，人工可解释确认。提供高性能渲染细节与设备自适应降级方案，确保生产可用。

WebSocket

Kernel

ReAct 

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

智能仓储 WMS 前端系统 | AI 库位推荐引擎：3D 仓库布局与热力图实现

智能仓储 WMS 前端系统 | AI 库位推荐引擎：3D 仓库布局与热力图实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐