diff --git a/docs/index.md b/docs/index.md index b2c4edc..f6a2580 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,12 @@ # 介绍 -> Fine-GeoJSON-Editor 是一款基于高德JS API开发的geojson编辑器. +> Fine-GeoJSON-Editor 是一款基于高德JS API开发的在线geojson编辑器. > -> 旨在提供更便捷的geojson编辑功能. \ No newline at end of file +> 旨在提供更便捷的geojson编辑功能. + +## 目标 + +- 提供更多实用的GeoJSON编辑功能 +- 覆盖更多的使用场景: 二维地理可视化, 三维地理可视化 +- 更美观的界面 +- 更友好的交互 \ No newline at end of file diff --git a/docs/public/edit.png b/docs/public/edit.png new file mode 100644 index 0000000..60b4720 Binary files /dev/null and b/docs/public/edit.png differ diff --git a/docs/public/layout.png b/docs/public/layout.png new file mode 100644 index 0000000..56672fa Binary files /dev/null and b/docs/public/layout.png differ diff --git a/docs/public/search.png b/docs/public/search.png new file mode 100644 index 0000000..62d5677 Binary files /dev/null and b/docs/public/search.png differ diff --git a/docs/public/selected.png b/docs/public/selected.png new file mode 100644 index 0000000..edb8044 Binary files /dev/null and b/docs/public/selected.png differ diff --git a/docs/start.md b/docs/start.md index 3ff9754..ac4c91a 100644 --- a/docs/start.md +++ b/docs/start.md @@ -1,13 +1,81 @@ # 开始使用 +Fine-GeoJSON-Editor是一款云端GeoJSON编辑器, 其界面设计参考了诸如PS一类的设计软件. +除了核心的GeoJSON编辑功能外, 还补充了许多辅助编辑使用的功能. + +编辑器主要分成四个区域, 如下图 +![布局](public/layout.png) + +对应功能分别是. +- 菜单区: 和大多桌面应用一样, 主要提供编辑器使用的一些辅助操作, 诸如打开, 保存, 使用帮助等等. +- 目录区: 覆盖物的目录索引, 收录GeoJSON中所有Feature, 方便更直观的选择操作. +- 编辑区: 覆盖物的编辑区域, 可以创建&编辑不同类型的Feature. +- 属性区: 覆盖物的属性区域, 在选中覆盖物时, 用以自定义一些属性. + +:::tip +覆盖物(又称为Feature), 即底图上覆盖的形状. + +我们编辑GeoJSON, 其实就是编辑一众的覆盖物, 最后这些覆盖物, 会转换成经纬度的数据集合, 进而用以描述地理的形状或者坐标, 在地理数据可视化中被使用. + +关于GeoJSON的格式规范以及一些特殊的名词, 可以参考: [GeoJSON规范](https://geojson.org/geojson-spec.html) +::: + ## 菜单 ### 文件 +- 打开GeoJSON: 从本地上传.geojson文件进行编辑. +- 打开工程: 从本地上传.fgd文件进行编辑 +- 暂存工程: 把手头编辑的工作暂存至浏览器(基于浏览器缓存, 只在本机使用) +- 导出GeoJSON: 导出.geojson文件 +- 导出工程: 导出.fgd文件(Fine-GeoJSON-Editor专用格式) + ### 编辑 +- 清空覆盖物: 清空编辑器中所有覆盖物. ### 帮助 +- 文档: 打开帮助文档 +- 快捷键: 显示快捷键列表 ## 主编辑区 +### 创建覆盖物 +在编辑区域的左上角, 有一横排的按钮集合, 用于创建不同的覆盖物, 如下图. +![创建工具](public/edit.png) +目前支持创建4种覆盖物, 矩形, 多边形, 多段线和圆形. + +:::tip +直接使用鼠标点击对应创建按钮(也可以使用快捷键 `alt + 1|2|3|4`), + +点击后按钮变蓝, 表示创建工具被激活. 此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物. + +默认创建成功后覆盖物为编辑状态. 可以通过鼠标拖拽操作点对覆盖物进行修改 + +按 `空格键` 可以完成创建. +::: + + +### 辅助工具 + +在创建工具下的竖排按钮, 是一系列的编辑辅助工具, 逐步完善中. + +#### 搜索定位工具 +我们点击 `搜索` 按钮, 即可弹出搜索框, +此时输入关键字, 会自动列举可选的目标, 点击对应目标, 即可让底图定位跳转到对应位置. +![搜索结果](public/search.png) + +## 覆盖物目录 +当我们使用创建工具创建多个覆盖物之后, 左侧的覆盖物目录区, 会自动补充对应的覆盖物列表. +按照类型存放在不同的分类下. +我们可以单击选中指定的覆盖物, 对应的编辑区域内的覆盖物的边框会变红, 表示该覆盖物被选中. +![选中覆盖物](public/selected.png) + +:::tip +选中覆盖物后, 可以自由拖拽移动覆盖物. + +选中状态下还支持额外的操作. +- 编辑: 按Alt + E (Mac下为Option + E), 即可使选中覆盖物进入编辑状态. +- 复制: 按Alt + D, 即可复制一个新的覆盖物并选中, 此时可以拖拽调整复制的覆盖物的位置. +- 删除: 按Delete, 即可删除覆盖物(需要确认). -## 图层目录 +::: -## 图层属性 \ No newline at end of file +## 覆盖物属性 +我们在选中覆盖物时, 右侧的属性面板会显示一些属性设置, 我们可以自定义覆盖物的一些属性. \ No newline at end of file