feat: 添加图例组件 (#55)

src/components/LegendCategories/demos/default.tsx

@@ -0,0 +1,31 @@
+import { LegendCategories } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'auto auto auto auto', gap: 20 }}>
+      <LegendCategories
+        isStrokeColor
+        labels={['Category a', 'Category B', 'Category C']}
+        colors={{ startColor: 'rgb(176, 242, 188)', endColor: 'rgb(37, 125, 152)' }}
+      />
+      <LegendCategories
+        geometryType="circle"
+        labels={['Category a', 'Category B', 'Category C']}
+        colors={['#f0f723', '#f8a53c', '#d8586a']}
+      />
+      <LegendCategories
+        geometryType="square"
+        isStrokeColor
+        labels={['Category a', 'Category B', 'Category C']}
+        colors={['#f0f723', '#f8a53c', '#d8586a']}
+      />
+
+      <LegendCategories
+        geometryType="square"
+        labels={['Category a', 'Category B', 'Category C']}
+        colors={['#f0f723', '#f8a53c', '#d8586a']}
+      />
+    </div>
+  );
+};

src/components/LegendCategories/demos/map-default.tsx

@@ -0,0 +1,25 @@
+import { LegendCategories, LarkMap, CustomControl } from '@antv/larkmap';
+import React from 'react';
+
+const config = {
+  mapType: 'GaodeV1' as const,
+  mapOptions: {
+    style: 'light',
+    center: [120.210792, 30.246026] as [number, number],
+    zoom: 9,
+    // token: 'xxxx - token',
+  },
+};
+export default () => {
+  return (
+    <LarkMap {...config} style={{ height: '300px' }}>
+      <CustomControl position="bottomleft">
+        <LegendCategories
+          style={{ background: '#fff', padding: 8 }}
+          labels={['Category A', 'Category B', 'Category C']}
+          colors={{ startColor: 'rgb(176, 242, 188)', endColor: 'rgb(37, 125, 152)' }}
+        />
+      </CustomControl>
+    </LarkMap>
+  );
+};

src/components/LegendCategories/index.less

@@ -0,0 +1,30 @@
+@cls-prefix: larkmap-legend-category;
+
+.@{cls-prefix} {
+  &__content {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    &__labels {
+      letter-spacing: 2;
+      text-transform: uppercase;
+      font-family: PingFangSC;
+      line-height: 2;
+    }
+
+    &__shape {
+      margin-right: 15px;
+    }
+
+    &__square {
+      width: 32px;
+      height: 15px
+    }
+
+    &__circle {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+    }
+  }
+}

src/components/LegendCategories/index.md

@@ -0,0 +1,28 @@
+---
+toc: content
+order: 5
+group:
+  title: 分析组件
+  order: 3
+nav:
+  title: 组件
+  path: /components
+---
+
+# 分类图例 - LegendCategories
+
+## 介绍
+
+分类图例
+
+## 代码演示
+
+### 默认演示
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+### 在地图中展示
+
+<code src="./demos/map-default.tsx" defaultShowCode></code>
+
+<API></API>

src/components/LegendCategories/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import classnames from 'classnames';
+import { getGradientColors } from './../../utils/color';
+import './index.less';
+import type { LegendCategoriesProps } from './types';
+
+export const CLS_PREFIX = 'larkmap-legend-category';
+
+export function LegendCategories(props: LegendCategoriesProps) {
+  const { labels, colors, geometryType = 'circle', isStrokeColor, style, className: cls_name } = props;
+
+  function getColor(item: string) {
+    return isStrokeColor ? { border: `2px solid ${item}` } : { background: item };
+  }
+
+  function Conent(color: string[]) {
+    return (
+      <div className={classnames(CLS_PREFIX, cls_name)} style={style}>
+        {labels.map((item, index) => (
+          <div className={`${CLS_PREFIX}__content`} key={item}>
+            <div
+              className={classnames(`${CLS_PREFIX}__content__shape`, {
+                [`${CLS_PREFIX}__content__${geometryType}`]: geometryType,
+              })}
+              style={getColor(color[index])}
+            />
+            <div className={`${CLS_PREFIX}labels`}>{item}</div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  function Renders() {
+    if (Array.isArray(colors)) {
+      return Conent(colors);
+    }
+    const colorGradient = getGradientColors(colors.startColor, colors.endColor, labels.length);
+    return Conent(colorGradient);
+  }
+  return <Renders />;
+}
+
+LegendCategories.defaultProps = {
+  geometryType: 'circle',
+  isStrokeColor: false,
+};

src/components/LegendCategories/types.ts

@@ -0,0 +1,18 @@
+import type { CommonProps } from '../../types/common';
+
+export interface LegendCategoriesProps extends CommonProps {
+  /**
+   * 图形形状
+   *  @default "circle"
+   */
+  geometryType?: 'circle' | 'square';
+  /** 图例项名称 */
+  labels: string[];
+  /** 图例项颜色 */
+  colors: string[] | { startColor: string; endColor: string };
+  /**
+   * 是否颜色填充
+   * @default false
+   */
+  isStrokeColor?: boolean;
+}

src/components/LegendIcon/demos/default.tsx

@@ -0,0 +1,17 @@
+import { LegendIcon } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <div>
+      <LegendIcon
+        labels={['枫叶图标', '火车图标', '小汽车图标']}
+        icons={[
+          'https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*6ONoRKNECC0AAAAAAAAAAAAAARQnAQ',
+          'https://gw.alipayobjects.com/zos/bmw-prod/e21321e0-8f4a-474f-a0ee-2176492bb824.svg',
+          'https://gw.alipayobjects.com/zos/bmw-prod/7fb22e05-4488-4597-8e33-fc03716d2b0a.svg',
+        ]}
+      />
+    </div>
+  );
+};

src/components/LegendIcon/demos/map-default.tsx

@@ -0,0 +1,29 @@
+import { LegendIcon, LarkMap, CustomControl } from '@antv/larkmap';
+import React from 'react';
+
+const config = {
+  mapType: 'GaodeV1' as const,
+  mapOptions: {
+    style: 'light',
+    center: [120.210792, 30.246026] as [number, number],
+    zoom: 9,
+    // token: 'xxxx - token',
+  },
+};
+export default () => {
+  return (
+    <LarkMap {...config} style={{ height: '300px' }}>
+      <CustomControl position="bottomleft">
+        <LegendIcon
+          style={{ background: '#fff', padding: 8 }}
+          labels={['枫叶图标', '火车图标', '小汽车图标']}
+          icons={[
+            'https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*6ONoRKNECC0AAAAAAAAAAAAAARQnAQ',
+            'https://gw.alipayobjects.com/zos/bmw-prod/e21321e0-8f4a-474f-a0ee-2176492bb824.svg',
+            'https://gw.alipayobjects.com/zos/bmw-prod/7fb22e05-4488-4597-8e33-fc03716d2b0a.svg',
+          ]}
+        />
+      </CustomControl>
+    </LarkMap>
+  );
+};

src/components/LegendIcon/index.less

@@ -0,0 +1,15 @@
+@cls-prefix: larkmap-legend-icon;
+
+.@{cls-prefix} {
+  &__content {
+    display: flex;
+    align-items: center;
+    line-height: 2;
+
+    &__icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 10px
+    }
+  }
+}

src/components/LegendIcon/index.md

@@ -0,0 +1,28 @@
+---
+toc: content
+order: 6
+group:
+  title: 分析组件
+  order: 3
+nav:
+  title: 组件
+  path: /components
+---
+
+# 图标图例 - LegendIcon
+
+## 介绍
+
+图标图例
+
+## 代码演示
+
+### 默认演示
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+### 在地图中展示
+
+<code src="./demos/map-default.tsx" defaultShowCode></code>
+
+<API></API>

src/components/LegendIcon/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import classnames from 'classnames';
+import type { LegendIconProps } from './types';
+import './index.less';
+
+export const CLS_PREFIX = 'larkmap-legend-icon';
+
+export const LegendIcon = (props: LegendIconProps) => {
+  const { labels, icons, className: cls, style } = props;
+  return (
+    <div className={classnames(`${CLS_PREFIX}`, cls)} style={style}>
+      {labels.map((item, index) => (
+        <div key={item} className={`${CLS_PREFIX}__content`}>
+          <img src={icons[index]} className={`${CLS_PREFIX}__content__icon`} />
+          <div>{item}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/LegendIcon/types.ts

@@ -0,0 +1,8 @@
+import type { CommonProps } from '../../types/common';
+
+export interface LegendIconProps extends CommonProps {
+  /** 图例项名称 */
+  labels: string[];
+  /** 图例项图标 */
+  icons: string[];
+}

src/components/LegendProportion/demos/default.tsx

@@ -0,0 +1,12 @@
+import { LegendProportion } from '@antv/larkmap';
+import React from 'react';
+import './index.less';
+
+export default () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'auto auto', gap: 20 }}>
+      <LegendProportion labels={[0, 2000]} fillColor="#BF7C00" className="demo_cls" />
+      <LegendProportion labels={[100, 1000]} />
+    </div>
+  );
+};

src/components/LegendProportion/demos/index.less

@@ -0,0 +1,6 @@
+.demo_cls{
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 5px;
+  width: 160px;
+}

src/components/LegendProportion/demos/map-default.tsx

@@ -0,0 +1,22 @@
+import { LegendProportion, LarkMap, CustomControl } from '@antv/larkmap';
+import React from 'react';
+import './index.less';
+
+const config = {
+  mapType: 'GaodeV1' as const,
+  mapOptions: {
+    style: 'light',
+    center: [120.210792, 30.246026] as [number, number],
+    zoom: 9,
+    // token: 'xxxx - token',
+  },
+};
+export default () => {
+  return (
+    <LarkMap {...config} style={{ height: '300px' }}>
+      <CustomControl position="bottomleft">
+        <LegendProportion labels={[0, 2000]} fillColor="#BF7C00" className="demo_cls" />
+      </CustomControl>
+    </LarkMap>
+  );
+};

src/components/LegendProportion/index.less

@@ -0,0 +1,24 @@
+@cls-prefix: larkmap-legend-proportion;
+
+.@{cls-prefix} {
+  display: flex;
+  align-items: flex-end;
+
+  &__circlebox {
+    position: relative;
+    display: flex;
+    justify-content: end;
+    align-items: end;
+    margin-right: 10px;
+
+    &__item {
+      border-radius: 50%;
+      position: absolute;
+      border: 1px solid #e1e3e4;
+    }
+  }
+
+  &__labelitem{
+    font-size: 14px;
+  }
+}