在这次 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
.