feat: 图层显隐控件增加multiple属性 (#206)

* feat: 图层显隐控件增加multiple属性 * feat: 图层显隐控件新增多选模式 --------- Co-authored-by: 谨欣 <echo.cmy@antgroup.com>
antvis · Dec 26, 2023 · c703109 · c703109
1 parent ba60be0
commit c703109
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "prepare": "husky install",
-    "start": "dumi dev",
+    "start": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev",
     "lint": "run-p lint:*",
     "lint:ts": "eslint src __tests__ --ext .ts,.tsx --ignore-pattern 'src/**/demos/'",
     "lint:style": "stylelint --fix src/**/*.less",
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@antv/dumi-theme-antv": "^0.2.2",
-    "@antv/l7": "^2.11.0",
+    "@antv/l7": "^2.20.11",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
     "@types/color": "^3.0.3",

diff --git a/src/components/Control/LayerSwitchControl/demos/default.tsx b/src/components/Control/LayerSwitchControl/demos/default.tsx
@@ -42,9 +42,9 @@ export default () => {
 
   return (
     <LarkMap mapType="Gaode" style={{ height: '400px' }}>
-      <LayerSwitchControl layers={['fillLayer', 'strokeLayer']} />
       <PolygonLayer id="fillLayer" name="填充图层" {...polygonLayerOptions} source={source} />
       <PolygonLayer id="strokeLayer" name="描边图层" {...lineLayerOptions} source={source} />
+      <LayerSwitchControl layers={['fillLayer', 'strokeLayer']} />
     </LarkMap>
   );
 };
diff --git a/src/components/Control/LayerSwitchControl/demos/singleSelection.tsx b/src/components/Control/LayerSwitchControl/demos/singleSelection.tsx
@@ -0,0 +1,55 @@
+import { LarkMap, LayerSwitchControl, RasterLayer, useLayer } from '@antv/larkmap';
+import React from 'react';
+
+const GOOGLE_TILE_MAP_URL = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}';
+
+const GOOGLE_TILE_MAP_ROUTER_URL = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}';
+
+const CustomComponent = () => {
+  const googleTileMap = useLayer('googleTileMap');
+  const googleTileMapRouter = useLayer('googleTileMapRouter');
+
+  return (
+    <LayerSwitchControl
+      multiple={false}
+      layers={[
+        {
+          layer: googleTileMap,
+          name: '遥感影像图层',
+          img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*fG9HQpyNuv0AAAAAAAAAAAAADjWqAQ/original',
+        },
+        {
+          layer: googleTileMapRouter,
+          name: '文字标注图层',
+          img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*CP5pQY_8Q_YAAAAAAAAAAAAADjWqAQ/original',
+        },
+      ]}
+    />
+  );
+};
+
+export default () => {
+  return (
+    <LarkMap mapType="Gaode" style={{ height: '400px' }}>
+      <RasterLayer
+        key={GOOGLE_TILE_MAP_URL}
+        zIndex={1}
+        id="googleTileMap"
+        source={{
+          data: GOOGLE_TILE_MAP_URL,
+          parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0 },
+        }}
+      />
+      <RasterLayer
+        key={GOOGLE_TILE_MAP_ROUTER_URL}
+        zIndex={1}
+        id="googleTileMapRouter"
+        source={{
+          data: GOOGLE_TILE_MAP_ROUTER_URL,
+          parser: { type: 'rasterTile', tileSize: 256, zoomOffset: 0 },
+        }}
+      />
+      <CustomComponent />
+    </LarkMap>
+  );
+};
diff --git a/src/components/Control/LayerSwitchControl/index.md b/src/components/Control/LayerSwitchControl/index.md
@@ -17,10 +17,18 @@ nav:
 
 ### 代码演示
 
+##### 文案选项、多选模式
+
 <code src="./demos/default.tsx" defaultShowCode compact></code>
 
+##### 图片选项、多选模式
+
 <code src="./demos/layerSwitchItem.tsx" defaultShowCode compact></code>
 
+#### 图片选项、单选模式
+
+<code src="./demos/singleSelection.tsx" defaultShowCode compact></code>
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -33,6 +41,7 @@ nav:
 | btnText | 按钮内容文本 | `string` | - |
 | title | 按钮的 title 属性 | `string` | `'图层控制'` |
 | vertical | 在 btnIcon 有值的情况下，按钮内的图标和文案是否纵向排列 | `boolean` | `false` |
+| multiple | 控件内的图层选项是否多选，单选模式下默认展示第一个选项对应的图层 | `boolean` | `true` |
 | position | 控件被添加到地图中的位置以及排列方式，详情可见 [控件插槽](https://l7.antv.antgroup.com/api/component/control/control#插槽) | [Position](#position) | `'topright'` |
 | className | 自定义样式名 | `string` | - |
 | style | 自定义样式 | `CSSProperties` | - |

diff --git a/src/components/Control/LayerSwitchControl/index.tsx b/src/components/Control/LayerSwitchControl/index.tsx
@@ -19,6 +19,7 @@ export const LayerSwitchControl: React.FC<LayerSwitchControlProps> = ({
   position,
   className,
   style,
+  multiple,
   onAdd,
   onRemove,
   onShow,
@@ -58,6 +59,7 @@ export const LayerSwitchControl: React.FC<LayerSwitchControlProps> = ({
       vertical,
       position,
       className,
+      multiple,
       style: styleText,
       btnIcon: btnIconDOM,
     };
@@ -71,6 +73,7 @@ export const LayerSwitchControl: React.FC<LayerSwitchControlProps> = ({
     vertical,
     position,
     className,
+    multiple,
     styleText,
     btnIconDOM,
   ]);