fix: 修复 geojson 数据校验错误的问题

package.json

@@ -36,6 +36,7 @@
     "@antv/larkmap": "^1.4.4",
     "@antv/sam": "^0.1.0",
     "@emotion/css": "^11.11.2",
+    "@mapbox/geojsonhint": "^3.3.0",
     "@mapbox/togeojson": "^0.16.0",
     "@turf/turf": "^6.5.0",
     "ahooks": "^3.7.0",

src/components/app-header/btn/import-btn/file-upload.tsx

@@ -34,7 +34,6 @@ const FileUpload = forwardRef<any>(function FileUpload({}, ref) {
     const { file, onSuccess, onError } = uploadRequestOption;
     parserFileToSource(file, t)
       .then((dataSource) => {
-        console.log(dataSource);
         if (!dataSource?.columns) {
           if (dataSource.data?.features?.length) {
             const newData = uploadData;

src/pages/components/editor.tsx

@@ -1,3 +1,5 @@
+//@ts-ignore
+import { hint } from '@mapbox/geojsonhint';
 import { useAsyncEffect, useUpdateEffect } from 'ahooks';
 import { ConfigProvider, theme as antdTheme, message } from 'antd';
 import classNames from 'classnames';
@@ -55,8 +57,17 @@ export const Editor: React.FC<EditorProps> = (props) => {
     )) as string | null;
     if (newEditorText && scene && !props.features) {
       try {
-        const newFeatures = JSON.parse(newEditorText).features;
-        bboxAutoFit(newFeatures);
+        const errors = hint(JSON.parse(newEditorText)).filter(
+          (item: { message: string }) =>
+            item.message !==
+            'Polygons and MultiPolygons should follow the right-hand rule',
+        );
+        if (errors.length > 0) {
+          message.error(t('import_btn.file_upload.qingJianChaShuJu'));
+        } else {
+          const newFeatures = JSON.parse(newEditorText).features;
+          bboxAutoFit(newFeatures);
+        }
       } catch (error) {
         message.error(t('import_btn.file_upload.qingJianChaShuJu'));
       }

src/recoil/feature.ts

@@ -1,3 +1,5 @@
+//@ts-ignore
+import { hint } from '@mapbox/geojsonhint';
 import type { Feature } from '@turf/turf';
 import { bbox, featureCollection, getType } from '@turf/turf';
 import { message } from 'antd';
@@ -71,15 +73,22 @@ export default function useFeature() {
     let newFeatures: Feature[] = [];
     if (editorText || value) {
       try {
-        newFeatures = transformFeatures(value ?? editorText, t);
-        if (value) {
-          setEditorText(value);
+        const errors = hint(JSON.parse(value ?? editorText)).filter(
+          (item: { message: string }) =>
+            item.message !==
+            'Polygons and MultiPolygons should follow the right-hand rule',
+        );
+        if (errors.length > 0) {
+          message.warning(t('recoil.feature.shuJuJiaZaiYou'));
+        } else {
+          newFeatures = transformFeatures(value ?? editorText, t);
+          if (value) {
+            setEditorText(value);
+          }
+          setSavedText(value ?? editorText);
+          setFeatures(newFeatures as IFeatures);
         }
-        setSavedText(value ?? editorText);
-        setFeatures(newFeatures as IFeatures);
-      } catch (e) {
-        message.warning(t('recoil.feature.shuJuJiaZaiYou'));
-      }
+      } catch (error) {}
     } else {
       setEditorText(emptyFeatures);
       setSavedText(emptyFeatures);
@@ -195,4 +204,4 @@ export default function useFeature() {
     transformCoord,
     revertCoord,
   };
-}
+}