From 6b39375c7ba7f14e4cc2c78254cf3816e9d0ba55 Mon Sep 17 00:00:00 2001
From: simplexiao <81275881+simplexiao@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:46:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E5=B1=82=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=94=AF=E6=8C=81=20scale=20=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8C=BA=E9=97=B4=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: yxh01132861 <yxh01132861@antgroup.com>
---
 .../src/widgets/LegendWidget/helper.ts        |  12 +-
 .../H3HexagonLayer/register-form/index.ts     |  39 +++-
 .../layers/MVTLayer/register-form/index.ts    |  39 +++-
 .../LayerAttribute/LayerForm/index.tsx        |  18 +-
 .../LayerAttribute/BubbleLayerStyle/helper.ts |  41 +++-
 .../ChoroplethLayerStyle/helper.ts            |  40 +++-
 .../LayerAttribute/GridLayerStyle/helper.ts   |  40 +++-
 .../LayerAttribute/HexbinLayerStyle/helper.ts |  39 +++-
 .../LayerAttribute/LineLayerStyle/helper.ts   |  40 +++-
 .../LayerAttribute/LineLayerStyle/schema.ts   |  17 +-
 .../common-schema/fill-color-collapse.ts      |  11 +-
 .../CustomItem/Item/index.tsx                 | 129 +++++++++++
 .../CustomItem/Item/style.ts                  |  24 ++
 .../CustomMappingColors/CustomItem/index.tsx  |  89 ++++++++
 .../CustomMappingColors/CustomItem/style.ts   |  63 ++++++
 .../CustomMappingColors/contants.ts           |   4 +
 .../CustomMappingColors/index.tsx             | 212 ++++++++++++++++++
 .../CustomMappingColors/style.ts              |  52 +++++
 .../components/ScaleSelector/constants.ts     |  20 +-
 .../ScaleSelector/demos/default.tsx           |  60 +++++
 .../components/ScaleSelector/helper.ts        | 147 ++++++++++++
 .../components/ScaleSelector/index.md         |  22 ++
 .../components/ScaleSelector/index.tsx        | 151 +++++++++++--
 .../components/ScaleSelector/style.ts         |  41 ++++
 .../components/ScaleSelector/type.ts          |  21 ++
 .../ColorRangeSelector/Internal/index.tsx     |   5 +
 26 files changed, 1274 insertions(+), 102 deletions(-)
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/index.tsx
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/style.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/contants.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/style.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.md
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/style.ts
 create mode 100644 packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts

diff --git a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts
index 8084fb94..3ed2efb7 100644
--- a/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts
+++ b/packages/li-analysis-assets/src/widgets/LegendWidget/helper.ts
@@ -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) {
@@ -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') {
     // 分类图例
     // 对标签进行排序
@@ -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,
diff --git a/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts b/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
index d562193d..8147f618 100644
--- a/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
+++ b/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
@@ -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,
@@ -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],
@@ -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],
diff --git a/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts b/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts
index 86221b22..1d73bca9 100644
--- a/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts
+++ b/packages/li-core-assets/src/layers/MVTLayer/register-form/index.ts
@@ -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:
@@ -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,
@@ -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,
diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
index e598e2d8..c227d81c 100644
--- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
+++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
@@ -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';
@@ -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;
@@ -103,7 +117,7 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
         <StyleForm
           initialValues={initialValues}
           implementLayer={implementLayer}
-          datasetFields={datasetFields}
+          datasetFields={datasetFieldList}
           onChange={handleFormValuesChange}
         />
       )}
diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
index 7b99cdae..e89cf631 100644
--- a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
@@ -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,
@@ -43,6 +52,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
     //   rings: style.animateRings,
     // },
   };
+
   return styleConfig;
 };
 
@@ -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:
@@ -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,
diff --git a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
index a270546a..1097147b 100644
--- a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
@@ -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,
@@ -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:
@@ -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,
diff --git a/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts
index eee65b19..cb574309 100644
--- a/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/GridLayerStyle/helper.ts
@@ -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,
@@ -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:
@@ -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,
     // 网格半径 表单上为公里单位 米转公里
diff --git a/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts
index 231bd923..0e837b1d 100644
--- a/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/HexbinLayerStyle/helper.ts
@@ -4,16 +4,25 @@ import type { HexbinLayerStyleAttributeValue } from './types';
  * 将表单的平铺数据转为图层样式的数据结构
  * */
 export const hexbinLayerStyleFlatToConfig = (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 = {
     shape: 'hexagonColumn' as const,
-    color: style.fillColorField
-      ? {
-          field: style.fillColorField,
-          value: style.fillColorRange.colors,
-          isReversed: style.fillColorRange.isReversed,
-          scale: { type: style.fillColorScale },
-        }
-      : style.fillColor,
+    color: fillColor,
     // 网格半径 表单上为公里单位转化为米
     aggregateSize: Number(style.aggregateSize) * 1000,
     style: {
@@ -35,6 +44,18 @@ export const hexbinLayerStyleFlatToConfig = (style: Record<string, any>) => {
 export const hexbinLayerStyleConfigToFlat = (styleConfig: HexbinLayerStyleAttributeValue) => {
   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:
@@ -45,7 +66,7 @@ export const hexbinLayerStyleConfigToFlat = (styleConfig: HexbinLayerStyleAttrib
             isReversed: color?.isReversed || false,
           }
         : undefined,
-    fillColorScale: typeof color === 'object' ? color?.scale?.type : undefined,
+    fillColorScale,
     fillColor: typeof color !== 'object' ? color : undefined,
     fillColorOpacity: style?.opacity,
     // 网格半径 表单上为公里单位 米转公里
diff --git a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts
index 8b606530..f2267ed1 100644
--- a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts
@@ -5,6 +5,22 @@ import type { LineLayerStyleAttributeValue } from './types';
  * 将表单的平铺数据转为图层样式的数据结构
  * */
 export const lineLayerStyleFlatToConfig = (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: LineLayerStyleAttributeValue = {
     size: style.sizeField
       ? {
@@ -13,14 +29,7 @@ export const lineLayerStyleFlatToConfig = (style: Record<string, any>) => {
         }
       : style.size,
 
-    color: style.fillColorField
-      ? {
-          field: style.fillColorField,
-          value: style.fillColorRange.colors,
-          scale: { type: style.fillColorScale },
-          isReversed: style.fillColorRange.isReversed,
-        }
-      : style.sourceColor,
+    color: fillColor,
     style: {
       opacity: style.fillColorOpacity,
       lineType: 'solid' as const,
@@ -48,6 +57,19 @@ export const lineLayerStyleFlatToConfig = (style: Record<string, any>) => {
  * */
 export const lineLayerStyleConfigToFlat = (styleConfig: LineLayerStyleAttributeValue) => {
   const { size, color, style, minZoom = 0, maxZoom = 24, blend, animate } = 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 = {
     size: typeof size === 'object' ? undefined : size,
     // @ts-ignore
@@ -63,7 +85,7 @@ export const lineLayerStyleConfigToFlat = (styleConfig: LineLayerStyleAttributeV
             isReversed: color?.isReversed || false,
           }
         : undefined,
-    fillColorScale: typeof color === 'object' ? color?.scale?.type : undefined,
+    fillColorScale,
 
     fillColorOpacity: style?.opacity,
 
diff --git a/packages/li-p2/src/LayerAttribute/LineLayerStyle/schema.ts b/packages/li-p2/src/LayerAttribute/LineLayerStyle/schema.ts
index 7558146d..41d17c75 100644
--- a/packages/li-p2/src/LayerAttribute/LineLayerStyle/schema.ts
+++ b/packages/li-p2/src/LayerAttribute/LineLayerStyle/schema.ts
@@ -45,8 +45,11 @@ export default (options: AttributeSchemaOptions = {}) => {
                 'x-component': 'ScaleSelector',
                 'x-component-props': {
                   placeholder: '请选择',
-                  type:
+                  dataType:
                     '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.type })}}',
+                  domain:
+                    '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.domain })}}',
+                  defaultColors: '{{ $form.getFieldState("fillColorRange",state=> { return state?.value?.colors })}}',
                 },
                 'x-decorator-props': {},
                 'x-reactions': [
@@ -60,7 +63,6 @@ export default (options: AttributeSchemaOptions = {}) => {
                   },
                 ],
               },
-
               // 起点颜色选择器
               sourceColor: {
                 title: '起点颜色',
@@ -108,20 +110,21 @@ export default (options: AttributeSchemaOptions = {}) => {
                 type: 'object',
                 title: '颜色',
                 default: {
-                  colors: ['#a6cee3', '#1f78b4', '#b2df8a'],
+                  colors: ['#ffffcc', '#d9f0a3', '#addd8e', '#78c679', '#31a354', '#006837'],
                   isReversed: false,
                 },
                 'x-decorator': 'FormItem',
                 'x-component': 'ColorRangeSelector',
-                'x-component-props': {},
+                'x-component-props': {
+                  options: [...colorRanges],
+                },
                 'x-decorator-props': {},
-                enum: [...colorRanges],
                 'x-reactions': [
                   {
-                    dependencies: ['fillColorField'],
+                    dependencies: ['fillColorField', 'fillColorScale'],
                     fulfill: {
                       state: {
-                        visible: '{{ $deps[0] !== undefined }}',
+                        visible: '{{ $deps[0] !== undefined && !$deps[1].isCustom }}',
                       },
                     },
                   },
diff --git a/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts b/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts
index ed349e40..999ee451 100644
--- a/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts
+++ b/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts
@@ -40,8 +40,11 @@ export default (options: AttributeSchemaOptions) => {
             'x-component': 'ScaleSelector',
             'x-component-props': {
               placeholder: '请选择',
-              type:
+              dataType:
                 '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.type })}}',
+              domain:
+                '{{ $form.getFieldState("fillColorField",state=> { return state.dataSource.find((item) => item.value === state.value)?.domain })}}',
+              defaultColors: '{{ $form.getFieldState("fillColorRange",state=> { return state?.value?.colors })}}',
             },
             'x-decorator-props': {},
             'x-reactions': [
@@ -55,6 +58,7 @@ export default (options: AttributeSchemaOptions) => {
               },
             ],
           },
+
           // 颜色选择器
           fillColor: {
             type: 'string',
@@ -77,6 +81,7 @@ export default (options: AttributeSchemaOptions) => {
               },
             ],
           },
+
           // 色带
           fillColorRange: {
             type: 'object',
@@ -93,10 +98,10 @@ export default (options: AttributeSchemaOptions) => {
             'x-decorator-props': {},
             'x-reactions': [
               {
-                dependencies: ['fillColorField'],
+                dependencies: ['fillColorField', 'fillColorScale'],
                 fulfill: {
                   state: {
-                    visible: '{{ $deps[0] !== undefined }}',
+                    visible: '{{ $deps[0] !== undefined && !$deps[1].isCustom }}',
                   },
                 },
               },
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx
new file mode 100644
index 00000000..647b3d2a
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx
@@ -0,0 +1,129 @@
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import { InputNumber, Select } from 'antd';
+import classnames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import useStyle from './style';
+
+type ItemProps = {
+  customType: 'string' | 'number';
+  value: (string | number)[];
+  options: { label: string; value: string }[];
+  min: number;
+  max: number;
+  position: string | null;
+  onChange: (val: (string | number)[]) => void;
+};
+
+const Item = ({ customType, value, options, min, max, position, onChange }: ItemProps) => {
+  const prefixCls = usePrefixCls('formily-scale-selector__custom-content__custom-item__item');
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [itemVal, setItemVal] = useState<(string | number)[]>(value);
+
+  const onSelectChange = (val: string[]) => {
+    setItemVal(val);
+    onChange(val);
+  };
+
+  const onFirstInputChange = (e: number) => {
+    const val = itemVal?.length === 2 ? [e, itemVal[1]] : [e, Infinity];
+    onChange(val);
+    setItemVal(val);
+  };
+
+  const onLastInputChange = (e: number) => {
+    if (position === 'first') {
+      const val = [-Infinity, e];
+      onChange(val);
+      setItemVal(val);
+    } else if (position === 'last') {
+      const val = [e, Infinity];
+      onChange(val);
+      setItemVal(val);
+    } else {
+      const val = itemVal?.length > 0 ? [itemVal[0], e] : [-Infinity, e];
+      onChange(val);
+      setItemVal(val);
+    }
+  };
+
+  useEffect(() => {
+    setItemVal(value);
+  }, [value]);
+
+  return wrapSSR(
+    <div className={classnames(`${prefixCls}`, hashId)}>
+      {customType === 'string' && (
+        <Select
+          mode="multiple"
+          maxTagCount={1}
+          allowClear
+          style={{ width: '100%' }}
+          placeholder="请选择"
+          value={itemVal as string[]}
+          onChange={onSelectChange}
+          options={options}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        />
+      )}
+
+      {customType === 'number' && (
+        <div className={classnames(`${prefixCls}__input-group`, hashId)}>
+          {position === 'first' && (
+            <>
+              <span style={{ margin: '0 8px' }}>{`<`}</span>
+              <InputNumber
+                size="small"
+                min={min}
+                max={max}
+                value={itemVal?.[1]}
+                className={`${prefixCls}__input-group__input`}
+                onChange={(e) => onLastInputChange(e as number)}
+              />
+            </>
+          )}
+
+          {position === 'last' && (
+            <>
+              <span style={{ margin: '0 8px' }}>{`>`}</span>
+              <InputNumber
+                size="small"
+                min={min}
+                max={max}
+                value={itemVal?.[0]}
+                className={`${prefixCls}__input-group__input`}
+                onChange={(e) => onLastInputChange(e as number)}
+              />
+            </>
+          )}
+
+          {!position && (
+            <>
+              <InputNumber
+                size="small"
+                min={min}
+                max={max}
+                value={itemVal?.[0]}
+                className={`${prefixCls}__input-group__input`}
+                onChange={(e) => onFirstInputChange(e as number)}
+              />
+              <span style={{ margin: '0 8px' }}>-</span>
+              <InputNumber
+                size="small"
+                min={min}
+                max={max}
+                value={itemVal?.[1]}
+                className={`${prefixCls}__input-group__input`}
+                onChange={(e) => onLastInputChange(e as number)}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>,
+  );
+};
+
+export default Item;
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts
new file mode 100644
index 00000000..0a218df3
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts
@@ -0,0 +1,24 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('scale-selector__custom-content__custom-item__item', (token) => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      flex: 1,
+      margin: '0 5px',
+
+      '&__input-group': {
+        width: '100%',
+        textAlign: 'right',
+        display: 'flex',
+        flex: 1,
+        justifyContent: 'space-between',
+
+        '&__input': {
+          maxWidth: 60,
+        },
+      },
+    },
+  };
+});
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/index.tsx
new file mode 100644
index 00000000..29b6f1f1
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/index.tsx
@@ -0,0 +1,89 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import { ColorPicker } from 'antd';
+import type { Color } from 'antd/es/color-picker';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import Item from './Item';
+import useStyle from './style';
+
+type RangeItemProps = {
+  customType: 'string' | 'number';
+  position: string | null;
+  selectedOption: (string | number)[];
+  selectOptions: { label: string; value: string }[];
+  min?: number;
+  max?: number;
+  color: string;
+  value: (string | number)[];
+  onDelete: () => void;
+  onChange: (value: (string | number)[], color: string) => void;
+};
+
+const RangeItem = ({
+  customType,
+  position,
+  selectedOption,
+  selectOptions,
+  color: defaultColor,
+  value: defaultValue,
+  min = 0,
+  max = 100,
+  onDelete,
+  onChange,
+}: RangeItemProps) => {
+  const prefixCls = usePrefixCls('formily-scale-selector__custom-content__custom-item');
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const options = useMemo(() => {
+    if (!selectedOption.length && !defaultValue.length) {
+      return selectOptions;
+    }
+
+    const selected = selectedOption.filter((item) => item && !defaultValue.includes(item));
+    return selectOptions.filter((item) => !selected.includes(item.value));
+  }, [selectedOption, selectOptions, defaultValue]);
+
+  const colorChange = (color: Color) => {
+    onChange?.(defaultValue, color.toHexString());
+  };
+
+  const onValueChange = (_value: (string | number)[]) => {
+    onChange?.(_value, defaultColor);
+  };
+
+  return wrapSSR(
+    <div className={classnames(`${prefixCls}`, hashId)}>
+      <div className={`${prefixCls}__infor`}>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <ColorPicker value={defaultColor ? defaultColor : '#5B8FF9'} onChange={colorChange}>
+            <div className={`${prefixCls}__infor__color`} style={{ background: defaultColor }} />
+          </ColorPicker>
+        </div>
+
+        <div className={`${prefixCls}__infor__content`}>
+          <Item
+            customType={customType}
+            value={defaultValue}
+            options={options}
+            onChange={onValueChange}
+            min={min}
+            max={max}
+            position={position}
+          />
+        </div>
+
+        <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>
+          <DeleteOutlined />
+        </div>
+      </div>
+    </div>,
+  );
+};
+
+export default RangeItem;
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/style.ts
new file mode 100644
index 00000000..5cf986d4
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/style.ts
@@ -0,0 +1,63 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('scale-selector__custom-content__custom-item', (token) => {
+  const { componentCls, antCls, colorInfoTextHover, controlItemBgHover } = token;
+
+  return {
+    [componentCls]: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '3px 2px',
+      borderRadius: '4px',
+
+      [`${componentCls}__infor`]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        cursor: 'pointer',
+
+        '&__color': {
+          width: '32px',
+          height: '18px',
+        },
+
+        '&__content': {
+          flex: 1,
+          width: '100%',
+          overflow: 'hidden',
+        },
+
+        '&__delete-icon': {
+          width: '14px',
+        },
+
+        '&__delete-icon:hover': {
+          color: colorInfoTextHover,
+        },
+      },
+    },
+
+    [`${antCls}-select-dropdown`]: {
+      zIndex: 1,
+    },
+
+    [`${componentCls}:hover`]: {
+      background: controlItemBgHover,
+      [`${componentCls}__drag-icon`]: {
+        opacity: 1,
+      },
+    },
+
+    '.ant-popover': {
+      zIndex: '4 !important',
+      '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': {
+        display: 'none',
+      },
+    },
+
+    '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': {
+      margin: '3px 8px ',
+    },
+  };
+});
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/contants.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/contants.ts
new file mode 100644
index 00000000..067e106f
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/contants.ts
@@ -0,0 +1,4 @@
+export const customTypeList: { label: string; value: 'string' | 'number' }[] = [
+  { label: '枚举', value: 'string' },
+  { label: '数组', value: 'number' },
+];
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
new file mode 100644
index 00000000..cf6320f0
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
@@ -0,0 +1,212 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import classnames from 'classnames';
+import { uniqueId } from 'lodash-es';
+import React, { useEffect, useMemo, useState } from 'react';
+import type { CustomMappingColorItem, CustomMappingData } from '../type';
+import CustomItem from './CustomItem';
+import useStyle from './style';
+
+type CustomMappingColorProps = {
+  dataType: 'string' | 'number';
+  domain: string[] | [number, number];
+  value?: CustomMappingData;
+  onChange: (value: CustomMappingData) => void;
+  className?: string;
+};
+
+const CustomMappingColor = (props: CustomMappingColorProps) => {
+  const { dataType = 'string', domain, value, onChange, className } = props;
+  const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [customRanges, setCustomRanges] = useState<CustomMappingColorItem[]>([]);
+
+  const selectedOption = useMemo(() => {
+    if (dataType === 'string' && customRanges.length) {
+      const values = customRanges.map((item) => item.value).flat();
+      return values;
+    }
+
+    return [];
+  }, [customRanges]);
+
+  const selectOptions = useMemo(() => {
+    if (dataType === 'string') {
+      return (domain as string[]).map((value: string) => ({ label: value, value }));
+    }
+
+    return [];
+  }, [domain]);
+
+  useEffect(() => {
+    if (value?.list?.length) {
+      const list = value.list.map((item: CustomMappingColorItem) => {
+        return {
+          id: uniqueId(),
+          ...item,
+        };
+      });
+      setCustomRanges(list);
+    }
+  }, [value]);
+
+  const addPaletteRangeItem = () => {
+    if (dataType === 'number') {
+      const _item = customRanges[customRanges.length - 1];
+      const min = Number(_item.value[0]);
+      const _interval = Number(((Number(domain[1]) - min) / 2).toFixed(2)) + min;
+
+      const addList: CustomMappingColorItem[] = [
+        {
+          id: _item.id,
+          value: [min, _interval],
+          color: _item.color ?? '#5B8FF9',
+        },
+        {
+          id: uniqueId(),
+          value: [_interval, Infinity],
+          color: _item.color ?? '#5B8FF9',
+        },
+      ];
+      const list = [...customRanges.slice(0, -1), ...addList];
+      setCustomRanges(list);
+    } else {
+      const addItem: CustomMappingColorItem = {
+        id: uniqueId(),
+        value: [],
+        color: customRanges[customRanges.length - 1]?.color ?? '#5B8FF9',
+      };
+
+      const list: CustomMappingColorItem[] = [...customRanges, addItem];
+      setCustomRanges(list);
+    }
+  };
+
+  const deletePaletteRangeItem = (index: number, position: string | null) => {
+    if (dataType === 'number') {
+      const _value = customRanges[index];
+
+      const list: CustomMappingColorItem[] = customRanges
+        .map((item, _index) => {
+          if (index === _index) {
+            return item;
+          }
+
+          if (position !== 'last') {
+            // 下一个
+            if (index + 1 === _index) {
+              return {
+                ...item,
+                value: [_value.value[0], item.value[1]],
+              };
+            }
+
+            return item;
+          } else {
+            //上一个
+            if (index - 1 === _index) {
+              return {
+                ...item,
+                value: [item.value[0], Infinity],
+              };
+            }
+
+            return item;
+          }
+        })
+        .filter((_, _index) => _index !== index);
+
+      setCustomRanges(list);
+    } else {
+      setCustomRanges((pre) => pre.filter((_, _index) => _index !== index));
+    }
+  };
+
+  const onChangePaletteRangeItem = (value: (string | number)[], color: string, index: number) => {
+    if (dataType === 'number') {
+      const list: CustomMappingColorItem[] = customRanges.map((item, _index) => {
+        if (index === _index) {
+          return {
+            ...item,
+            value,
+            color,
+          };
+        }
+
+        if (index - 1 === _index) {
+          return {
+            ...item,
+            value: [item.value[0], value[0]],
+          };
+        }
+
+        if (index + 1 === _index) {
+          return {
+            ...item,
+            value: [value[1], item.value[1]],
+          };
+        }
+
+        return item;
+      });
+
+      setCustomRanges(list);
+    } else {
+      const list: CustomMappingColorItem[] = customRanges.map((item, _index) => {
+        if (index === _index) {
+          return {
+            ...item,
+            value,
+            color,
+          };
+        }
+
+        return item;
+      });
+
+      setCustomRanges(list);
+    }
+  };
+
+  const onSubmit = () => {
+    const list = customRanges.map((item) => {
+      return { value: item.value, color: item.color };
+    });
+    onChange({ type: dataType, list });
+  };
+
+  return wrapSSR(
+    <div className={classnames(`${prefixCls}`, hashId, className)}>
+      {customRanges.map((customItem: CustomMappingColorItem, index: number) => {
+        const [min, max] = domain as [number, number];
+        const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
+
+        return (
+          <CustomItem
+            customType={dataType}
+            key={`drag_card${index}`}
+            color={customItem.color}
+            value={customItem.value}
+            selectedOption={selectedOption}
+            selectOptions={selectOptions}
+            min={min}
+            max={max}
+            position={position}
+            onDelete={() => deletePaletteRangeItem(index, position)}
+            onChange={(value: (string | number)[], color: string) => onChangePaletteRangeItem(value, color, index)}
+          />
+        );
+      })}
+
+      <div onClick={addPaletteRangeItem} className={`${prefixCls}__add-range-item`}>
+        <PlusOutlined /> 添加
+      </div>
+
+      <div className={`${prefixCls}__btn`}>
+        <span onClick={onSubmit}>应用</span>
+      </div>
+    </div>,
+  );
+};
+
+export default CustomMappingColor;
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/style.ts
new file mode 100644
index 00000000..8c088f23
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/style.ts
@@ -0,0 +1,52 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('color-range-selector__custom-range', (token) => {
+  const { componentCls, lineWidth, lineType, colorTextSecondary, colorBorder, colorInfoTextHover } = token;
+
+  return {
+    [componentCls]: {
+      [`${componentCls}__selection-item`]: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '10px',
+        margin: '5px 0',
+        overflow: 'hidden',
+        borderRadius: '4px',
+
+        [`${componentCls}__selection-item-color:nth-child(1)`]: {
+          borderTopLeftRadius: '4px',
+          borderBottomLeftRadius: '4px',
+        },
+        [`${componentCls}__selection-item-color:last-child`]: {
+          borderTopRightRadius: '4px',
+          borderBottomRightRadius: '4px',
+        },
+      },
+
+      [`${componentCls}__add-range-item`]: {
+        cursor: 'pointer',
+        color: colorTextSecondary,
+      },
+
+      [`${componentCls}__btn`]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'right',
+        marginTop: '10px',
+        paddingTop: '10px',
+        textAlign: 'right',
+        borderTop: `${lineWidth}px ${lineType} ${colorBorder}`,
+
+        span: {
+          marginLeft: '20px',
+          color: colorTextSecondary,
+          cursor: 'pointer',
+        },
+
+        'span:hover': {
+          color: colorInfoTextHover,
+        },
+      },
+    },
+  };
+});
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts
index 9903a00e..bbc6fca1 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts
@@ -1,6 +1,12 @@
-import type { ColorScaleSelectOptionType } from './index';
+import type { SelectType } from './type';
 
-export const DEHAULT_OPTIONS: ColorScaleSelectOptionType[] = [
+export const CUSTOM = 'custom';
+
+export const DEHAULT_OPTIONS: {
+  label: string;
+  type: 'number' | 'string';
+  value: SelectType;
+}[] = [
   {
     label: '等间距',
     value: 'quantize',
@@ -16,4 +22,14 @@ export const DEHAULT_OPTIONS: ColorScaleSelectOptionType[] = [
     value: 'cat',
     type: 'string',
   },
+  {
+    label: '自定义分类',
+    value: 'custom',
+    type: 'string',
+  },
+  {
+    label: '自定义分段',
+    value: 'custom',
+    type: 'number',
+  },
 ];
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx
new file mode 100644
index 00000000..84c3f5c4
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx
@@ -0,0 +1,60 @@
+import { Form, FormItem } from '@formily/antd-v5';
+import type { Form as FormInstance } from '@formily/core';
+import { createForm, onFormValuesChange } from '@formily/core';
+import { createSchemaField, FormConsumer } from '@formily/react';
+import React from 'react';
+import { ScaleSelector } from '../../index';
+
+const form = createForm({
+  initialValues: {},
+  effects() {
+    onFormValuesChange((formIns: FormInstance<any>) => {
+      console.log('formIns.values: ', formIns.values);
+    });
+  },
+});
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    ScaleSelector,
+  },
+});
+
+const schema = {
+  type: 'object',
+  properties: {
+    fillColorScale: {
+      type: 'number',
+      title: '颜色划分',
+      default: {
+        type: 'threshold', //选择的筛选字段的类型
+        domain: [3, 5.666666666666666, 8.333333333333332],
+        range: ['#63759a', '#e61486', '#f00', '#faa'],
+      },
+      'x-decorator': 'FormItem',
+      'x-component': 'ScaleSelector',
+      'x-component-props': {
+        placeholder: '请选择',
+        dataType: 'number', //选择的筛选字段的类型
+        domain: [2, 10],
+        defaultColors: ['#f00', '#ff0', '#00f', '#faa'],
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <Form form={form} style={{ width: '300px' }}>
+      <SchemaField schema={schema} />
+      <FormConsumer>
+        {() => (
+          <code>
+            <pre>{JSON.stringify(form.values, null, 2)}</pre>
+          </code>
+        )}
+      </FormConsumer>
+    </Form>
+  );
+};
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
new file mode 100644
index 00000000..01aec9d8
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
@@ -0,0 +1,147 @@
+import { fill } from 'lodash-es';
+import { CUSTOM } from './constants';
+import type { CustomMappingColorItem, CustomMappingData, SelectorValue } from './type';
+
+// 通过自定义颜色映射转换为 Scale 的 domain 与 range 数据
+const getScaleDataByMappingColors = (list: CustomMappingColorItem[]) => {
+  const mapList: { color: string; value: string }[] = [];
+  list.forEach((item) => {
+    item.value.forEach((_item) => {
+      if (_item) {
+        mapList.push({ color: item.color, value: typeof _item === 'string' ? _item : _item.toString() });
+      }
+    });
+  });
+
+  return {
+    domain: mapList.map((item) => item.value),
+    range: mapList.map((item) => item.color),
+  };
+};
+
+// 获取默认展示自定义数据
+export const getDefaultValue = (
+  dataType: 'number' | 'string',
+  defaultDomain: [number, number] | string[],
+  range: string[],
+) => {
+  if (dataType === 'number') {
+    const [min, max] = defaultDomain;
+    // 数值类型计算均分间隔
+    const _interval = (Number(max) - Number(min)) / range.length;
+    // 根据 range 来确定数值长度
+    const _length: number = range.length - 1 > 0 ? range.length - 1 : 0;
+    const _domain = fill(Array(_length), undefined).map((_, index) => {
+      const _value = Number(min) + _interval * (index + 1);
+      return _value % 1 === 0 ? Number(_value) : Number(_value.toFixed(2));
+    });
+
+    const defaultValue: SelectorValue = {
+      isCustom: true,
+      type: 'threshold',
+      domain: _domain,
+      range,
+    };
+
+    return defaultValue;
+  } else {
+    // 数值类型为 string 时
+    const _domain = range.map((item, index) => {
+      if (index + 1 === range.length) {
+        return { color: item, value: defaultDomain.slice(index) };
+      }
+      return { color: item, value: [defaultDomain[index]] };
+    });
+
+    const { domain, range: colors } = getScaleDataByMappingColors(_domain);
+
+    const defaultValue: SelectorValue = {
+      isCustom: true,
+      type: 'cat',
+      domain,
+      range: colors,
+    };
+
+    return defaultValue;
+  }
+};
+
+// 通过自定义颜色映射转换为 Scale 的数据格式
+export const getScaleByCustomMappingData = (val: CustomMappingData) => {
+  const { type, list } = val;
+
+  if (type === 'number') {
+    const range = list.map((item) => item.color);
+    const _val = list.map((item) => Number(item.value[1])).slice(0, -1);
+
+    const scaleValue: SelectorValue = {
+      isCustom: true,
+      type: 'threshold',
+      domain: _val,
+      range,
+    };
+
+    return scaleValue;
+  }
+
+  const { domain, range } = getScaleDataByMappingColors(list);
+  const scaleValue: SelectorValue = {
+    isCustom: true,
+    type: 'cat',
+    domain,
+    range,
+  };
+
+  return scaleValue;
+};
+
+// 通过 Scale 的数据格式转换为自定义颜色映射
+export const getCustomMappingData = (dataType: 'string' | 'number', val: SelectorValue) => {
+  if (!val.isCustom) {
+    return undefined;
+  }
+
+  const { domain = [], range = [] } = val;
+  if (dataType === 'number') {
+    const list = range.map((item: string, index: number) => {
+      return {
+        value: [domain[index - 1] ?? -Infinity, domain[index] ?? Infinity],
+        color: item,
+      };
+    });
+
+    const customMappingData: CustomMappingData = {
+      type: CUSTOM,
+      list,
+    };
+
+    return customMappingData;
+  }
+
+  const list = domain.map((item: string | number, index: number) => {
+    return {
+      value: item,
+      color: range[index],
+    };
+  });
+
+  const result: Record<string, any> = {};
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    if (result[item.color]) {
+      result[item.color] = [...result[item.color], item.value];
+    } else {
+      result[item.color] = [item.value];
+    }
+  }
+
+  const customMappingData: CustomMappingData = {
+    type: CUSTOM,
+    list: Object.keys(result).map((key) => ({
+      color: key,
+      value: result[key],
+    })),
+  };
+
+  return customMappingData;
+};
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.md b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.md
new file mode 100644
index 00000000..74f7457c
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.md
@@ -0,0 +1,22 @@
+---
+toc: content
+order: 9
+group:
+  title: formily 组件
+  order: 1
+nav:
+  title: 组件
+  path: /components
+---
+
+# 颜色划分组件
+
+## 介绍
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx"></code>
+
+<API></API>
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
index 90bba1e0..711008e0 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
@@ -1,42 +1,145 @@
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { connect } from '@formily/react';
-import type { SelectProps } from 'antd';
+import { useUpdateEffect } from 'ahooks';
 import { Select } from 'antd';
-import type { DefaultOptionType } from 'antd/es/select';
-import React, { useEffect, useMemo } from 'react';
+import cls from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
 import { DEHAULT_OPTIONS } from './constants';
+import CustomMappingColor from './CustomMappingColors';
+import { getCustomMappingData, getDefaultValue, getScaleByCustomMappingData } from './helper';
+import useStyle from './style';
+import type { CustomMappingData, SelectorValue, SelectType } from './type';
 
-export interface ColorScaleSelectOptionType extends DefaultOptionType {
-  type: 'string' | 'number';
-}
+type ScaleSelectorProp = {
+  /**
+   * 数据字段类型
+   */
+  dataType: 'string' | 'number';
+  /**
+   * 默认颜色
+   */
+  defaultColors?: string[];
+  /**
+   * 自定义参数值
+   */
+  domain: [number, number] | string[];
+  /**
+   * value
+   */
+  value?: SelectorValue;
+  /**
+   * 选择发生改变时
+   */
+  onChange?: (val: SelectorValue) => void;
+};
+
+const Internal = (props: ScaleSelectorProp) => {
+  const prefixCls = usePrefixCls('formily-scale-selector');
+  const { dataType, value, domain = [], defaultColors = ['#f00', '#ff0', '#00f', '#faa'], onChange } = props;
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
-export type ScaleSelectorProps = SelectProps<string, ColorScaleSelectOptionType> & { type: 'string' | 'number' };
+  const customMappingData = useMemo(() => {
+    if (value) {
+      return getCustomMappingData(dataType, value);
+    }
+  }, [value]);
+
+  const [open, setOpen] = useState(false);
+  const [selectedType, setSelectedType] = useState(value?.isCustom ? 'custom' : value?.type);
 
-const Internal = (props: ScaleSelectorProps) => {
   const selectOptions = useMemo(() => {
-    const options = props.options ?? DEHAULT_OPTIONS;
-    const type = ['string', 'number'].includes(props.type) ? props.type : 'string';
-    return options.filter((item) => item.type === type);
-  }, [props.type, props.options]);
+    const _type = ['string', 'number'].includes(dataType) ? dataType : 'string';
+    return DEHAULT_OPTIONS.filter((item) => item.type === _type);
+  }, [dataType]);
+
+  // 自定义数据变动
+  const onValueChange = (ranges: CustomMappingData) => {
+    const _val = getScaleByCustomMappingData(ranges);
+    onChange?.({ ..._val });
+    setOpen(false);
+  };
 
+  // 类型选择变化
+  const onTypeChange = (type: SelectType) => {
+    setSelectedType(type);
+    if (type === 'custom') {
+      const _defaultValue = getDefaultValue(dataType, domain, defaultColors);
+      if (onChange)
+        onChange({
+          ..._defaultValue,
+        });
+    } else {
+      onChange?.({ isCustom: false, type });
+      setOpen(false);
+    }
+  };
+
+  // dataType 变更，引起可选类型变更，当 scale 为非自定义时自动填充当前类型
   useEffect(() => {
-    if (!props.value || selectOptions.findIndex((item) => item.value === props.value) === -1) {
-      if (props.onChange) {
-        const val = selectOptions[0].value as string;
-        props.onChange(val, selectOptions);
+    if (!value) return;
+    // 非自定义数据
+    if (!value.isCustom) {
+      // 判断 value 类型是否有效
+      const isValid = selectOptions.findIndex((item) => item.value === value.type) === -1;
+      if (isValid) {
+        const val = selectOptions[0].value !== 'custom' ? selectOptions[0].value : undefined;
+        setSelectedType(val);
+        if (val) {
+          onChange?.({ isCustom: false, type: val });
+        }
       }
     }
   }, [selectOptions]);
 
-  return (
-    <Select {...props}>
-      {selectOptions?.map((item, index) => {
+  // 自定义 scale 且数据 domain 发生更新时，自动计算默认值
+  useUpdateEffect(() => {
+    if (selectedType === 'custom' && value?.domain && value.domain.length !== 0) {
+      const range = value.range ? [...new Set(value.range)] : defaultColors;
+      const _defaultValue = getDefaultValue(dataType, domain, range);
+      if (onChange)
+        onChange({
+          ..._defaultValue,
+        });
+    }
+  }, [domain.toString()]);
+
+  return wrapSSR(
+    <Select
+      value={selectedType}
+      open={open}
+      className={cls(`${prefixCls}`, hashId)}
+      onDropdownVisibleChange={(visible) => setOpen(visible)}
+      dropdownRender={() => {
         return (
-          <Select.Option value={item.value} key={index.toString()}>
-            {item.label}
-          </Select.Option>
+          <div className={cls(`${prefixCls}-dropdown`, hashId)}>
+            {selectOptions.map((item) => {
+              return (
+                <div
+                  className={cls(`${prefixCls}-select-option`, hashId, {
+                    [`${prefixCls}-select-option-selected`]: item.value === selectedType,
+                  })}
+                  key={item?.value?.toString()}
+                  onClick={() => onTypeChange(item.value)}
+                >
+                  {item.label}
+                </div>
+              );
+            })}
+
+            {selectedType === 'custom' && customMappingData && (
+              <CustomMappingColor
+                className={`${prefixCls}-customcontent`}
+                dataType={dataType}
+                domain={domain}
+                value={customMappingData}
+                onChange={(ranges: CustomMappingData) => onValueChange(ranges)}
+              />
+            )}
+          </div>
         );
-      })}
-    </Select>
+      }}
+      options={selectOptions}
+    />,
   );
 };
 
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/style.ts
new file mode 100644
index 00000000..b73bb5f6
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/style.ts
@@ -0,0 +1,41 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('scale-selector', (token) => {
+  const { componentCls, controlItemBgHover, controlItemBgActive, colorTextBase } = token;
+
+  return {
+    [componentCls]: {},
+
+    [`${componentCls}-dropdown`]: {
+      padding: '4px',
+
+      [`${componentCls}-custom`]: {
+        padding: '5px 12px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+
+      [`${componentCls}-customcontent`]: {
+        padding: '5px 12px',
+      },
+    },
+
+    [`${componentCls}-select-option`]: {
+      cursor: 'pointer',
+      height: '32px',
+      padding: '5px 12px',
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: colorTextBase,
+
+      '&:hover': {
+        background: controlItemBgHover,
+      },
+    },
+
+    [`${componentCls}-select-option-selected`]: {
+      background: controlItemBgActive,
+    },
+  };
+});
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts
new file mode 100644
index 00000000..21f97257
--- /dev/null
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts
@@ -0,0 +1,21 @@
+export type CustomMappingColorItem = {
+  color: string;
+  value: (string | number)[];
+  id?: string;
+};
+
+export type CustomMappingData = {
+  type: 'number' | 'string' | 'custom';
+  list: CustomMappingColorItem[];
+};
+
+export type SelectType = 'custom' | 'quantize' | 'quantile' | 'cat';
+
+export type SelectorValueType = 'cat' | 'threshold' | 'quantize' | 'quantile';
+
+export type SelectorValue = {
+  type: SelectorValueType;
+  isCustom: boolean;
+  domain?: string[] | number[];
+  range?: string[];
+};
diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx
index c99c24bc..7e311e92 100644
--- a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx
+++ b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx
@@ -10,6 +10,10 @@ import useStyle from './style';
 import type { ColorRange, SelectorValue } from './types';
 
 export interface ColorRangeSelectorProps {
+  /**
+   * 是否可用
+   */
+  disabled?: boolean;
   /**
    * 颜色值
    */
@@ -41,6 +45,7 @@ const Internal = (props: ColorRangeSelectorProps) => {
 
   return wrapSSR(
     <Select
+      disabled={props.disabled}
       className={cls(`${prefixCls}`, hashId)}
       open={open}
       onDropdownVisibleChange={(visible) => setOpen(visible)}