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