fix: 解决方案页面懒加载 (#834)

package.json

@@ -28,6 +28,7 @@
     "@babel/standalone": "^7.13.15",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
+    "@loadable/component": "^5.15.0",
     "@rollup/plugin-alias": "2.2.0",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-json": "^4.0.0",

site/components/rumbling/index.tsx

@@ -1,5 +1,5 @@
 import { initWidgets } from './widgets';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { config } from './configs/config';
 import { DipperContainer, IConfig } from '@antv/dipper';
 
@@ -11,10 +11,11 @@ interface IInitData {
 }
 
 export default function RumbMap() {
+ 
   const [mapConfig, setMapConfig] = useState<IConfig<IInitData>>();
   // 初始化相关数据
-
   useEffect(() => {
+  
     initWidgets();
     setMapConfig(config);
   }, []);
@@ -24,4 +25,5 @@ export default function RumbMap() {
       <DipperContainer<IInitData> cfg={mapConfig!} />
     </div>
   );
+  // return <h1>测试</h1>
 }

site/pages/map.zh.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Map from '../components/rumbling'
-
+import Loadable from "@loadable/component"
+const Map = Loadable(() => import("../components/rumbling"))
 const Page: React.FC & { noLayout: boolean } = () => <Map/>;
 
 Page.noLayout = true;

stories/Scale/Scale.stories.tsx

@@ -0,0 +1,5 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import PointScale from './components/Point';
+storiesOf('数据映射', module)
+  .add('枚举类型', () => <PointScale />)

stories/Scale/components/Point.tsx

@@ -0,0 +1,126 @@
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class PointScale extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      pickBufferScale: 1.0,
+      map: new GaodeMap({
+        style: 'light',
+        center: [-121.24357, 37.58264],
+        pitch: 0,
+        zoom: 6.45,
+      }),
+    });
+    scene.on('loaded', () => {
+      const data = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {
+              type: 'C',
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [98.0859375, 39.36827914916014],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {
+              type: 'B',
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [124.1015625, 21.94304553343818],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {
+              type: 'A',
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [104.2437744140625, 21.453068633086783],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {
+              type: 'D',
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [102.3046875, 20.3034175184893],
+            },
+          },
+        ],
+      };
+      const pointLayer = new PointLayer({
+        autoFit: true,
+      })
+        .source(data)
+        .shape('circle')
+        .size(32)
+        .scale({
+          type: {
+            type: 'cat',
+            domain: ['C', 'B', 'A'],
+          },
+        })
+        .select({
+          color: 'red',
+        })
+        .color('type', ['#fc8d59', '#ffffbf', '#99d594'])
+        .style({
+          opacity: 1,
+          strokeWidth: 0,
+          stroke: '#fff',
+        });
+
+      const pointName = new PointLayer({
+        autoFit: true,
+      })
+        .source(data)
+        .shape('type', 'text')
+        .size(32)
+        .color('#000')
+        .style({
+          opacity: 1,
+          strokeWidth: 0,
+          stroke: '#fff',
+          textAnchor: 'center',
+        });
+
+      scene.addLayer(pointLayer);
+      scene.addLayer(pointName);
+      this.scene = scene;
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}