Merge 753f922 into 9e5c833

packages/l7plot/__tests__/unit/layers/icon-layer/index.test.ts

@@ -0,0 +1,55 @@
+import { getLayerStyleAttribute } from '../../../helper/layer';
+import { IconLayer } from '../../../../src/layers/icon-layer';
+import { Source } from '../../../../src/types';
+import { registerImages } from '../../../../src';
+
+describe('icon layer', () => {
+  const images = [
+    { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
+  ];
+  registerImages(images);
+
+  const layer = new IconLayer({
+    source: new Source([], { parser: { type: 'json', x: 'x', y: 'y' } }),
+    size: 12,
+    shape: '02',
+    color: '#fff',
+    style: { opacity: 1, strokeWidth: 1, stroke: 'red' },
+    state: { active: true, select: true },
+  });
+
+  it('type', () => {
+    expect(layer.type).toBe('iconLayer');
+    expect(layer.layer.type).toBe('PointLayer');
+  });
+
+  it('size', () => {
+    expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'size')).toEqual({
+      attributeName: 'size',
+      attributeField: 12,
+    });
+  });
+
+  it('color', () => {
+    expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'color')).toEqual({
+      attributeName: 'color',
+      attributeField: '#fff',
+    });
+  });
+
+  it('shape', () => {
+    expect(getLayerStyleAttribute(layer.layer['pendingStyleAttributes'], 'shape')).toEqual({
+      attributeName: 'shape',
+      attributeField: '02',
+    });
+  });
+
+  it('style', () => {
+    expect(layer.layer['rawConfig']).toMatchObject({ opacity: 1, strokeWidth: 1, stroke: 'red' });
+  });
+
+  it('state', () => {
+    expect(layer.layer['needUpdateConfig'].enableHighlight).toBeTruthy();
+    expect(layer.layer['needUpdateConfig'].enableSelect).toBeTruthy();
+  });
+});

packages/l7plot/src/index.ts

@@ -31,6 +31,9 @@ export { L7Plot } from './plot';
 // 散点图层及类型定义 | author by [yunji]](https://github.com/liuvigongzuoshi)
 export { DotLayer, DotLayerOptions } from './layers/dot-layer';
 
+// 图标图层及类型定义 | author by [yunji]](https://github.com/liuvigongzuoshi)
+export { IconLayer, IconLayerOptions } from './layers/icon-layer';
+
 // 点密度图层及类型定义 | author by [yunji]](https://github.com/liuvigongzuoshi)
 export { DotDensityLayer, DotDensityLayerOptions } from './layers/dot-density-layer';
 

packages/l7plot/src/layers/icon-layer/index.ts

@@ -0,0 +1,21 @@
+import { deepAssign } from '../../utils';
+import { DotLayer } from '../dot-layer';
+import { IconLayerOptions } from './types';
+
+export type { IconLayerOptions };
+
+export class IconLayer extends DotLayer<IconLayerOptions> {
+  /**
+   * 图层类型
+   */
+  public type = DotLayer.LayerType.IconLayer;
+
+  /**
+   * 获取默认配置
+   */
+  public getDefaultOptions(): Partial<IconLayerOptions> {
+    return deepAssign({}, DotLayer.DefaultOptions, {
+      color: undefined,
+    });
+  }
+}

packages/l7plot/src/layers/icon-layer/types.ts

@@ -0,0 +1,13 @@
+import { ShapeAttr, Source, SourceOptions } from '../../types';
+import { DotLayerOptions } from '../dot-layer/types';
+
+export interface IconLayerOptions extends DotLayerOptions {
+  /**
+   * 具体的数据
+   */
+  source: SourceOptions | Source;
+  /**
+   * 图标形状
+   */
+  shape: ShapeAttr<string>;
+}

packages/l7plot/src/plot/types.ts

@@ -11,6 +11,7 @@ import { Choropleth, ChoroplethOptions } from '../plots/choropleth';
 
 import { TextLayer, TextLayerOptions } from '../layers/text-layer';
 import { DotLayer, DotLayerOptions } from '../layers/dot-layer';
+import { IconLayer, IconLayerOptions } from '../layers/icon-layer';
 import { ColumnLayer, ColumnLayerOptions } from '../layers/column-layer';
 import { DotDensityLayer, DotDensityLayerOptions } from '../layers/dot-density-layer';
 import { GridLayer, GridLayerOptions } from '../layers/grid-layer';
@@ -63,6 +64,7 @@ export const PLOTS_MAP = {
 export type LayerConfigType = { id?: string } & (
   | ({ type: 'textLayer' } & TextLayerOptions)
   | ({ type: 'dotLayer' } & DotLayerOptions)
+  | ({ type: 'iconLayer' } & IconLayerOptions)
   | ({ type: 'dotDensity' } & DotDensityLayerOptions)
   | ({ type: 'columnLayer' } & ColumnLayerOptions)
   | ({ type: 'heatmapLayer' } & HeatmapLayerOptions)
@@ -80,6 +82,7 @@ export type LayerConfigType = { id?: string } & (
 export const LAYERS_MAP = {
   [LayerType.TextLayer]: TextLayer,
   [LayerType.DotLayer]: DotLayer,
+  [LayerType.IconLayer]: IconLayer,
   [LayerType.DotDensity]: DotDensityLayer,
   [LayerType.ColumnLayer]: ColumnLayer,
   [LayerType.HeatmapLayer]: HeatmapLayer,

packages/l7plot/src/types/layer.ts

@@ -307,6 +307,7 @@ export interface IPLotLayer {
 export enum LayerType {
   TextLayer = 'textLayer',
   DotLayer = 'dotLayer',
+  IconLayer = 'iconLayer',
   DotDensity = 'dotDensityLayer',
   ColumnLayer = 'columnLayer',
   HeatmapLayer = 'heatmapLayer',

website/docs/api/layers/icon-layer.en.md

@@ -0,0 +1,6 @@
+---
+title: IconLayer
+order: 2
+---
+
+`markdown:docs/api/layers/icon-layer.zh.md`

website/docs/api/layers/icon-layer.zh.md

@@ -0,0 +1,74 @@
+---
+title: 图标图层 - IconLayer
+order: 2
+---
+
+`IconLayer` 继承基类 [PlotLayer](/zh/docs/api/layers/plot-layer)。
+
+## 一、配置
+
+`markdown:docs/common/layers/dot-layer/source.zh.md`
+
+### `options.`shape
+
+`string` required
+
+图标形状，使用方法如下：
+
+1. 注册图标
+
+```js
+const images = [
+  { id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
+  { id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
+  { id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
+];
+registerImages(images);
+```
+
+2. 使用注册图标
+
+```js
+{
+  source: {
+    data: [{ lng: 104.101, lat: 30.649, s: '01', t: 21,  n: 'chengdu' }],
+    parser: { type: 'json', x: 'lng', y: 'lat' }
+  },
+  shape: 's',
+}
+```
+
+自定义映射图标
+
+```js
+{
+  shape: {
+    field: 't',
+    value: ({ t }) => {
+      return t > 20 ? '01': '02'
+    }
+  }
+}
+```
+
+`markdown:docs/common/layers/dot-layer/shape.zh.md`
+
+`markdown:docs/common/attribute/color.zh.md`
+
+`markdown:docs/common/layers/dot-layer/size.zh.md`
+
+`markdown:docs/common/layers/dot-layer/style.zh.md`
+
+`markdown:docs/common/attribute/state.zh.md`
+
+## 二、属性
+
+继承 [PlotLayer 属性](/zh/docs/api/layers/plot-layer#二、属性)。
+
+## 三、方法
+
+继承 [PlotLayer 方法](/zh/docs/api/layers/plot-layer#三、方法)。
+
+## 四、事件
+
+继承 [PlotLayer 方法](/zh/docs/api/layers/plot-layer#四、事件)。

website/docs/api/layers/prism-layer.zh.md

@@ -29,7 +29,7 @@ order: 9
 
 ```js
 {
-  size: { fied: 't' },
+  size: { field: 't' },
 }
 ```
 
@@ -42,7 +42,7 @@ order: 9
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 15 : 12
     }
@@ -57,7 +57,7 @@ order: 9
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: [120, 250],
     scale: { type: 'quantile' },
   }

website/docs/common/attribute/color.zh.md

@@ -16,7 +16,7 @@
 
 ```js
 {
-  color: { fied: 'c', }
+  color: { field: 'c', }
 }
 ```
 
@@ -29,7 +29,7 @@
 ```js
 {
   color: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 'red': 'blue'
     }
@@ -44,7 +44,7 @@
 ```js
 {
   color: {
-    fied: 't',
+    field: 't',
     value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
     scale: { type: 'quantile' }
   }

website/docs/common/layers/arc-layer/size.zh.md

@@ -20,7 +20,7 @@
     data: [{ startX: 58.00, startY: 32.84, endX: 85.7, endY: 25.161, c: 'red', t: 20, n: 'chengdu' }],
     parser: { type: 'json', x: 'startX', y: 'startY', x: 'endX', y: 'endY', }
   },
-  size: { fied: 't', }
+  size: { field: 't', }
 }
 ```
 
@@ -33,7 +33,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 15 : 12
     }
@@ -48,7 +48,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: [12, 15],
     scale: { type: 'quantile' }
   }

website/docs/common/layers/dot-layer/shape.zh.md

@@ -62,7 +62,7 @@ registerImages(images);
     data: [{ lng: 104.101, lat: 30.649, s: 'circle', t: 24.6, n: 'chengdu' }],
     parser: { type: 'json', x: 'lng', y: 'lat' }
   },
-  shape: { fied: 's', }
+  shape: { field: 's', }
 }
 ```
 
@@ -75,7 +75,7 @@ registerImages(images);
 ```js
 {
   shape: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 'triangle': 'circle'
     }
@@ -90,7 +90,7 @@ registerImages(images);
 ```js
 {
   shape: {
-    fied: 't',
+    field: 't',
     value: ['circle', 'triangle'],
     scale: { type: 'quantile' }
   }

website/docs/common/layers/dot-layer/size.zh.md

@@ -20,7 +20,7 @@
     data: [{ lng: 104.101, lat: 30.649, s: 12, t: 20, n: 'chengdu' }],
     parser: { type: 'json', x: 'lng', y: 'lat' }
   },
-  size: { fied: 's' },
+  size: { field: 's' },
 }
 ```
 
@@ -33,7 +33,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 15 : 12
     }
@@ -48,7 +48,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: [12, 15],
     scale: { type: 'quantile' },
   }

website/docs/common/layers/path-layer/size.zh.md

@@ -16,7 +16,7 @@
 
 ```js
 {
-  size: { fied: 't', }
+  size: { field: 't', }
 }
 ```
 
@@ -29,7 +29,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: ({ t }) => {
       return t > 20 ? 15 : 12
     }
@@ -44,7 +44,7 @@
 ```js
 {
   size: {
-    fied: 't',
+    field: 't',
     value: [12, 15],
     scale: { type: 'quantile' },
   }