很多人第一次用企业版 Map View,会觉得它只是“把联系人坐标放到 Leaflet 上”。可 map_model.js 和 map_renderer.js 展现出来的是一套更完整的交互前端:取数、分组、同点聚合、路线绘制、拖拽重排,再把结果回刷到地图。
主要参考:
enterprise/web_map/static/src/map_view/map_model.jsenterprise/web_map/static/src/map_view/map_renderer.jsenterprise/web_map/static/src/map_view/map_controller.js
一、Map Model 先解决“什么能画”,再解决“怎么画”
前端模型加载时会先过滤掉不适合分组的属性字段,再取记录、伙伴坐标和路由信息。它还会区分:
- 是否分组显示
- 是否可重排
canResequence - 是否使用 MapBox API
- 是否需要继续补抓坐标
也就是说,地图前端不是一个只吃静态点位数组的组件,而是一个带状态判断的视图模型。
二、同点 marker 不会简单重叠,而是会做聚合偏移
当多个记录落在同一经纬度时,renderer 不会把点完全压在一起,而是通过 pinInSamePlace 做轻微 offset,并在 popup 里维护 related records。这样用户至少还能点到多个记录,而不是只看到最后一个覆盖前一个。
这是地图类业务里很实用的细节:真正难用的地图,不是不能打点,而是打了点之后根本点不中。
三、分组不是只改颜色,它还改变编号与 pin 列表
在 grouped 模式下,renderer 会按 groupId 选颜色,并重新计算组内编号。也就是说,编号不再是全表绝对顺序,而是当前组展开状态下的局部顺序。
这和侧边 pin list 是联动的:你收起某个组,地图上与列表中的可见集合都会同步变化。
四、路线 polyline 说明地图不仅展示点,还展示顺序关系
当 MapBox 路由数据存在时,renderer 会把每一段 route leg 转成 polyline,并允许点击某条路线高亮。此时地图承载的就不只是“哪里有记录”,而是“这些记录按什么路径关联起来”。
这也是为什么 resequence 很重要——顺序一改,路线意义就可能变。
五、拖拽重排是整条链的高级点
useSortable 让 pin list 可以拖拽,落地时调用 model 的 resequence()。后端更新 sequence 后,前端还会重取记录并刷新伙伴坐标与地图呈现。
也就是说,拖拽不是纯 UI 动画,而是真正修改了记录顺序,再把地图和列表一起重算。
六、结论
Map View 前端的价值,不在 Leaflet 本身,而在它把地图、列表、分组、路线、顺序统一成一个交互模型。
因此它不是“地图上打几个点”的小功能,而是一种适合拜访路线、地理分布与顺序执行场景的企业版可视化工作台。
DISCUSSION
评论区