如何快速编辑一份地理数据

我们在进行地理相关业务开发过程中,时常会需要快速查看或编辑地理数据,无论是哪种地理数据类型,一般都是通过经纬度来表达其空间位置的。而在只看经纬度数据的情况下,用户是无法直观感受其具体空间位置的,更谈不上对其能够对其空间位置和形状进行修改编辑。

L7Editor 是一款开源的地理数据可视化查看和编辑工具,支持用户快速导入各种类型的地理数据,工具会自动将其渲染在地图上供用户查看,同时提供了多种对数据的编辑交互方式,满足不同场景下用户查看和编辑的诉求。

快速查看数据

当我们有一份 GeoJSON 数据,并需要查看其空间分布甚至有编辑诉求时,可以将数据内容复制粘贴至 L7Editor 右侧的 GeoJSON 数据编辑器中,点击上方的保存按钮或者使用快捷键(Ctrl/Command + S)触发数据保存并将其渲染在地图上,同时工具会自动将地图平移缩放至地理数据所在位置。

当传入的 GeoJSON 数据包含业务字段时,还可以切换至表格视图查看各个数据项的业务字段生成的二维表。

当用户还可以通过单击可视化元素,即可在弹出的气泡框中查看到对应数据项的业务字段详细信息。

编辑数据

对于地理数据来说最简单、直观地编辑方式即是直接在地图上通过可交互的图层,新增或修改地理数据,可以通过绘制控件或者气泡框中的编辑按钮触发绘制操作。

除此通过地图绘制和 GeoJSON 编辑器之外,用户还可以通过表格视图批量编辑地理数据中的业务字段。

多类型底图支持、自由切换地理坐标系

当地理数据与地图底图对应的地理坐标系不匹配时,可视化效果会出现偏移,此时可以通过两种方式来达成坐标系的匹配操作:

  • 地图底图切换:地图底图支持切换高德地图(GCJ-02)和 Mapbox 地图(WGS84),不同底图在不同区域展示的信息粒度也不一样。
  • 遥感卫星底图:支持在工具中切换至谷歌遥感影像地图,获取关于地形、植被、建筑物和其他地标的信息。
  • 地理坐标系切换:支持设置当前地理数据的坐标系,当地图底图和数据的坐标系不匹配时,工具会自动对数据进行坐标系转换后再将其渲染到地图上。

AI 辅助绘制、遥感地块一键识别

在农业、绿色低碳等行业中时常需要基于遥感卫星影像地图上对地理数据进行生产或验证操作,工具中接入了 SAM(Segment Anything Model)支持对遥感影像地块分割,在工具中可以在开启遥感影像地图的基础上,对当前地图展示区域的遥感图像输入 SAM 中进行分割计算,计算结束后可以通过在影像上点选的方式拾取对应分割的地块,并将对应多边形围栏数据添加至工具中。

开放SDK、一键嵌入

如果在业务中需要接入地理数据编辑的能力,可以通过接入工具对外输出的 SDK,并且通过组件的 props 自定义部分功能。

更多资料

提 Issue 有奖

社区用户可以通过在 L7Editor GitHub 提出对工具一些新功能的想法以及对应交互设计,我们将选取提出质量较高 issue 的 3 名 用户赠送地球花纹雨伞一把,数量有限,先到先得。

相关推荐
web1508509664115 分钟前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil718 分钟前
《开启微服务之旅:Spring Boot Web开发举例》(一)
前端·spring boot·微服务
少年姜太公1 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
哑巴语天雨1 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情1 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌3302 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室2 小时前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_748250742 小时前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱2 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
NoneCoder2 小时前
CSS系列(29)-- Scroll Snap详解
前端·css