完善使用文档

docs/index.md

@@ -1,5 +1,12 @@
 # 介绍
 
-> Fine-GeoJSON-Editor 是一款基于高德JS API开发的geojson编辑器. 
+> Fine-GeoJSON-Editor 是一款基于高德JS API开发的在线geojson编辑器. 
 > 
 > 旨在提供更便捷的geojson编辑功能.
+
+## 目标
+
+- 提供更多实用的GeoJSON编辑功能
+- 覆盖更多的使用场景: 二维地理可视化, 三维地理可视化
+- 更美观的界面
+- 更友好的交互

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, 即可删除覆盖物(需要确认).
 
-## 图层目录
+:::
 
-## 图层属性
+## 覆盖物属性
+我们在选中覆盖物时, 右侧的属性面板会显示一些属性设置, 我们可以自定义覆盖物的一些属性.