From ddf12c69a193be5cebe098050c27be6e2d174e2e Mon Sep 17 00:00:00 2001 From: yanxiong Date: Fri, 18 Aug 2023 17:07:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=A9=E6=94=BE=E6=8E=A7=E4=BB=B6=20?= =?UTF-8?q?zoom=20=E6=96=B0=E5=A2=9E=20showZoom=20=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=EF=BC=8C=E7=94=A8=E4=BA=8E=E6=8E=A7=E5=88=B6=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=20zoom=20=E6=95=B0=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev-demos/component/control/zoom.tsx | 6 +++++- packages/component/src/control/zoom.ts | 21 +++++++++++++++++-- packages/component/src/css/index.css | 20 ++++++++++++------ packages/component/src/css/zoom.less | 20 ++++++++++++------ .../docs/api/component/control/zoom.zh.md | 13 ++++++------ 5 files changed, 59 insertions(+), 21 deletions(-) diff --git a/dev-demos/component/control/zoom.tsx b/dev-demos/component/control/zoom.tsx index 1bf939bfc6..658f4a8eb6 100644 --- a/dev-demos/component/control/zoom.tsx +++ b/dev-demos/component/control/zoom.tsx @@ -17,7 +17,9 @@ const Demo: FunctionComponent = () => { }); newScene.on('loaded', () => { - const newControl = new Zoom(); + const newControl = new Zoom({ + showZoom: true, + }); newScene.addControl(newControl); setControl(newControl); }); @@ -32,6 +34,7 @@ const Demo: FunctionComponent = () => { zoomInTitle: 'in', zoomOutText: '减', zoomOutTitle: 'out', + showZoom: undefined, }); }} > @@ -44,6 +47,7 @@ const Demo: FunctionComponent = () => { zoomInTitle: undefined, zoomOutText: undefined, zoomOutTitle: undefined, + showZoom: true, }); }} > diff --git a/packages/component/src/control/zoom.ts b/packages/component/src/control/zoom.ts index e5e0ae34a0..afe9e4446a 100644 --- a/packages/component/src/control/zoom.ts +++ b/packages/component/src/control/zoom.ts @@ -8,6 +8,7 @@ export interface IZoomControlOption extends IControlOption { zoomInTitle: string; zoomOutText: DOM.ELType | string; zoomOutTitle: string; + showZoom: boolean; } export { Zoom }; @@ -16,6 +17,7 @@ export default class Zoom extends Control { private disabled: boolean; private zoomInButton: HTMLElement; private zoomOutButton: HTMLElement; + private zoomNumDiv: HTMLElement; public getDefault(option: Partial) { return { @@ -26,6 +28,7 @@ export default class Zoom extends Control { zoomInTitle: 'Zoom in', zoomOutText: createL7Icon('l7-icon-narrow'), zoomOutTitle: 'Zoom out', + showZoom: false, }; } public setOptions(newOptions: Partial) { @@ -36,6 +39,7 @@ export default class Zoom extends Control { 'zoomInTitle', 'zoomOutText', 'zoomOutTitle', + 'showZoom', ]) ) { this.resetButtonGroup(this.container); @@ -94,6 +98,14 @@ export default class Zoom extends Control { container, this.zoomIn, ); + if (this.controlOption.showZoom) { + this.zoomNumDiv = this.createButton( + '0', + '', + 'l7-button-control l7-control-zoom__number', + container, + ); + } this.zoomOutButton = this.createButton( this.controlOption.zoomOutText, this.controlOption.zoomOutTitle, @@ -109,7 +121,7 @@ export default class Zoom extends Control { tile: string, className: string, container: HTMLElement, - fn: (...arg: any[]) => any, + fn?: (...arg: any[]) => any, ) { const link = DOM.create('button', className, container) as HTMLLinkElement; if (typeof html === 'string') { @@ -118,7 +130,9 @@ export default class Zoom extends Control { link.append(html); } link.title = tile; - link.addEventListener('click', fn); + if (fn) { + link.addEventListener('click', fn); + } return link; } @@ -129,6 +143,9 @@ export default class Zoom extends Control { if (this.disabled || mapsService.getZoom() <= mapsService.getMinZoom()) { this.zoomOutButton.setAttribute('disabled', 'true'); } + if (this.controlOption.showZoom && this.zoomNumDiv) { + this.zoomNumDiv.innerText = String(Math.floor(mapsService.getZoom())); + } if (this.disabled || mapsService.getZoom() >= mapsService.getMaxZoom()) { this.zoomInButton.setAttribute('disabled', 'true'); } diff --git a/packages/component/src/css/index.css b/packages/component/src/css/index.css index 04cc93b5fa..ca9286ce67 100644 --- a/packages/component/src/css/index.css +++ b/packages/component/src/css/index.css @@ -370,21 +370,29 @@ min-width: 130px; } .l7-control-zoom { - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); - border-radius: 2px; overflow: hidden; + border-radius: 2px; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); } .l7-control-zoom .l7-button-control { - box-shadow: 0 0 0; - border-radius: 0; font-size: 16px; + border-bottom: 1px solid #f0f0f0; + border-radius: 0; + box-shadow: 0 0 0; } .l7-control-zoom .l7-button-control .l7-iconfont { width: 14px; height: 14px; } -.l7-control-zoom .l7-button-control:first-child { - border-bottom: 1px solid #f0f0f0; +.l7-control-zoom .l7-button-control:last-child { + border-bottom: 0; +} +.l7-control-zoom .l7-control-zoom__number { + color: #595959; + padding: 0; +} +.l7-control-zoom .l7-control-zoom__number:hover { + background-color: #fff; } .l7-control-scale { display: flex; diff --git a/packages/component/src/css/zoom.less b/packages/component/src/css/zoom.less index 6ef139d429..6b6eda4b3f 100644 --- a/packages/component/src/css/zoom.less +++ b/packages/component/src/css/zoom.less @@ -3,19 +3,27 @@ @zoom-icon-size: 14px; .l7-control-zoom { - box-shadow: @l7-control-shadow; - border-radius: @l7-btn-control-border-radius; overflow: hidden; + border-radius: @l7-btn-control-border-radius; + box-shadow: @l7-control-shadow; .l7-button-control { - box-shadow: 0 0 0; - border-radius: 0; font-size: @l7-btn-icon-size; + border-bottom: 1px solid @l7-btn-border-color; + border-radius: 0; + box-shadow: 0 0 0; .l7-iconfont { width: @zoom-icon-size; height: @zoom-icon-size; } - &:first-child { - border-bottom: 1px solid @l7-btn-border-color; + &:last-child { + border-bottom: 0; + } + } + & &__number { + color: @l7-control-font-color; + padding: 0; + &:hover { + background-color: @l7-btn-control-bg-color; } } } diff --git a/packages/site/docs/api/component/control/zoom.zh.md b/packages/site/docs/api/component/control/zoom.zh.md index 10bc42c1e3..bb8116487b 100644 --- a/packages/site/docs/api/component/control/zoom.zh.md +++ b/packages/site/docs/api/component/control/zoom.zh.md @@ -29,12 +29,13 @@ scene.on('loaded', () => { ## 配置 -| 名称 | 说明 | 类型 | -| ------------ | ----------------------- | ------------------------- | -| zoomInText | 放大按钮的展示内容 | `Element` \| `string` | -| zoomInTitle | 放大按钮的 `title` 属性 | `string` | -| zoomOutText | 缩小按钮的展示内容 | `Element` \| `string` | -| zoomOutTitle | 缩小按钮的 `title` 属性 | `string` | +| 名称 | 说明 | 类型 | +| ------------ | -------------------------------------------- | --------------------- | +| zoomInText | 放大按钮的展示内容 | `Element` \| `string` | +| zoomInTitle | 放大按钮的 `title` 属性 | `string` | +| zoomOutText | 缩小按钮的展示内容 | `Element` \| `string` | +| zoomOutTitle | 缩小按钮的 `title` 属性 | `string` | +| showZoom | 是否展示地图当前实时 zoom 数值，默认向下取整 | `boolean` |