diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index fdc848bb82..3f6803e3a3 100644 --- a/stories/Layers/components/polygon.tsx +++ b/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(); + }); }); }