善用多维表格插件,塑造“轻便地图”

善用多维表格插件,塑造“轻便地图”

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

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
反馈给飞书 CEO:ceo@feishu.cn