From 862c0e74fb65045728fc42d967718590979c7768 Mon Sep 17 00:00:00 2001 From: yanxiong Date: Wed, 15 May 2024 14:28:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Popup=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9B=B4=E6=96=B0=20className=20=E5=92=8C=20?= =?UTF-8?q?style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/curly-ligers-tap.md | 5 ++++ examples/demos/components/index.ts | 1 + examples/demos/components/popup.ts | 36 +++++++++++++++++++++++++++ packages/component/src/popup/popup.ts | 12 +++++++-- 4 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 .changeset/curly-ligers-tap.md create mode 100644 examples/demos/components/popup.ts diff --git a/.changeset/curly-ligers-tap.md b/.changeset/curly-ligers-tap.md new file mode 100644 index 0000000000..7215f2c2d2 --- /dev/null +++ b/.changeset/curly-ligers-tap.md @@ -0,0 +1,5 @@ +--- +'@antv/l7-component': patch +--- + +popup 更新支持 className 和 style diff --git a/examples/demos/components/index.ts b/examples/demos/components/index.ts index ec619f5787..fa227e6b03 100644 --- a/examples/demos/components/index.ts +++ b/examples/demos/components/index.ts @@ -1,4 +1,5 @@ export { MapRender as control } from './control'; export { MapRender as layerPopup } from './layerPopup'; export { MapRender as marker } from './marker'; +export { MapRender as popup } from './popup'; export { MapRender as swipe } from './swipe'; diff --git a/examples/demos/components/popup.ts b/examples/demos/components/popup.ts new file mode 100644 index 0000000000..8f2a66e6b3 --- /dev/null +++ b/examples/demos/components/popup.ts @@ -0,0 +1,36 @@ +import { Popup, Scene } from '@antv/l7'; +import * as allMap from '@antv/l7-maps'; +import type { RenderDemoOptions } from '../../types'; + +export function MapRender(options: RenderDemoOptions) { + const scene = new Scene({ + id: 'map', + renderer: options.renderer, + map: new allMap.GaodeMap({ + style: 'light', + center: [121.435159, 31.256971], + zoom: 14.89, + minZoom: 10, + }), + }); + scene.on('loaded', () => { + const popup = new Popup({ + lngLat: { + lng: 121.435159, + lat: 31.256971, + }, + html: '
123456
', + className: String(Math.random()), + style: `z-index: ${String(Math.random())}`, + }); + + setInterval(() => { + popup.setOptions({ + className: String(Math.random()), + style: `z-index: ${String(Math.floor(Math.random() * 100))}`, + }); + }, 2000); + + scene.addPopup(popup); + }); +} diff --git a/packages/component/src/popup/popup.ts b/packages/component/src/popup/popup.ts index 4fa34305a9..04abcd23f3 100644 --- a/packages/component/src/popup/popup.ts +++ b/packages/component/src/popup/popup.ts @@ -168,6 +168,7 @@ export default class Popup public setOptions(option: Partial) { this.show(); + const { className: oldClassName } = this.popupOption; this.popupOption = { ...this.popupOption, ...option, @@ -182,8 +183,6 @@ export default class Popup 'maxWidth', 'anchor', 'stopPropagation', - 'className', - 'style', 'lngLat', 'offsets', ]) @@ -216,6 +215,15 @@ export default class Popup } else if (this.checkUpdateOption(option, ['text']) && option.text) { this.setText(option.text); } + if (this.checkUpdateOption(option, ['className'])) { + if (oldClassName) { + this.container.classList.remove(oldClassName ?? ''); + } + this.container.classList.add(option.className ?? ''); + } + if (this.checkUpdateOption(option, ['style'])) { + DOM.addStyle(this.container, option.style ?? ''); + } if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) { this.setLnglat(option.lngLat); } From b8fcb324892454f2564ead641b1a8238b5375f88 Mon Sep 17 00:00:00 2001 From: heiyexing <496845051@qq.com> Date: Thu, 23 May 2024 12:00:42 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20district-data=20=E4=B8=8B=E6=9E=B6?= =?UTF-8?q?=20wgs84=20=E8=AF=B4=E6=98=8E=E5=92=8C=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/.dumi/pages/custom/docs/sdk.md | 4 ++-- site/.dumi/pages/custom/docs/service.md | 5 ++--- site/maptools/demo/index.tsx | 14 ++++++++++---- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/site/.dumi/pages/custom/docs/sdk.md b/site/.dumi/pages/custom/docs/sdk.md index dd8355d48f..4cc8c07df0 100644 --- a/site/.dumi/pages/custom/docs/sdk.md +++ b/site/.dumi/pages/custom/docs/sdk.md @@ -36,7 +36,7 @@ npm i district-data ### option - version 数据版本 -- type 数据格式 `'wgs84' | 'gcj02'` +- type 坐标系 **注意在使用 `type` 之前请保证 `version` 为 `2024` 及以上。** @@ -44,7 +44,7 @@ npm i district-data import { RDBSource } from 'district-data'; const source = new RDBSource({ version: 2024, - type: 'wgs84', + type: 'gcj02', // 默认 }); ``` diff --git a/site/.dumi/pages/custom/docs/service.md b/site/.dumi/pages/custom/docs/service.md index 74d84442c7..8bbb6e6daf 100644 --- a/site/.dumi/pages/custom/docs/service.md +++ b/site/.dumi/pages/custom/docs/service.md @@ -28,7 +28,7 @@ version 为 2024 及以上时也可使用以下数据服务 - 'district' - 'jiuduanxian' -#### version +#### version 数据版本 - 2023 - 2022 @@ -40,9 +40,8 @@ version 为 2024 及以上时也可使用以下数据服务 - 2016 - 2015 -#### type +#### type 坐标系 -- 'wgs84' - 'gcj02' ### 数据获取 diff --git a/site/maptools/demo/index.tsx b/site/maptools/demo/index.tsx index 8f6f20e7ca..aa3fd88803 100644 --- a/site/maptools/demo/index.tsx +++ b/site/maptools/demo/index.tsx @@ -8,6 +8,7 @@ import { DownloadOutlined, InfoCircleOutlined, PictureOutlined, + QuestionCircleOutlined, } from '@ant-design/icons'; import type { LayerPopupProps } from '@antv/larkmap'; import { @@ -23,6 +24,7 @@ import { Col, Descriptions, Divider, + Popover, Radio, Row, Select, @@ -34,7 +36,7 @@ import { import type { BaseSource, DataLevel } from 'district-data'; import { DataSourceMap } from 'district-data'; import { debounce } from 'lodash-es'; -import { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { downloadData, exportSVG } from '../utils/util'; import './index.less'; import type { IDataInfo } from './util'; @@ -69,7 +71,7 @@ export default () => { const [loading, setLoading] = useState(false); const size = 'middle'; const [dataInfo, setDataInfo] = useState(defaultDataInfo); - const [dataType, setDataType] = useState<'wgs84' | 'gcj02'>('wgs84'); + const [dataType, setDataType] = useState<'wgs84' | 'gcj02'>('gcj02'); const [drillList, setDrillList] = useState([ { currentLevel: 'country', @@ -334,7 +336,11 @@ export default () => { 数据格式: - GCJ02 + + + + {/* { > wgs84 gcj02 - + */} From 868ddea2738ff2864c13aa7ef2dc4af15ddc4eba Mon Sep 17 00:00:00 2001 From: heiyexing <496845051@qq.com> Date: Thu, 23 May 2024 12:04:51 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=E6=97=A0=E7=94=A8?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/curly-ligers-tap.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/curly-ligers-tap.md diff --git a/.changeset/curly-ligers-tap.md b/.changeset/curly-ligers-tap.md deleted file mode 100644 index 7215f2c2d2..0000000000 --- a/.changeset/curly-ligers-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@antv/l7-component': patch ---- - -popup 更新支持 className 和 style