前端

在这次 OSPP 当中我将会完成一个基于现代前端技术栈的 OpenStreeMap 公共交通关系编辑器。希望能为 OSM 社区做一些贡献。

项目目标

本项目的目标是使用现代前端技术栈开发一个跨平台的编辑器,该编辑器操作简便,交互直观。项目过程中将与 OSM 中国社区合作,确保在交互设计和功能实现上达到较高的标准。

项目实现

项目基本框架

项目可以大致分为地图渲染模块,路线编辑模块,以及 OSM API 模块

地图渲染

根据当前经纬度位置和需要的渲染范围,利用 OSM API 模块提供的抽象,向 OSM 主站请求地图数据,并根据所得的地图,通过渲染模块提供的 Feature 抽象,将元数据数据解析成点,线或多边形的图形对象(如 PIXI.Graphics 或 PIXI.Sprite ),通过 Pixi.js 使用 WebGL 渲染。

同时,需要通过用户的交互来更新地图。通过监听用户鼠标和键盘事件,移动时动态地向服务器请求数据并更新,在放大缩小时控制地图的渲染粒度。当用户选择某些元素时,对元素进行高亮。这部分逻辑需要和路线编辑模块相互结合。

路线编辑

支持多选地图中的路线结点和站点,支持点选,框选,刷选等方式进行元素选择。通过简洁的 UI 进行线路的新建和编辑操作。页面需要足够清晰,提供直观的工具,方便用户快速找到需要的功能。

通过调用其他开源路由 API (如 GraphHopper, OSRM, OpenTripPlanner 等)支持仅通过公交站点数据自动计算可能路径。

通过引入状态管理机制,支持操作历史可持久化,可以满足撤回重做等基本操作需求。同时可以引入版本控制的有关思想,确保历史记录的高效性和稳定性。

OSM API 模块

提供与 OSM API v0.6 的交互的抽象,包括登录鉴权,数据请求,编辑数据后的数据上传,并且遵循 OSM 接口的规范。

项目进度

项目进度会在后续文章更新

授权

This work is licensed under a
CC0
.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×