doc: 更新文档&版本

README.md

@@ -30,7 +30,7 @@
     - [x] 创建多边形
     - [x] 创建多段线
     - [x] 创建圆形
-    - [ ] 创建标记点
+    - [x] 创建标记点
   - [x] 辅助工具
     - [x] 搜索定位工具
     - [ ] 选择工具

docs/changelog.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## 0.2.1
+- [特性] 新增标记点工具
+- [修复] 修复圆形导出geojson后尺寸不对问题
+- [修复] 修复导出geojson在三维城市中使用墙面朝内问题
+
 ## 0.2.0(:tada:预览版:tada:)
 - [特性] 文件菜单
 - [特性] 编辑菜单

docs/start.md

@@ -38,18 +38,30 @@ Fine-GeoJSON-Editor是一款云端GeoJSON编辑器, 其界面设计参考了诸
 ### 创建覆盖物
 在编辑区域的左上角, 有一横排的按钮集合, 用于创建不同的覆盖物, 如下图.
 ![创建工具](./public/edit.png)
-目前支持创建4种覆盖物, 矩形, 多边形, 多段线和圆形.
+目前支持创建4种覆盖物, 矩形, 多边形, 多段线, 圆形和标记点.
 
 :::tip
-直接使用鼠标点击对应创建按钮(也可以使用快捷键 `alt + 1|2|3|4`), 
+直接使用鼠标点击对应创建按钮(也可以使用快捷键 `alt + 1|2|3|4|5`), 
 
-点击后按钮变蓝, 表示创建工具被激活. 此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物.
+对于形状类覆盖物(前四个), 点击创建工具后按钮变蓝, 表示创建工具被激活. 
+
+此时鼠标在地图底图上点击, 即可创建对应类型的覆盖物.
 
 默认创建成功后覆盖物为编辑状态. 可以通过鼠标拖拽操作点对覆盖物进行修改
 
 按 `空格键` 可以完成创建.
 :::
 
+:::tip
+创建多边形覆盖物时, 鼠标移动左键单击即可添加关键点, 鼠标右击确认进入调整状态.
+
+调整状态下, 白色的点为路径点, 可以自由拖拽.
+
+单击白色的点, 可以删除它.
+
+边中间的蓝色点, 拖拽后可以生成新的路径点.
+:::
+
 
 ### 辅助工具
 

index.html

@@ -5,6 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Fine-GeoJSONEditor, 好用的在线GeoJSON编辑工具</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlENzZCQjNFQTFDNzExRUM5OTNFRjZGNDFFNTVFNURGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlENzZCQjNGQTFDNzExRUM5OTNFRjZGNDFFNTVFNURGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUQ3NkJCM0NBMUM3MTFFQzk5M0VGNkY0MUU1NUU1REYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUQ3NkJCM0RBMUM3MTFFQzk5M0VGNkY0MUU1NUU1REYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5lMWsyAAAKGElEQVR42uxb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">
 </head>
 <body>
   <div id="app"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fine-geojson-editor",
-  "version": "0.0.1",
+  "version": "0.2.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

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);

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 {

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];
 }