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