diff --git a/README.md b/README.md
index 3a0e971..2d14ddf 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@
- [x] 创建多边形
- [x] 创建多段线
- [x] 创建圆形
- - [ ] 创建标记点
+ - [x] 创建标记点
- [x] 辅助工具
- [x] 搜索定位工具
- [ ] 选择工具
diff --git a/docs/changelog.md b/docs/changelog.md
index 679ab4c..cd1f79b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,10 @@
# 更新日志
+## 0.2.1
+- [特性] 新增标记点工具
+- [修复] 修复圆形导出geojson后尺寸不对问题
+- [修复] 修复导出geojson在三维城市中使用墙面朝内问题
+
## 0.2.0(:tada:预览版:tada:)
- [特性] 文件菜单
- [特性] 编辑菜单
diff --git a/docs/start.md b/docs/start.md
index 126a6de..8d79161 100644
--- a/docs/start.md
+++ b/docs/start.md
@@ -38,18 +38,30 @@ Fine-GeoJSON-Editor是一款云端GeoJSON编辑器, 其界面设计参考了诸
### 创建覆盖物
在编辑区域的左上角, 有一横排的按钮集合, 用于创建不同的覆盖物, 如下图.
-目前支持创建4种覆盖物, 矩形, 多边形, 多段线和圆形.
+目前支持创建4种覆盖物, 矩形, 多边形, 多段线, 圆形和标记点.
:::tip
-直接使用鼠标点击对应创建按钮(也可以使用快捷键 `alt + 1|2|3|4`),
+直接使用鼠标点击对应创建按钮(也可以使用快捷键 `alt + 1|2|3|4|5`),
-点击后按钮变蓝, 表示创建工具被激活. 此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物.
+对于形状类覆盖物(前四个), 点击创建工具后按钮变蓝, 表示创建工具被激活.
+
+此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物.
默认创建成功后覆盖物为编辑状态. 可以通过鼠标拖拽操作点对覆盖物进行修改
按 `空格键` 可以完成创建.
:::
+:::tip
+创建多边形覆盖物时, 鼠标移动左键单击即可添加关键点, 鼠标右击确认进入调整状态.
+
+调整状态下, 白色的点为路径点, 可以自由拖拽.
+
+单击白色的点, 可以删除它.
+
+边中间的蓝色点, 拖拽后可以生成新的路径点.
+:::
+
### 辅助工具
diff --git a/index.html b/index.html
index b74017c..9d44db5 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
Fine-GeoJSONEditor, 好用的在线GeoJSON编辑工具
+
diff --git a/package.json b/package.json
index 4c3c591..c481368 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "fine-geojson-editor",
- "version": "0.0.1",
+ "version": "0.2.1",
"scripts": {
"dev": "vite",
"build": "vite build",
diff --git a/public/images/favicon.png b/public/images/favicon.png
new file mode 100644
index 0000000..3a4b866
Binary files /dev/null and b/public/images/favicon.png differ
diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts
index 3b4c49b..734eb01 100644
--- a/src/map/MapEditor.ts
+++ b/src/map/MapEditor.ts
@@ -257,7 +257,6 @@ export class MapEditor extends Emitter implements IMapEditor {
const marker = new AMap.Marker({
icon: "/images/marker.png",
position: position as [number, number],
- anchor: "bottom-center",
offset: new AMap.Pixel(-13, -30),
});
marker.setMap(this.map);
diff --git a/src/store/utils/getGeoJSON.ts b/src/store/utils/getGeoJSON.ts
index 61636c4..384dea4 100644
--- a/src/store/utils/getGeoJSON.ts
+++ b/src/store/utils/getGeoJSON.ts
@@ -93,6 +93,23 @@ export function getGeoJSON(state: IMapOptions): GeoJSON.FeatureCollection {
addPolygonFeature([path], circle, { center, radius });
});
+ overlays
+ .filter((overlay) => overlay.type === OverlayTypes.Point)
+ .forEach((point) => {
+ // const { lngLat } = point;
+ const position = convertPosition(point.lngLat!);
+ features.push({
+ type: "Feature",
+ geometry: {
+ type: "Point",
+ coordinates: position,
+ },
+ properties: {
+ name: point.name,
+ },
+ });
+ });
+
convertFeatures(features);
return {
diff --git a/src/store/utils/getMapOptions.ts b/src/store/utils/getMapOptions.ts
index 8fb852f..f0a5d08 100644
--- a/src/store/utils/getMapOptions.ts
+++ b/src/store/utils/getMapOptions.ts
@@ -72,11 +72,26 @@ export function getMapOptions(geojson: GeoJSON.FeatureCollection) {
updateBounds(coordinates);
};
+ const addPoint = (feature: GeoJSON.Feature) => {
+ const { geometry, properties } = feature;
+ const { name } = properties as any;
+ const { coordinates } = geometry as GeoJSON.Point;
+ mapOptions.overlays.push({
+ id: getUID(),
+ name,
+ type: OverlayTypes.Point,
+ lngLat: convertPosition(coordinates),
+ });
+ updateBounds([coordinates]);
+ };
+
features.forEach((feature) => {
const { geometry } = feature;
const { type } = geometry;
if (type === "Polygon") {
addPolygon(feature);
+ } else if (type === "Point") {
+ addPoint(feature);
} else {
addPolyline(feature);
}
@@ -90,9 +105,11 @@ export function getMapOptions(geojson: GeoJSON.FeatureCollection) {
}
function convertPath(path: GeoJSON.Position[]) {
- return path.map((pos) => {
- let [lng, lat] = pos;
- ({ lng, lat } = gps84_To_gcj02(lng, lat));
- return [lng, lat];
- });
+ return path.map(convertPosition);
+}
+
+function convertPosition(position: GeoJSON.Position) {
+ let [lng, lat] = position;
+ ({ lng, lat } = gps84_To_gcj02(lng, lat));
+ return [lng, lat];
}