feat: 中国行政图层支持边界颜色配置 (#152)

* feat: 中国行政图层添加边界颜色配置 * feat: 添加默认值 * fix: 展示逻辑 * fix: 修改 * style: default color --------- Co-authored-by: yxh01132861 <[email protected]> Co-authored-by: lvisei <[email protected]>
antvis · Apr 23, 2024 · f8550d0 · f8550d0
1 parent d35e5eb
commit f8550d0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 4 deletions.
diff --git a/packages/li-analysis-assets/src/layers/ChinaAdminLayer/Component.tsx b/packages/li-analysis-assets/src/layers/ChinaAdminLayer/Component.tsx
@@ -1,7 +1,7 @@
 import type { ChoroplethLayerProps } from '@antv/larkmap';
 import { ChoroplethLayer, TextLayer } from '@antv/larkmap';
 import type { ImplementLayerProps } from '@antv/li-sdk';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ChinaCountryBoundary from './ChinaCountryBoundary';
 import { getAdminBoundaryData } from './helper';
 import type { ChinaAdminLayerSource } from './type';
@@ -14,6 +14,8 @@ export interface ChinaAdminLayerProps extends ChoroplethLayerProps, ImplementLay
   adminLabelStroke: string;
   adminLabelStrokeWidth: number;
   showNationalBorders: boolean;
+  nationalBorderColor: string;
+  coastBorderColor: string;
 }
 
 const ChinaAdminLayer: React.FC<ChinaAdminLayerProps> = (props) => {
@@ -30,6 +32,8 @@ const ChinaAdminLayer: React.FC<ChinaAdminLayerProps> = (props) => {
     adminLabelStroke,
     adminLabelStrokeWidth,
     showNationalBorders,
+    nationalBorderColor = 'red',
+    coastBorderColor = 'blue',
   } = props;
   const [labelData, setLabelData] = useState<Record<string, any>[]>([]);
   const [source, setSource] = useState<ChoroplethLayerProps['source']>();
@@ -68,9 +72,33 @@ const ChinaAdminLayer: React.FC<ChinaAdminLayerProps> = (props) => {
     },
   };
 
+  const chinaBorder = useMemo(() => {
+    return {
+      // 国界
+      national: {
+        color: nationalBorderColor,
+        width: 1,
+        opacity: 1,
+      },
+      // 争议
+      dispute: {
+        color: nationalBorderColor,
+        width: 1,
+        opacity: 0.8,
+        dashArray: [2, 4],
+      },
+      // 海洋
+      coast: {
+        color: coastBorderColor,
+        width: 0.7,
+        opacity: 0.8,
+      },
+    };
+  }, [nationalBorderColor, coastBorderColor]);
+
   return (
     <>
-      {showNationalBorders && <ChinaCountryBoundary visible={visible} />}
+      {showNationalBorders && <ChinaCountryBoundary visible={visible} chinaBorder={chinaBorder} />}
       {source && (
         <ChoroplethLayer
           {...props}

diff --git a/packages/li-analysis-assets/src/layers/ChinaAdminLayer/index.tsx b/packages/li-analysis-assets/src/layers/ChinaAdminLayer/index.tsx
@@ -37,7 +37,7 @@ export default implementLayer({
     opacity: 0.8,
     strokeColor: '#a9abb1',
     lineWidth: 1,
-    lineOpacity: 1,
+    lineOpacity: 0.8,
     label: {
       style: {
         fill: '#a9abb1',
@@ -47,6 +47,8 @@ export default implementLayer({
       },
     },
     showNationalBorders: true,
+    nationalBorderColor: '#606067',
+    coastBorderColor: '#606067',
     state: {
       active: { strokeColor: 'yellow', fillColor: false },
       select: { fillColor: false, strokeColor: 'red' },

diff --git a/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts b/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts
@@ -11,6 +11,8 @@ type ChinaAdminLayerStyleAttributeValue = ChoroplethLayerStyleAttributeValue & {
   adminLabelStroke: string;
   adminLabelStrokeWidth: number;
   showNationalBorders: boolean;
+  nationalBorderColor: string;
+  coastBorderColor: string;
 };
 
 /**
@@ -26,6 +28,8 @@ const toValues = (config: LayerRegisterFormResultType<ChinaAdminLayerStyleAttrib
     adminLabelStroke,
     adminLabelStrokeWidth,
     showNationalBorders,
+    nationalBorderColor,
+    coastBorderColor,
   } = visConfig;
 
   return {
@@ -36,6 +40,8 @@ const toValues = (config: LayerRegisterFormResultType<ChinaAdminLayerStyleAttrib
     adminLabelStroke,
     adminLabelStrokeWidth,
     showNationalBorders,
+    nationalBorderColor,
+    coastBorderColor,
     ...choroplethLayerStyleConfigToFlat(visConfig),
   };
 };
@@ -59,7 +65,7 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Ch
     'adminLabelStroke',
     'adminLabelStrokeWidth',
   ]);
-  const showNationalStyle = pick(values, ['showNationalBorders']);
+  const showNationalStyle = pick(values, ['showNationalBorders', 'coastBorderColor', 'nationalBorderColor']);
 
   return {
     sourceConfig,

diff --git a/...ages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/national-style-schema.ts b/...ages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/national-style-schema.ts
@@ -24,6 +24,42 @@ export default () => {
               'x-component': 'Switch',
               default: true,
             },
+            nationalBorderColor: {
+              type: 'string',
+              title: '国界线',
+              default: 'red',
+              'x-decorator': 'FormItem',
+              'x-component': 'ColorPicker',
+              'x-decorator-props': {},
+              'x-reactions': [
+                {
+                  dependencies: ['showNationalBorders'],
+                  fulfill: {
+                    state: {
+                      visible: '{{ $deps[0] }}',
+                    },
+                  },
+                },
+              ],
+            },
+            coastBorderColor: {
+              type: 'string',
+              title: '海岸线',
+              default: 'blue',
+              'x-decorator': 'FormItem',
+              'x-component': 'ColorPicker',
+              'x-decorator-props': {},
+              'x-reactions': [
+                {
+                  dependencies: ['showNationalBorders'],
+                  fulfill: {
+                    state: {
+                      visible: '{{ $deps[0] }}',
+                    },
+                  },
+                },
+              ],
+            },
           },
         },
       },