feat: 图层气泡 LayerPopup props 中的 config => items，formatField 和 formatValue 支持字符串格式 (#1465)

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>
2022-11-10 19:32:14 +08:00 · 2022-11-10 19:32:14 +08:00 · 0238332e01
parent d54b5d0875
commit 0238332e01
5 changed files with 82 additions and 32 deletions
--- a/dev-demos/layer/popup/layerPopup.tsx
+++ b/dev-demos/layer/popup/layerPopup.tsx
@ -1,12 +1,13 @@
 import {
  GaodeMap,
  LayerPopup,
-  PointLayer,
-  Scene,
  LineLayer,
+  PointLayer,
+  PolygonLayer,
+  Scene,
  // anchorType,
 } from '@antv/l7';
-import { featureCollection, point } from '@turf/turf';
+import { circle, featureCollection, point } from '@turf/turf';
 import React, { useState } from 'react';
 // tslint:disable-next-line:no-duplicate-imports
 import { FunctionComponent, useEffect } from 'react';
@ -26,7 +27,6 @@ const Demo: FunctionComponent = () => {
      }),
      // logoVisible: false,
    });
-
    newScene.on('loaded', () => {
      const pointLayer = new PointLayer({
        name: 'pointLayer',
@ -34,20 +34,49 @@ const Demo: FunctionComponent = () => {
      pointLayer
        .source(
          featureCollection([
-            point([120.104697, 30.260704], {
+            point([120.105697, 30.260704], {
              name: '测试点1',
              lng: 120.104697,
              lat: 30.260704,
            }),
-            point([120.104697, 30.261715], {
-              name: '测试点2',
+            point([120.103697, 30.260704], {
+              name: '测试点1',
              lng: 120.104697,
-              lat: 30.261715,
+              lat: 30.260704,
+            }),
+          ]),
+        )
+        .color('#ffffff')
+        .size(10);
+
+      const polygonLayer = new PolygonLayer({
+        name: 'polygonLayer',
+      });
+      polygonLayer
+        .source(
+          featureCollection([
+            circle([120.104697, 30.260704], 30, {
+              units: 'meters',
+              properties: {
+                name: '测试点1',
+                lng: 120.104697,
+                lat: 30.260704,
+              },
+            }),
+            circle([120.104697, 30.261715], 30, {
+              units: 'meters',
+              properties: {
+                name: '测试点1',
+                lng: 120.104697,
+                lat: 30.260704,
+              },
            }),
          ]),
        )
        .color('#ff0000')
-        .size(10);
+        .size(10)
+        .shape('circle');
+
      const lineString = new LineLayer({
        name: 'lineLayer',
      });
@ -73,9 +102,10 @@ const Demo: FunctionComponent = () => {
        .size(6)
        .color('#00ff00');
      newScene.addLayer(pointLayer);
+      newScene.addLayer(polygonLayer);
      newScene.addLayer(lineString);
      const newPopup = new LayerPopup({
-        config: [
+        items: [
          {
            layer: 'pointLayer',
            fields: [
@ -93,6 +123,10 @@ const Demo: FunctionComponent = () => {
            layer: 'lineLayer',
            fields: ['name'],
          },
+          {
+            layer: 'polygonLayer',
+            fields: ['name'],
+          },
        ],
        trigger: 'hover',
      });
--- a/packages/component/tests/layerPopup.spec.ts
+++ b/packages/component/tests/layerPopup.spec.ts
@ -17,7 +17,7 @@ describe('popup', () => {
    });
    const layerPopup = new LayerPopup({
      className: testClassName,
-      config: [
+      items: [
        {
          layer: pointLayer,
          fields: [
--- a/packages/component/src/popup/layerPopup.ts
+++ b/packages/component/src/popup/layerPopup.ts
@ -7,8 +7,8 @@ import Popup from './popup';

 export type LayerField = {
  field: string;
-  formatField?: (field: string) => string;
-  formatValue?: (value: any) => any;
+  formatField?: ((field: string) => string) | string;
+  formatValue?: ((value: any) => any) | string;
  getValue?: (feature: any) => any;
 };

@ -18,7 +18,8 @@ export type LayerPopupConfigItem = {
 };

 export interface ILayerPopupOption extends IPopupOption {
-  config: LayerPopupConfigItem[];
+  config?: LayerPopupConfigItem[];
+  items?: LayerPopupConfigItem[];
  trigger: 'hover' | 'click';
 }

@ -47,6 +48,11 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
    featureId: number;
  };

+  protected get layerConfigItems() {
+    const { config, items } = this.popupOption;
+    return config ?? items ?? [];
+  }
+
  public addTo(scene: Container) {
    super.addTo(scene);
    this.bindLayerEvent();
@ -91,8 +97,8 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
   * @protected
   */
  protected bindLayerEvent() {
-    const { config, trigger } = this.popupOption;
-    config.forEach((configItem) => {
+    const { trigger } = this.popupOption;
+    this.layerConfigItems.forEach((configItem) => {
      const layer = this.getLayerByConfig(configItem);
      if (!layer) {
        return;
@ -129,8 +135,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
   * @protected
   */
  protected unbindLayerEvent() {
-    const { config } = this.popupOption;
-    config.forEach((configItem) => {
+    this.layerConfigItems.forEach((configItem) => {
      const layer = this.getLayerByConfig(configItem);
      const layerInfo = layer && this.layerConfigMap.get(layer);
      if (!layerInfo) {
@ -218,13 +223,21 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
      fields?.forEach((fieldConfig) => {
        const { field, formatField, formatValue, getValue } =
          typeof fieldConfig === 'string'
-            ? ({ field: fieldConfig } as any)
+            ? // tslint:disable-next-line:no-object-literal-type-assertion
+              ({ field: fieldConfig } as LayerField)
            : fieldConfig;
        const row = DOM.create('div', 'l7-layer-popup__row');
        const value = getValue ? getValue(e.feature) : get(feature, field);
-        row.innerHTML = `${formatField ? formatField(field) : field}: ${
-          formatValue ? formatValue(value) : value
-        }`;
+
+        const fieldText =
+          (formatField instanceof Function
+            ? formatField(field)
+            : formatField) ?? field;
+        const valueText =
+          (formatValue instanceof Function
+            ? formatValue(value)
+            : formatValue) ?? value;
+        row.innerHTML = `${fieldText}: ${valueText}`;
        frag.appendChild(row);
      });
    }
@ -233,11 +246,13 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {

  /**
   * 通过 Layer 配置访问到真实的 Layer 实例
-   * @param config
+   * @param configItem
   * @protected
   */
-  protected getLayerByConfig(config: LayerPopupConfigItem): ILayer | undefined {
-    const layer = config.layer;
+  protected getLayerByConfig(
+    configItem: LayerPopupConfigItem,
+  ): ILayer | undefined {
+    const layer = configItem.layer;
    if (layer instanceof Object) {
      return layer;
    }
@ -257,6 +272,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
   */
  protected isSameFeature(layer: ILayer, featureId: number) {
    const displayFeatureInfo = this.displayFeatureInfo;
+
    return (
      displayFeatureInfo &&
      layer === displayFeatureInfo.layer &&
--- a/packages/site/docs/api/component/popup/layerPopup.zh.md
+++ b/packages/site/docs/api/component/popup/layerPopup.zh.md
@ -47,7 +47,7 @@ scene.on('loaded', () => {
  );
  scene.addLayer(pointLayer);
  const layerPopup = new LayerPopup({
-    config: [
+    items: [
      {
        layer: pointLayer,
        fields: [
@ -68,7 +68,7 @@ scene.on('loaded', () => {

 | 名称    | 说明                                                                                          | 类型                          | 默认值    |
 | ------- | --------------------------------------------------------------------------------------------- | ----------------------------- | --------- |
-| config  | 需要展示 Popup 的图层配置数组，每个选项类型可见 [LayerPopupConfigItem](#layerpopupconfigitem) | `Array<LayerPopupConfigItem>` | `[]`      |
+| items   | 需要展示 Popup 的图层配置数组，每个选项类型可见 [LayerPopupConfigItem](#layerpopupconfigitem) | `Array<LayerPopupConfigItem>` | `[]`      |
 | trigger | 鼠标触发 Popup 展示的方式                                                                     | `'hover' | 'click'`           | `'hover'` |

 ### LayerPopupConfigItem
@ -80,11 +80,11 @@ scene.on('loaded', () => {

 ### LayerField

-| 名称        | 说明                        | 类型                          |
-| ----------- | --------------------------- |-----------------------------|
+| 名称        | 说明                        | 类型                        |
+| ----------- | --------------------------- | --------------------------- |
 | field       | 字段的 key 值字符串         | `string`                    |
-| formatField | 对展示的 key 字段进行格式化 | `(field: string) => string` |
-| formatValue | 对展示的 value 值进行格式化 | `(value: any) => any`       |
+| formatField | 对展示的 key 字段进行格式化 | `(field: string) => string | string` |
+| formatValue | 对展示的 value 值进行格式化 | `(value: any) => any | string`       |
 | getValue    | 自定义获取值的方式          | `(feature: any) => any`     |

 ## 方法
--- a/packages/site/examples/component/popup/demo/layerPopup.ts
+++ b/packages/site/examples/component/popup/demo/layerPopup.ts
@ -77,7 +77,7 @@ scene.on('loaded', () => {
    .shape('circle');
  scene.addLayer(pointLayer);
  const layerPopup = new LayerPopup({
-    config: [
+    items: [
      {
        layer: pointLayer,
        fields: [