Skip to content

Commit

Permalink
feat: 图层属性面板支持 scale 自定义区间 (#50)
Browse files Browse the repository at this point in the history 
Co-authored-by: yxh01132861 <[email protected]>
  • Loading branch information
@simplexiao
simplexiao and yxh01132861 authored Oct 23, 2023
1 parent aa957da commit 6b39375
Show file tree
Hide file tree
Showing 26 changed files with 1,274 additions and 102 deletions.
12 changes: 11 additions & 1 deletion packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const parserLegendData = (layer: Layer) => {
}

const { items, type, field } = legendData;

items.forEach((item, index) => {
if (Array.isArray(item.value)) {
if (index === items.length - 1) {
Expand All @@ -85,6 +86,15 @@ export const parserLegendData = (layer: Layer) => {
colors.push(item.color);
});

if (type === 'threshold') {
if (labels[0] === undefined) {
labels.splice(0, 1, '<');
}
if (labels[labels.length - 1] === undefined) {
labels.splice(labels.length - 1, 1, '<');
}
}

if (type === 'cat') {
// 分类图例
// 对标签进行排序
Expand All @@ -105,7 +115,7 @@ export const parserLegendData = (layer: Layer) => {
};

return data;
} else if (['linear', 'quantile', 'quantize'].includes(type as string)) {
} else if (['linear', 'quantile', 'quantize', 'threshold'].includes(type as string)) {
const data: LegendRampData = {
type: 'LegendRamp',
field: field,
Expand Down
39 changes: 30 additions & 9 deletions packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,18 @@ const toValues = (config: LayerRegisterFormResultType<ChoroplethLayerStyleAttrib
const { fillColor, opacity, minZoom = 0, maxZoom = 24, blend } = visConfig;
const { parser } = sourceConfig;

const isCustom = typeof fillColor === 'object' && fillColor?.scale?.domain && fillColor?.scale?.domain.length !== 0;

const fillColorScale =
typeof fillColor === 'object'
? {
type: fillColor?.scale?.type,
domain: fillColor?.scale?.domain,
range: fillColor?.value,
isCustom,
}
: undefined;

return {
hexagonId: parser?.hexagonId,
fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
Expand All @@ -21,7 +33,7 @@ const toValues = (config: LayerRegisterFormResultType<ChoroplethLayerStyleAttrib
isReversed: fillColor?.isReversed || false,
}
: undefined,
fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
fillColorScale,
fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
fillColorOpacity: opacity,
zoom: [minZoom, maxZoom],
Expand All @@ -40,17 +52,26 @@ const fromValues = (style: Record<string, any>): LayerRegisterFormResultType<Cho
},
};

const fillColor = style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors,
scale: style.fillColorScale.isCustom
? {
type: style.fillColorScale.type,
domain: style.fillColorScale.domain,
}
: {
type: style.fillColorScale.type,
},
isReversed: style.fillColorRange?.isReversed ?? false,
}
: style.fillColor;

return {
sourceConfig,
visConfig: {
fillColor: style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorRange?.colors || [],
isReversed: style.fillColorRange?.isReversed || false,
scale: { type: style.fillColorScale },
}
: style.fillColor,
fillColor,
opacity: style.fillColorOpacity,
lineWidth: 0,
minZoom: style?.zoom?.[0],
Expand Down
39 changes: 30 additions & 9 deletions packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,18 @@ const toValues = (config: LayerRegisterFormResultType<MVTLayerStyleAttributeValu
blend,
} = visConfig;

const isCustom = typeof fillColor === 'object' && fillColor?.scale?.domain && fillColor?.scale?.domain.length !== 0;

const fillColorScale =
typeof fillColor === 'object'
? {
type: fillColor?.scale?.type,
domain: fillColor?.scale?.domain,
range: fillColor?.value,
isCustom,
}
: undefined;

const styleConfug = {
fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
fillColorRange:
Expand All @@ -35,7 +47,7 @@ const toValues = (config: LayerRegisterFormResultType<MVTLayerStyleAttributeValu
isReversed: fillColor?.isReversed || false,
}
: undefined,
fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
fillColorScale,
fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
fillColorOpacity: opacity,
strokeColor: strokeColor,
Expand Down Expand Up @@ -63,15 +75,24 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<MV
parser: { type: 'mvt' },
};

const fillColor = values.fillColorField
? {
field: values.fillColorField,
value: values.fillColorScale.isCustom ? values.fillColorScale.range : values.fillColorRange?.colors,
scale: values.fillColorScale.isCustom
? {
type: values.fillColorScale.type,
domain: values.fillColorScale.domain,
}
: {
type: values.fillColorScale.type,
},
isReversed: values.fillColorRange?.isReversed ?? false,
}
: values.fillColor;

const visConfig = {
fillColor: values.fillColorField
? {
field: values.fillColorField,
value: values.fillColorRange.colors,
scale: { type: values.fillColorScale },
isReversed: values.fillColorRange.isReversed,
}
: values.fillColor,
fillColor,
opacity: values.fillColorOpacity,
strokeColor: values.strokeColor,
lineWidth: values.lineWidth,
Expand Down
18 changes: 16 additions & 2 deletions packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Form } from '@formily/antd-v5';
import { createForm, onFieldValueChange } from '@formily/core';
import { useMemoizedFn } from 'ahooks';
import classNames from 'classnames';
import { pick } from 'lodash-es';
import { max, min, pick } from 'lodash-es';
import React, { useMemo, useState } from 'react';
import { useEditorDatasets, useEditorService, useEditorState } from '../../../../hooks';
import BaseFormSchemaField from '../BaseFormSchemaField';
Expand Down Expand Up @@ -42,6 +42,20 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>

const datasetFields = useMemo(() => getDatasetFields(columns), [columns]);

const datasetFieldList = useMemo(() => {
return datasetFields.map((item) => {
// @ts-ignore
const itemValue = dataset.data.map((_item: Record<string, any>) => _item[item.value]);
const domain = item.type === 'number' ? [min(itemValue), max(itemValue)] : [...new Set(itemValue)];

return {
...item,
domain,
};
});
// @ts-ignore
}, [datasetFields, dataset.data]);

const handleFormValuesChange = useMemoizedFn((styleConfig: Pick<LayerSchema, 'sourceConfig' | 'visConfig'>) => {
if (styleConfig.sourceConfig && datasetId) {
styleConfig.sourceConfig.datasetId = datasetId;
Expand Down Expand Up @@ -103,7 +117,7 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
<StyleForm
initialValues={initialValues}
implementLayer={implementLayer}
datasetFields={datasetFields}
datasetFields={datasetFieldList}
onChange={handleFormValuesChange}
/>
)}
Expand Down
41 changes: 32 additions & 9 deletions packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,24 @@ import type { BubbleLayerStyleAttributeValue } from './types';
* 将表单的平铺数据转为图层样式的数据结构
* */
export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
const fillColor = style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors,
scale: style.fillColorScale.isCustom
? {
type: style.fillColorScale.type,
domain: style.fillColorScale.domain,
}
: {
type: style.fillColorScale.type,
},
isReversed: style.fillColorRange?.isReversed ?? false,
}
: style.fillColor;

const styleConfig: BubbleLayerStyleAttributeValue = {
fillColor: style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorRange.colors,
scale: { type: style.fillColorScale },
isReversed: style.fillColorRange.isReversed,
}
: style.fillColor,
fillColor,
opacity: style.fillColorOpacity,
strokeColor: style.strokeColor,
lineWidth: style.lineWidth,
Expand Down Expand Up @@ -43,6 +52,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
// rings: style.animateRings,
// },
};

return styleConfig;
};

Expand All @@ -63,6 +73,19 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
maxZoom = 24,
blend,
} = styleConfig;

const isCustom = typeof fillColor === 'object' && fillColor?.scale?.domain && fillColor?.scale?.domain.length !== 0;

const fillColorScale =
typeof fillColor === 'object'
? {
type: fillColor?.scale?.type,
domain: fillColor?.scale?.domain,
range: fillColor?.value,
isCustom,
}
: undefined;

const config = {
fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
fillColorRange:
Expand All @@ -73,7 +96,7 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
isReversed: fillColor?.isReversed || false,
}
: undefined,
fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
fillColorScale,
fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
fillColorOpacity: opacity,
strokeColor: strokeColor,
Expand Down
40 changes: 31 additions & 9 deletions packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,24 @@ import type { ChoroplethLayerStyleAttributeValue } from './types';
* 将表单的平铺数据转为图层样式的数据结构
* */
export const choroplethLayerStyleFlatToConfig = (style: Record<string, any>) => {
const fillColor = style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors,
scale: style.fillColorScale.isCustom
? {
type: style.fillColorScale.type,
domain: style.fillColorScale.domain,
}
: {
type: style.fillColorScale.type,
},
isReversed: style.fillColorRange?.isReversed ?? false,
}
: style.fillColor;

const styleConfig: ChoroplethLayerStyleAttributeValue = {
fillColor: style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorRange.colors,
scale: { type: style.fillColorScale },
isReversed: style.fillColorRange.isReversed,
}
: style.fillColor,
fillColor,
opacity: style.fillColorOpacity,
strokeColor: style.strokeColor,
lineWidth: style.lineWidth,
Expand Down Expand Up @@ -52,6 +61,19 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty
maxZoom = 24,
blend,
} = styleConfig;

const isCustom = typeof fillColor === 'object' && fillColor?.scale?.domain && fillColor?.scale?.domain.length !== 0;

const fillColorScale =
typeof fillColor === 'object'
? {
type: fillColor?.scale?.type,
domain: fillColor?.scale?.domain,
range: fillColor?.value,
isCustom,
}
: undefined;

const config = {
fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
fillColorRange:
Expand All @@ -62,7 +84,7 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty
isReversed: fillColor?.isReversed || false,
}
: undefined,
fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
fillColorScale,
fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
fillColorOpacity: opacity,
strokeColor: strokeColor,
Expand Down
40 changes: 31 additions & 9 deletions packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,26 @@ import type { GridLayerStyleAttributeValue } from './types';
* 将表单的平铺数据转为图层样式的数据结构
* */
export const gridLayerStyleFlatToConfig = (style: Record<string, any>) => {
const fillColor = style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorScale.isCustom ? style.fillColorScale.range : style.fillColorRange?.colors,
scale: style.fillColorScale.isCustom
? {
type: style.fillColorScale.type,
domain: style.fillColorScale.domain,
}
: {
type: style.fillColorScale.type,
},
isReversed: style.fillColorRange?.isReversed ?? false,
}
: style.fillColor;

const styleConfig = {
// 网格半径 表单上为公里单位转化为米
aggregateSize: Number(style.aggregateSize) * 1000,
color: style.fillColorField
? {
field: style.fillColorField,
value: style.fillColorRange.colors,
isReversed: style.fillColorRange.isReversed,
scale: { type: style.fillColorScale },
}
: style.fillColor,
color: fillColor,
style: {
opacity: style.fillColorOpacity,
coverage: style.coverage,
Expand All @@ -33,6 +42,19 @@ export const gridLayerStyleFlatToConfig = (style: Record<string, any>) => {
* */
export const gridLayerStyleConfigToFlat = (styleConfig: GridLayerStyleAttributeValue) => {
const { aggregateSize, style, color, minZoom = 0, maxZoom = 24, blend } = styleConfig;

const isCustom = typeof color === 'object' && color?.scale?.domain && color?.scale?.domain.length !== 0;

const fillColorScale =
typeof color === 'object'
? {
type: color?.scale?.type,
domain: color?.scale?.domain,
range: color?.value,
isCustom,
}
: undefined;

const config = {
fillColorField: typeof color === 'object' ? color?.field : undefined,
fillColorRange:
Expand All @@ -43,7 +65,7 @@ export const gridLayerStyleConfigToFlat = (styleConfig: GridLayerStyleAttributeV
isReversed: color?.isReversed || false,
}
: undefined,
fillColorScale: typeof color === 'object' ? color?.scale?.type : undefined,
fillColorScale,
fillColor: typeof color !== 'object' ? color : undefined,
fillColorOpacity: style?.opacity,
// 网格半径 表单上为公里单位 米转公里
Expand Down
Loading

0 comments on commit 6b39375

Please sign in to comment.