|
|
|
# 开始使用
|
|
|
|
|
|
|
|
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|5`),
|
|
|
|
|
|
|
|
对于形状类覆盖物(前四个), 点击创建工具后按钮变蓝, 表示创建工具被激活.
|
|
|
|
|
|
|
|
此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物.
|
|
|
|
|
|
|
|
默认创建成功后覆盖物为编辑状态. 可以通过鼠标拖拽操作点对覆盖物进行修改
|
|
|
|
|
|
|
|
按 `空格键` 可以完成创建.
|
|
|
|
:::
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
创建多边形覆盖物时, 鼠标移动左键单击即可添加关键点, 鼠标右击确认进入调整状态.
|
|
|
|
|
|
|
|
调整状态下, 白色的点为路径点, 可以自由拖拽.
|
|
|
|
|
|
|
|
单击白色的点, 可以删除它.
|
|
|
|
|
|
|
|
边中间的蓝色点, 拖拽后可以生成新的路径点.
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
### 辅助工具
|
|
|
|
|
|
|
|
在创建工具下的竖排按钮, 是一系列的编辑辅助工具, 逐步完善中.
|
|
|
|
|
|
|
|
#### 搜索定位工具
|
|
|
|
我们点击 `搜索` 按钮, 即可弹出搜索框,
|
|
|
|
此时输入关键字, 会自动列举可选的目标, 点击对应目标, 即可让底图定位跳转到对应位置.
|
|
|
|
![搜索结果](./public/search.png)
|
|
|
|
|
|
|
|
## 覆盖物目录
|
|
|
|
当我们使用创建工具创建多个覆盖物之后, 左侧的覆盖物目录区, 会自动补充对应的覆盖物列表.
|
|
|
|
按照类型存放在不同的分类下.
|
|
|
|
我们可以单击选中指定的覆盖物, 对应的编辑区域内的覆盖物的边框会变红, 表示该覆盖物被选中.
|
|
|
|
![选中覆盖物](./public/selected.png)
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
选中覆盖物后, 可以自由拖拽移动覆盖物.
|
|
|
|
|
|
|
|
选中状态下还支持额外的操作.
|
|
|
|
|
|
|
|
- 编辑: 按Alt + E (Mac下为Option + E), 即可使选中覆盖物进入编辑状态.
|
|
|
|
- 复制: 按Alt + D, 即可复制一个新的覆盖物并选中, 此时可以拖拽调整复制的覆盖物的位置.
|
|
|
|
- 删除: 按Delete, 即可删除覆盖物(需要确认).
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
## 覆盖物属性
|
|
|
|
我们在选中覆盖物时, 右侧的属性面板会显示一些属性设置, 我们可以自定义覆盖物的一些属性.
|