求职方向:前端研发、全栈开发、AI Agent

精选案例工作项目

MAP DATA WORKBENCH · PRODUCTION SYSTEM

百度地图数据作业:复杂地图渲染与数据服务

在百度带领 5 名前端工程师期间,我参与并负责地图数据作业方向的核心交付:前端侧在既有内部 SVG 地图体系上组织道路、轨迹、GPS 与业务标记等多类空间要素,处理图层装载、空间检索和复杂编辑交互;主导整个众源空间统计项目的设计、开发与持续迭代,并扩展 Python / PostgreSQL 作业与批量质检流程。

时间
2017.11—2019.11 · 百度生产项目
职责
地图渲染与作业交互 · 数据服务设计 · 前端带队
状态
内部生产系统 · 公开内容已脱敏
范围
SVG 地图分层与多图层装载 / 瓦片差量加载、视口裁剪、空间索引与几何计算
  • Vue 2
  • JavaScript
  • SVG
  • RBush
  • Node.js
  • Python / Tornado
  • PostgreSQL / JSONB
  • PHP / Yii2
  • MySQL
  • Elasticsearch

OUTCOMES

项目结果

  • 参与复杂地图作业前端的核心开发,在内部 SVG 地图体系中以 Map、Layer、Feature、Element 分层组织道路、轨迹、GPS 与业务标记。
  • 围绕视口变化处理瓦片差量装载、空间索引与几何筛选,支持空间要素的选择、编辑、关联、高亮、测距和动态标签;同时实现道路属性规格适配,完成后端数据规格与前端视觉模型之间的双向转换。
  • 主导统计计算与平台展示的设计、开发和迭代:计算由 Node.js 迁移至 Python,PHP / Yii2 用于统计平台展示;同时在 Python / PostgreSQL 作业端扩展异步质检、回调防重、返工 / 验收状态流与 JSONB 例外分析。
  • 在统计链路中使用 Elasticsearch count / search / scroll 检索并关联 MySQL 业务记录,形成采集、匹配、指令、回收与质检的阶段耗时指标。
  • 带领 5 名前端工程师完成地图作业、统计运营页面与相关工具交付,承担任务拆分、技术方案、关键问题处理和代码评审。
地图作业的两条工程主线脱敏架构示意 · 非内部页面截图
01
复杂地图渲染既有内部 SVG 地图体系上的作业能力
  1. Map
  2. Layer
  3. Feature
  4. Element
RoadTrackGPSLaneMarkQA
02
后端与团队交付作业状态、统计服务与 5 人前端团队
  1. 采集
  2. 作业
  3. 质检
  4. 返工 / 验收
  5. 统计
Python / PostgreSQLPHP / Yii2ES / MySQL

5 名前端工程师 · 任务拆分 · 技术方案 · Code Review

01

地图数据采集与质检

百度生产项目

这段经历面向百度地图内部的数据采集、标注、质检与空间统计,不是消费端地图页面。系统需要把道路、轨迹、GPS、照片和多类业务标记放进同一作业上下文,同时把任务状态和统计结果连接到后端流程。

我的工作分为两条清晰主线:参与复杂地图作业前端的核心开发并带领前端团队交付;主导空间统计项目的整体设计、开发与持续迭代,并在既有 Python / PostgreSQL 作业平台中持续扩展批量质检与数据流程。

02

复杂地图渲染:分层组织空间要素

前端核心开发 / 团队协作

在既有内部 SVG 地图体系上,以 Map、Layer、Feature、Element 分离地图状态、图层、业务语义与图形元素。

地图能力按 Map、Layer、Feature、Element 分层:Map 处理视口与坐标,Layer 负责装载和可见性,Feature 表达道路、轨迹、车道与交通设施等业务语义,Element 负责折线、多边形、文字和图标等 SVG 图形。

我在这一既有体系中参与核心作业能力开发,把参考路网、公共轨迹、GPS、网格、标注和质检信息组织为可组合图层。

  • 渲染结构:Map → Layer → Feature → Element
  • 空间要素:道路 · 轨迹 · GPS · 车道 · 限速 · 交通设施 · 质检标记
  • 图形表达:Polyline · Polygon · Text · Icon 等 SVG 元素
03

视口装载、空间索引与几何计算

复杂渲染与性能边界

地图平移和缩放会持续改变可见数据。图层按瓦片计算差量,只请求新进入视口的范围并取消已失效请求;网格和轨迹根据缩放级别调整呈现,避免每次视口变化都重建全部内容。

空间查询使用 R-tree 索引先按包围盒缩小候选范围,再通过点线关系、相交、距离和矩形范围等几何计算过滤。该链路支撑命中测试、附近道路查找、轨迹关联、测距和高亮等交互。

  • 瓦片差量:新增范围请求 · 离开范围清理 · 过期请求取消
  • 空间检索:RBush 包围盒索引 · 几何二次过滤
  • 缩放策略:按 zoom 调整图层、标记密度与视觉参数
04

作业交互:让地图、影像与任务状态协同

地图数据作业工作台

作业人员需要在平面图、照片、全景或俯视影像之间核对信息,并对道路名称、车道、限速、转向、交通设施等对象进行选择、编辑和关联。地图层还需同步显示参考数据、当前标注、差异结果与质检问题。

我还实现了道路属性规格适配:在后端 TTFA 规则与前端视觉模型之间双向转换时间条件、车辆类型位图和车道组成,并兼容新旧数据规格。

前端由图层可见性、选中对象、历史记录、快捷工具和任务状态共同驱动。高亮、测距、动态标签与参考轨迹不是独立效果,而是帮助作业人员在复杂空间上下文中完成判断和修改。

05

后端设计:作业状态与异步批量质检

Python / PostgreSQL 生产流程

在 Python / Tornado 与 PostgreSQL 作业平台中,我扩展任务提交、批量质检、返工和验收流程。外部质检任务通过创建请求与成功 / 失败回调衔接,业务侧校验回调数据、防止重复处理,并对错误项去重后写回任务状态。

例外记录使用 PostgreSQL JSONB 完成筛选、分页、统计与原因更新;状态变更结合行锁与批检日志,避免异步回调和人工操作造成任务状态冲突。

  • 状态流:作业提交 · 批量质检 · 返工 · 修复 · 验收
  • 异步安全:回调校验 · 重复回调防护 · 错误项去重
  • 数据处理:PostgreSQL 行锁 · JSONB 例外记录与分析
06

统计项目:计算迁移与结果展示

Node.js → Python · PHP / Yii2 展示 · Elasticsearch / MySQL

我主导整个众源空间数据统计项目的设计、开发与持续迭代。统计计算最初使用 Node.js 实现,后因内存瓶颈迁移至 Python;PHP / Yii2 用于统计平台展示。

Python 脚本按批次、日、小时与 15 分钟等周期编排统计任务,完成地理数据抽取、分类和落盘;统计平台按批次、任务、设备、轨迹、路段、时间和里程等维度展示结果。

链路耗时统计通过 Elasticsearch count / search / scroll 查询状态日志,再与 MySQL 业务记录关联,计算采集、匹配、指令、回收与质检阶段的耗时。

07

带队交付:5 人前端团队与跨栈协作

前端负责人 · 跨栈交付

百度期间我带领 5 名前端工程师,项目范围覆盖地图数据作业、统计运营页面和百家号编辑器。我的工作既包含任务拆分、技术方案和代码评审,也包含关键地图交互及疑难问题的直接实现。

整个统计项目由我主导设计、开发并持续迭代,并在既有作业平台上持续实现 Python / PostgreSQL 业务能力。

08

证据与技术边界

公开说明

公开案例依据本人履历、保留工程源码及可核对的代码版本记录整理,不展示内部页面、真实地图数据或未授权截图。地图渲染源码能够说明系统分层与交互复杂度,但缺少完整的原始版本记录,因此不宣称我独立从零实现整套地图底层。

保留的后端代码覆盖 PHP / Yii2、Python / Tornado、PostgreSQL / JSONB、MySQL 与 Elasticsearch 查询接入。Kafka 仅属于项目使用经验,不列为本案例的设计或建设成果;也不把 Elasticsearch 的使用表述为集群建设。

本页目录
  1. 地图数据采集与质检
  2. 复杂地图渲染:分层组织空间要素
  3. 视口装载、空间索引与几何计算
  4. 作业交互:让地图、影像与任务状态协同
  5. 后端设计:作业状态与异步批量质检
  6. 统计项目:计算迁移与结果展示
  7. 带队交付:5 人前端团队与跨栈协作
  8. 证据与技术边界