更新文件导入

Author: cocaine-coder

geojson-editor/src/components/features/IO.vue

@@ -20,59 +20,23 @@
 </template>
 
 <script setup lang="ts">
-import { TIdentityGeoJSONFeature, Tools } from '../../../../packages/maplugin-core';
+import { TIdentityGeoJSONFeature } from '../../../../packages/maplugin-core';
+import FileProcesses from '../../services/file-processes';
 
 const props = defineProps<{
     onUpload(features: Array<TIdentityGeoJSONFeature>): void,
     onDownload(): GeoJSON.FeatureCollection
 }>();
 
-const file_process: Array<{
-    extension: string,
-    description: string,
-    contentType: string
-    decode?(file: File, onFinish: (features: Array<TIdentityGeoJSONFeature>) => void): void,
-    encode?(geojson: GeoJSON.FeatureCollection): string | Blob
-}> = [
-        {
-            extension: ".geojson",
-            description: "geojson",
-            contentType: "application/json",
-            decode(file, onFinish) {
-                const reader = new FileReader();
-
-                reader.onload = e => {
-                    try {
-                        const geojson = JSON.parse(e.target?.result as string) as GeoJSON.FeatureCollection;
-                        geojson.features.forEach(f => {
-                            f.properties ??= {};
-                            if (!f.properties['id']) {
-                                f.properties['id'] = Tools.uuid();
-                            }
-                        });
-                        onFinish(geojson.features as any);
-                    } catch (e) {
-                        alert("geojson文件格式不正确");
-                    }
-                };
-
-                reader.readAsText(file);
-            },
-
-            encode(geojson) {
-                return JSON.stringify(geojson, null, 4);
-            }
-        }
-    ]
-
 function handleUpload() {
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = file_process.filter(x => x.encode).map(x => x.extension).join("|");
-    input.onchange = function (e: any) {
+    input.accept = FileProcesses.filter(x => x.decode).map(x => x.extension).join(", ");
+    input.onchange = async function (e: any) {
         const file: File = e.target.files[0];
         const extension = file.name.split('.').pop()!;
-        file_process.find(x => x.extension === `.${extension}`)?.decode?.(file, features => props.onUpload(features));
+        const features = await FileProcesses.find(x => x.extension === `.${extension}`)!.decode!(file);
+        props.onUpload(features);
         input.remove();
     }
     input.click();
@@ -83,7 +47,7 @@ async function handleDownload() {
 
     if ((window as any)['showSaveFilePicker']) {
         const opts = {
-            types: file_process.filter(x => x.encode).map(x => ({
+            types: FileProcesses.filter(x => x.encode).map(x => ({
                 description: x.description,
                 accept: {
                     [x.contentType]: [x.extension]
@@ -97,8 +61,8 @@ async function handleDownload() {
             writable = await handle.createWritable(); // 创建可写入的文件对象
 
             const extension = handle.name.split('.').pop()!;
-            let encode = file_process.find(x => x.extension === `.${extension}`)?.encode;
-            if (!encode) encode = file_process.find(x => x.extension === '.geojson')!.encode!;
+            let encode = FileProcesses.find(x => x.extension === `.${extension}`)?.encode;
+            if (!encode) encode = FileProcesses.find(x => x.extension === '.geojson')!.encode!;
 
             writable.write(encode(geojson)).then(() => {
                 writable?.close();

geojson-editor/src/services/file-processes.ts

@@ -0,0 +1,44 @@
+import { TIdentityGeoJSONFeature, Tools } from "../../../packages/maplugin-maplibre";
+import shp from "shpjs";
+
+function appendId(fc: GeoJSON.FeatureCollection) {
+    fc.features.forEach(f => {
+        f.properties ??= {};
+        if (!f.properties['id']) {
+            f.properties['id'] = Tools.uuid();
+        }
+    });
+    return fc;
+}
+
+const FileProcesses: Array<{
+    extension: string,
+    description: string,
+    contentType: string
+    decode?(file: File): Promise<Array<TIdentityGeoJSONFeature>>,
+    encode?(geojson: GeoJSON.FeatureCollection): string | Blob
+}> = [{
+    extension: ".geojson",
+    description: "geojson",
+    contentType: "application/json",
+    async decode(file) {
+        const str = await file.text();
+        const geojson = JSON.parse(str) as GeoJSON.FeatureCollection;
+        return appendId(geojson).features as any;
+    },
+
+    encode(geojson) {
+        return JSON.stringify(geojson, null, 4);
+    }
+}, {
+    extension: ".zip",
+    description: "shp file (zip)",
+    contentType: "application/x-zip-compressed",
+    async decode(file) {
+        const buffer = await file.arrayBuffer();
+        const geojson = await shp(buffer) as GeoJSON.FeatureCollection;
+        return appendId(geojson).features as any;
+    }
+}]
+
+export default FileProcesses;

package.json

@@ -12,7 +12,7 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "dev-ge": "vite --config ./geojson-editor/vite.config.ts",
-    "build-ge":"vite build --config ./geojson-editor/vite.config.ts"
+    "build-ge": "vite build --config ./geojson-editor/vite.config.ts"
   },
   "keywords": [],
   "author": "",
@@ -28,9 +28,11 @@
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^22.8.6",
     "@types/proj4": "^2.5.5",
+    "@types/shpjs": "^3.4.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "bumpp": "^9.7.1",
     "monaco-editor": "^0.52.0",
+    "shpjs": "^6.1.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",