diff --git a/dev-demos/layer/popup/layerPopup.tsx b/dev-demos/layer/popup/layerPopup.tsx index 8aab616776..c16fef1c05 100644 --- 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', }); diff --git a/packages/component/__tests__/layerPopup.spec.ts b/packages/component/__tests__/layerPopup.spec.ts index 6736147df7..29b34e2045 100644 --- 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: [ diff --git a/packages/component/src/popup/layerPopup.ts b/packages/component/src/popup/layerPopup.ts index 8e1aa70d2d..1610817946 100644 --- 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 { 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 { * @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 { * @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 { 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 { /** * 通过 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 { */ protected isSameFeature(layer: ILayer, featureId: number) { const displayFeatureInfo = this.displayFeatureInfo; + return ( displayFeatureInfo && layer === displayFeatureInfo.layer && diff --git a/packages/site/docs/api/component/popup/layerPopup.zh.md b/packages/site/docs/api/component/popup/layerPopup.zh.md index 902de99111..f6bce6cd35 100644 --- 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` | `[]` | +| items | 需要展示 Popup 的图层配置数组，每个选项类型可见 [LayerPopupConfigItem](#layerpopupconfigitem) | `Array` | `[]` | | 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` | ## 方法 diff --git a/packages/site/examples/component/popup/demo/layerPopup.ts b/packages/site/examples/component/popup/demo/layerPopup.ts index 78bb128e7a..d1bdd6dc5c 100644 --- 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: [