feat: 图层显隐控件新增多选模式

antvis · Dec 26, 2023 · eac37bc · eac37bc
1 parent 4179add
commit eac37bc
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@antv/dumi-theme-antv": "^0.2.2",
-    "@antv/l7": "^2.20.10",
+    "@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
@@ -44,7 +44,7 @@ export default () => {
     <LarkMap mapType="Gaode" style={{ height: '400px' }}>
       <PolygonLayer id="fillLayer" name="填充图层" {...polygonLayerOptions} source={source} />
       <PolygonLayer id="strokeLayer" name="描边图层" {...lineLayerOptions} source={source} />
-      <LayerSwitchControl layers={['fillLayer', 'strokeLayer']} multiple={false} />
+      <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
 
 | 参数 | 说明 | 类型 | 默认值 |