p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs(storybook): color

This commit is contained in:
thinkinggis 2020-05-19 20:45:31 +08:00
parent 125f4685ea
commit 5b4779c2da
1 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
stories/Layers/components/polygon.tsx
View File

@ -84,6 +84,17 @@ const Spectral: {
'rgb(94,79,162)', '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 { export default class TextLayerDemo extends React.Component {
// @ts-ignore // @ts-ignore
private scene: Scene; private scene: Scene;
@ -117,16 +128,17 @@ export default class TextLayerDemo extends React.Component {
features: [], features: [],
}) })
.shape('fill') .shape('fill')
.scale('childrenNum', {
type: 'quantile',
})
// .color('red') // .color('red')
.color('childrenNum', [ .color('childrenNum', [
'rgb(247,252,240)', '#D92568',
'rgb(224,243,219)', '#E3507E',
'rgb(204,235,197)', '#FC7AAB',
'rgb(168,221,181)', '#F1D3E5',
'rgb(123,204,196)', '#A7B5E3',
'rgb(78,179,211)', '#F2EEFF',
'rgb(43,140,190)',
'rgb(8,88,158)',
]) ])
.style({ .style({
opacity: 1.0, opacity: 1.0,
@ -148,7 +160,7 @@ export default class TextLayerDemo extends React.Component {
filter: 1, filter: 1,
textAllowOverlap: 4, textAllowOverlap: 4,
opacity: 1, opacity: 1,
color: '#ffffff', color: '100元',
}; };
const rasterFolder = gui.addFolder('面图层可视化'); const rasterFolder = gui.addFolder('面图层可视化');
@ -175,8 +187,20 @@ export default class TextLayerDemo extends React.Component {
scene.render(); scene.render();
scene.exportPng(); scene.exportPng();
}); });
rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => { rasterFolder
layer.color(color); .add(styleOptions, 'color', [
'100元',
'50元',
'20元',
'10元',
'5元',
'1元',
'5角',
'2角',
'1角',
])
.onChange((color: any) => {
layer.color('childrenNum', RMBColor[color] as string[]);
scene.render(); scene.render();
}); });
}); });