基于高德地图JS api开发的geojson编辑器. http://geojson.finevis.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
3.7 KiB

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