docs(storybook): color

stories/Layers/components/polygon.tsx

@@ -84,6 +84,17 @@ const Spectral: {
     'rgb(94,79,162)',
   ],
 };
+const RMBColor: { [key: string]: string[] } = {
+  '100元': ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#A7B5E3', '#F2EEFF'],
+  '50元': ['#416D63', '#497A71', '#8FC1B1', '#7E80A7', '#D2C6DC', '#8B897B'],
+  '20元': ['#563F30', '#A08671', '#BE9577', '#E1BDA0', '#9BCEB8', '#EACDD6'],
+  '5元': ['#49315E', '#7C5E91', '#A38EAE', '#DCC4B2', '#CDD0B5', '#B3A895'],
+  '10元': ['#23324A', '#465C6B', '#A6B0BE', '#BA9FA2', '#B6B4A3', '#B89374'],
+  '1元': ['#343F24', '#717F63', '#BCCAAF', '#CEBD7E', '#B5B4A0', '#E9E4E1'],
+  '5角': ['#644353', '#8C5B66', '#916970', '#BEB4C6', '#B5C0C8', '#FFDEE3'],
+  '2角': ['#4D6256', '#5F6F63', '#648F96', '#A5AF9C', '#C4DAE2', '#8A9A8E'],
+  '1角': ['#653E40', '#6C4547', '#AC8486', '#D1A6A1', '#CAB8B8', '#D5C1A4'],
+};
 export default class TextLayerDemo extends React.Component {
   // @ts-ignore
   private scene: Scene;
@@ -117,16 +128,17 @@ export default class TextLayerDemo extends React.Component {
           features: [],
         })
         .shape('fill')
+        .scale('childrenNum', {
+          type: 'quantile',
+        })
         // .color('red')
         .color('childrenNum', [
-          'rgb(247,252,240)',
-          'rgb(224,243,219)',
-          'rgb(204,235,197)',
-          'rgb(168,221,181)',
-          'rgb(123,204,196)',
-          'rgb(78,179,211)',
-          'rgb(43,140,190)',
-          'rgb(8,88,158)',
+          '#D92568',
+          '#E3507E',
+          '#FC7AAB',
+          '#F1D3E5',
+          '#A7B5E3',
+          '#F2EEFF',
         ])
         .style({
           opacity: 1.0,
@@ -148,7 +160,7 @@ export default class TextLayerDemo extends React.Component {
         filter: 1,
         textAllowOverlap: 4,
         opacity: 1,
-        color: '#ffffff',
+        color: '100元',
       };
       const rasterFolder = gui.addFolder('面图层可视化');
 
@@ -175,10 +187,22 @@ export default class TextLayerDemo extends React.Component {
           scene.render();
           scene.exportPng();
         });
-      rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => {
-        layer.color(color);
-        scene.render();
-      });
+      rasterFolder
+        .add(styleOptions, 'color', [
+          '100元',
+          '50元',
+          '20元',
+          '10元',
+          '5元',
+          '1元',
+          '5角',
+          '2角',
+          '1角',
+        ])
+        .onChange((color: any) => {
+          layer.color('childrenNum', RMBColor[color] as string[]);
+          scene.render();
+        });
     });
   }