作者:孝夕夕
推荐理由
飞书多维表格不支持显示海域或境外坐标点。如果我十分想标注这些地理位置,该怎么办呢?自己动手丰衣足食,那就写一个插件来实现“标注自由”吧,哪里想标点哪里~
是什么
「轻便地图」插件,可根据多维表格中的经纬度和标签信息,在地图上展示点位。 代表性用途:显示海域或境外坐标点。
Before 无法获取境外位置
After 坐标点位轻松上图
功能概述
目前支持的功能:
- 支持显示海域或境外坐标点。
- 支持按视图选择数据。
- 标签支持所有字段类型,并以纯文本的形式显示。
- 在地图中点击鼠标左键显示该点的经纬度信息。
- 支持在高德普通地图和高德卫星地图之间切换。
- 插件对知识库内的多维表格同样适用。
- 地图左下角显示比例尺。
(如果时间和精力允许就)即将支持的功能:
- 支持多图层。
- 支持热力图。
- 支持中英双语。
- 支持测距。
- 支持图标按表格字段设置大小。
已知但暂不考虑优化的问题:
- 坐标点相同时,标签会重叠。
- 不支持个性化设置(如:更换颜色、更换图标、三维视角)。
- 不支持线面,与原生功能对齐。
- 不支持反向录入数据,确保数据安全。
- 不支持搜索 POI。
- 不支持卫星地图叠加路网信息。
功能对比
为什么
写插件是为了实现轻量级可视化,并解决原生[地理位置]字段不支持显示海域或境外坐标点的问题。
写本文是为了提供给类似用户一个参考,以便在流程或者代码方面能否找到可以利用的地方;提供给官方一份用户样本,以便反观在文档方面能否给予类似用户更多的帮助。
怎么办
再次说明,本文是一篇非典型开发者的开发过程,更侧重于向入门级用户提供帮助。
所需资源
- Base 插件开发文档官方文档,详细介绍每个功能
- Replit多维表格插件依托的外部平台
- Attachment Downloader@杨思宇开发的「附件批量下载」插件
- Lottery@黎焕映开发的「简易抽奖」插件
- 豆包字节出品的 AI,哪里不会问哪里
目前免费 AI 已比较多,这次甚至足不出户就解决了
“如何在 App.tsx 里使用 Leaflet”
截图为与 Replit 内置 AI 的对话,但最终没采用 AI 提供的这种方式。
前置能力
实践过程
代码即说明,不进行过多的解释,在代码中记录和讲述实践过程。
一点弯路
本计划以插件Find-And-Replace-Sample的源码为模板,尝试坐标点可视化。 发觉tsx文件的语法难于ts文件,Vue就更难了,需要学习过多新的内容。 作为新手,最终选择(有源码可参考的)js文件+ts文件的路线。
如何跑通
js文件用于实现地图部分,ts文件用于实现从多维表格获取数据。
整理代码
优化升级
目前的插件效果如下图所示。