From e110819b30d1c323ded05345586a2d5527b73361 Mon Sep 17 00:00:00 2001 From: huyang Date: Wed, 6 Dec 2023 22:32:15 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20fillImage=E4=B8=ADuniform=E6=B2=A1?= =?UTF-8?q?=E5=AF=B9=E9=BD=90=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/layers/src/point/models/fillmage.ts | 4 ++-- packages/layers/src/point/shaders/image/fillImage_frag.glsl | 6 +++--- packages/layers/src/point/shaders/image/fillImage_vert.glsl | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index 2e230d5b236..f4551f14a4d 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -51,11 +51,11 @@ export default class FillImageModel extends BaseModel { */ const commonOptions = { + u_textSize: [1024, this.iconService.canvasHeight || 128], u_heightfixed: Number(heightfixed), u_raisingHeight: Number(raisingHeight), u_size_unit: SizeUnitType[unit] as SizeUnitType, - u_textSize: [1024, this.iconService.canvasHeight || 128] - }; + };//2+1+1+1 const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); return commonBufferInfo; diff --git a/packages/layers/src/point/shaders/image/fillImage_frag.glsl b/packages/layers/src/point/shaders/image/fillImage_frag.glsl index 7f024606bce..01cf1096391 100644 --- a/packages/layers/src/point/shaders/image/fillImage_frag.glsl +++ b/packages/layers/src/point/shaders/image/fillImage_frag.glsl @@ -5,11 +5,11 @@ in float v_opacity; out vec4 outputColor; uniform sampler2D u_texture; -layout(std140) uniform uBlock { +layout(std140) uniform commonUniform { + vec2 u_textSize; float u_heightfixed: 0.0; float u_raisingHeight: 0.0; float u_size_unit; - vec2 u_textSize; }; #pragma include "sdf_2d" @@ -18,7 +18,7 @@ layout(std140) uniform uBlock { void main() { vec2 pos = v_Iconuv / u_textSize + v_uv / u_textSize * 64.; - outputColor = texture(u_texture, pos); + outputColor = texture(SAMPLER_2D(u_texture), pos); outputColor.a *= v_opacity; outputColor = filterColor(outputColor); } diff --git a/packages/layers/src/point/shaders/image/fillImage_vert.glsl b/packages/layers/src/point/shaders/image/fillImage_vert.glsl index 39851a8ac87..65d2d6f1abc 100644 --- a/packages/layers/src/point/shaders/image/fillImage_vert.glsl +++ b/packages/layers/src/point/shaders/image/fillImage_vert.glsl @@ -4,11 +4,11 @@ layout(location = 9) in float a_Size; layout(location = 11) in vec3 a_Extrude; layout(location = 14) in vec2 a_Uv; -layout(std140) uniform uBlock { +layout(std140) uniform commonUniform { + vec2 u_textSize; float u_heightfixed: 0.0; float u_raisingHeight: 0.0; float u_size_unit; - vec2 u_textSize; }; out vec2 v_uv; From fa004e42cec803d763626ea9d74cbc67fff38cdc Mon Sep 17 00:00:00 2001 From: huyang Date: Fri, 23 Feb 2024 17:04:19 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=B0=86=E5=A4=A9=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E7=9A=84Marker=E5=92=8CPopup=E7=9A=84zoom=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E4=B8=8B=E6=94=BE=E5=88=B0=E5=A4=A9=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E7=9A=84mapService=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/component/src/marker.ts | 11 ++++++----- packages/component/src/popup/popup.ts | 16 +++++++++------- packages/core/src/services/map/IMapService.ts | 2 +- packages/maps/src/tdtmap/map.ts | 7 +++++++ packages/maps/src/utils/BaseMapService.ts | 4 ++++ 5 files changed, 27 insertions(+), 13 deletions(-) diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 90624a2f3da..296e0748858 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -61,12 +61,12 @@ export default class Marker extends EventEmitter { // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement); this.mapsService.getMarkerContainer().appendChild(element as HTMLElement); this.registerMarkerEvent(element as HTMLElement); - //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现 - // this.mapsService.on('zoomchange', this.updatePositionWhenZoom); this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听 this.update(); this.updateDraggable(); this.added = true; + // @ts-ignore + this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); this.emit('added'); return this; } @@ -76,8 +76,9 @@ export default class Marker extends EventEmitter { this.mapsService.off('click', this.onMapClick); this.mapsService.off('move', this.update); this.mapsService.off('moveend', this.update); - // this.mapsService.off('zoomchange', this.update); this.mapsService.off('camerachange', this.update); + // @ts-ignore + this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); } this.unRegisterMarkerEvent(); this.removeAllListeners(); @@ -219,7 +220,7 @@ export default class Marker extends EventEmitter { DOM.setTransform(element as HTMLElement, `${anchorTranslate[anchor]}`); } //天地图在开始缩放时触发 更新目标位置时添加过渡效果 - private updatePositionWhenZoom(ev: { map: any; center: any; zoom: any; }) { + public updatePositionWhenZoom(ev: { map: any; center: any; zoom: any; }) { if (!this.mapsService) { return; } @@ -375,7 +376,7 @@ export default class Marker extends EventEmitter { ) { element.style.display = 'none'; } - + element.style.left = pos.x + offsets[0] + 'px'; element.style.top = pos.y - offsets[1] + 'px'; console.log(element.style.left); diff --git a/packages/component/src/popup/popup.ts b/packages/component/src/popup/popup.ts index 8827226046f..f06d54ff43d 100644 --- a/packages/component/src/popup/popup.ts +++ b/packages/component/src/popup/popup.ts @@ -111,8 +111,6 @@ export default class Popup this.mapsService = scene.get(TYPES.IMapService); this.sceneService = scene.get(TYPES.ISceneService); this.layerService = scene.get(TYPES.ILayerService); - //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现 - // this.mapsService.on('zoomchange', this.updateWhenZoom); this.mapsService.on('camerachange', this.update); this.mapsService.on('viewchange', this.update); this.scene = scene; @@ -131,6 +129,8 @@ export default class Popup if (title) { this.setTitle(title); } + // @ts-ignore + this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); this.emit('open'); return this; } @@ -154,12 +154,12 @@ export default class Popup // TODO: mapbox AMap 事件同步 this.mapsService.off('camerachange', this.update); this.mapsService.off('viewchange', this.update); - //天地图的缩放事件 - // this.mapsService.off('zoomchange', this.updateWhenZoom); this.updateCloseOnClick(true); this.updateCloseOnEsc(true); this.updateFollowCursor(true); // @ts-ignore + this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); + // @ts-ignore delete this.mapsService; } this.emit('close'); @@ -334,13 +334,15 @@ export default class Popup } if (this.mapsService) { // 防止事件重复监听 - // this.mapsService.off('zoonanim', this.updateWhenZoom); this.mapsService.off('camerachange', this.update); this.mapsService.off('viewchange', this.update); + // @ts-ignore + this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); - // this.mapsService.on('zoonanim', this.updateWhenZoom); this.mapsService.on('camerachange', this.update); this.mapsService.on('viewchange', this.update); + // @ts-ignore + this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); } this.update(); if (this.popupOption.autoPan) { @@ -587,7 +589,7 @@ export default class Popup this.container.style.removeProperty('width'); } } - protected updateWhenZoom = (ev:any) => { + protected updatePositionWhenZoom = (ev:any) => { this.updatePosition(ev,true); } protected update = () => { diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 08ee8487183..be0b833f9a5 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -64,7 +64,6 @@ export interface IMapService { getMarkerContainer(): HTMLElement; getOverlayContainer(): HTMLElement | undefined; // MapEvent // 定义事件类型 - on(type: string, handler: (...args: any[]) => void): void; off(type: string, handler: (...args: any[]) => void): void; once(type: string, handler: (...args: any[]) => void): void; @@ -124,6 +123,7 @@ export interface IMapService { getCustomCoordCenter?(): [number, number]; exportMap(type: 'jpg' | 'png'): string; + // 地球模式下的地图方法/属性 rotateY?( option: diff --git a/packages/maps/src/tdtmap/map.ts b/packages/maps/src/tdtmap/map.ts index de3eb18e985..355b84a5d99 100644 --- a/packages/maps/src/tdtmap/map.ts +++ b/packages/maps/src/tdtmap/map.ts @@ -49,6 +49,13 @@ export default class TdtMapService extends BaseMapService { return; } + public addZoomListenerWhenAddMarkerOrPopup(object:any): void { + //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现 + this.on('zoomchange', object.updatePositionWhenZoom); + } + public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void { + this.off('zoomchange', object.updatePositionWhenZoom); + } public getMarkerContainer(): HTMLElement { return this.markerContainer; } diff --git a/packages/maps/src/utils/BaseMapService.ts b/packages/maps/src/utils/BaseMapService.ts index 6ada2e3c331..c2da44b9d30 100644 --- a/packages/maps/src/utils/BaseMapService.ts +++ b/packages/maps/src/utils/BaseMapService.ts @@ -76,6 +76,10 @@ export default abstract class BaseMapService this.markerContainer = DOM.create('div', 'l7-marker-container', container); this.markerContainer.setAttribute('tabindex', '-1'); } + //需要子类实现 目前只有天地图实现 + public addZoomListenerWhenAddMarkerOrPopup(object:any): void {} + //需要子类实现 目前只有天地图实现 + public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void {} public getMarkerContainer(): HTMLElement { return this.markerContainer; From 4a29752594111c1a7c4f896e9030b31705f7e203 Mon Sep 17 00:00:00 2001 From: huyang Date: Tue, 5 Mar 2024 17:04:20 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=B0=86marker=E5=92=8Cpopup?= =?UTF-8?q?=E4=B8=AD=E4=B8=8E=E5=A4=A9=E5=9C=B0=E5=9B=BE=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E7=9A=84=E6=96=B9=E6=B3=95=E6=8F=90=E5=8F=96=E5=88=B0=E5=A4=A9?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=9A=84mapService?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: marker和popup中计算容器坐标不正确的bug --- packages/component/src/marker.ts | 68 ++------- packages/component/src/popup/popup.ts | 48 ++---- packages/maps/src/tdtmap/map.ts | 177 ++++++++++++++++++++-- packages/maps/src/utils/BaseMapService.ts | 4 +- 4 files changed, 190 insertions(+), 107 deletions(-) diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 296e0748858..d6a2bb4dcf6 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -38,7 +38,7 @@ export default class Marker extends EventEmitter { ...this.getDefault(), ...option, }; - bindAll(['update', 'onMove', 'onMapClick','updatePositionWhenZoom'], this); + bindAll(['update', 'onMove', 'onMapClick'], this); this.init(); } @@ -66,7 +66,7 @@ export default class Marker extends EventEmitter { this.updateDraggable(); this.added = true; // @ts-ignore - this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); + this.mapsService.onAddMarkerOrPopup(this); this.emit('added'); return this; } @@ -78,7 +78,7 @@ export default class Marker extends EventEmitter { this.mapsService.off('moveend', this.update); this.mapsService.off('camerachange', this.update); // @ts-ignore - this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); + this.mapsService.onRemoveMarker(this); } this.unRegisterMarkerEvent(); this.removeAllListeners(); @@ -219,53 +219,6 @@ export default class Marker extends EventEmitter { this.updatePosition(); DOM.setTransform(element as HTMLElement, `${anchorTranslate[anchor]}`); } - //天地图在开始缩放时触发 更新目标位置时添加过渡效果 - public updatePositionWhenZoom(ev: { map: any; center: any; zoom: any; }) { - if (!this.mapsService) { - return; - } - const {element,offsets} = this.markerOption; - const { lng, lat } = this.lngLat; - if (element) { - element.style.display = 'block'; - element.style.whiteSpace = 'nowrap'; - const { containerHeight, containerWidth, bounds } = - this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(); - if (!bounds) { - return; - } - const map = ev.map; - const center = ev.center; - const zoom = ev.zoom; - const projectedCenter = map.DE(this.lngLat,zoom,center); - projectedCenter.x=Math.round(projectedCenter.x+offsets[0]); - projectedCenter.y=Math.round(projectedCenter.y-offsets[1]); - // 当前可视区域包含跨日界线 - if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) { - if (projectedCenter.x > containerWidth) { - // 日界线右侧点左移 - const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]); - projectedCenter.x = newPos.x; - } - if (projectedCenter.x < 0) { - // 日界线左侧点右移 - const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]); - projectedCenter.x = newPos.x; - } - } - if ( - projectedCenter.x > containerWidth || - projectedCenter.x < 0 || - projectedCenter.y > containerHeight || - projectedCenter.y < 0 - ) { - element.style.display = 'none'; - } - element.style.left = projectedCenter.x + 'px'; - element.style.top = projectedCenter.y + 'px'; - element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)'; - } - } // eslint-disable-next-line @typescript-eslint/no-unused-vars private onMapClick(e: MouseEvent) { const { element } = this.markerOption; @@ -344,7 +297,8 @@ export default class Marker extends EventEmitter { } const { element, offsets } = this.markerOption; const { lng, lat } = this.lngLat; - const pos = this.mapsService.lngLatToContainer([lng, lat]); + //@ts-ignore + const pos = this.mapsService.lngLatToContainer([lng, lat],true); if (element) { element.style.display = 'block'; element.style.whiteSpace = 'nowrap'; @@ -358,21 +312,25 @@ export default class Marker extends EventEmitter { if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) { if (pos.x > containerWidth) { // 日界线右侧点左移 - const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]); + //@ts-ignore + const newPos = this.mapsService.lngLatToContainer([lng - 360, lat],true); pos.x = newPos.x; } if (pos.x < 0) { // 日界线左侧点右移 - const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]); + //@ts-ignore + const newPos = this.mapsService.lngLatToContainer([lng + 360, lat],true); pos.x = newPos.x; } } - // 不在当前可视区域内隐藏点 + // 不在当前可视区域内隐藏点 (天地图不处理 因为天地图平移的是父容器,为了避免平移时频繁更新位置,这里就不处理display了) if ( + this.mapsService.getType() !== 'tdtmap' + && ( pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || - pos.y < 0 + pos.y < 0) ) { element.style.display = 'none'; } diff --git a/packages/component/src/popup/popup.ts b/packages/component/src/popup/popup.ts index f06d54ff43d..9759597e70c 100644 --- a/packages/component/src/popup/popup.ts +++ b/packages/component/src/popup/popup.ts @@ -130,7 +130,7 @@ export default class Popup this.setTitle(title); } // @ts-ignore - this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); + this.mapsService.onAddMarkerOrPopup(this); this.emit('open'); return this; } @@ -158,7 +158,7 @@ export default class Popup this.updateCloseOnEsc(true); this.updateFollowCursor(true); // @ts-ignore - this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); + this.mapsService.onAddMarkerOrPopup(this); // @ts-ignore delete this.mapsService; } @@ -336,13 +336,11 @@ export default class Popup // 防止事件重复监听 this.mapsService.off('camerachange', this.update); this.mapsService.off('viewchange', this.update); - // @ts-ignore - this.mapsService.removeZoomListenerWhenRemoveMarkerOrPopup(this); + // this.mapsService.onRemoveMarkerOrPopup(this); this.mapsService.on('camerachange', this.update); this.mapsService.on('viewchange', this.update); - // @ts-ignore - this.mapsService.addZoomListenerWhenAddMarkerOrPopup(this); + // this.mapsService.onAddMarkerOrPopup(this); } this.update(); if (this.popupOption.autoPan) { @@ -389,28 +387,12 @@ export default class Popup return; } const { lng, lat } = this.lngLat; - const { x, y } = this.mapsService.lngLatToContainer([lng, lat]); + //@ts-ignore + const { x, y } = this.mapsService.lngLatToContainer([lng, lat],true); this.setPopupPosition(x, y); }; - //zoom时计算PopUp的位置并更新 - protected updateLngLatPositionWhenZoom = (ev:any) => { - if (!this.mapsService || this.popupOption.followCursor) { - return; - } - const { lng, lat } = this.lngLat; - const { x, y } = this.mapsService.lngLatToContainer([lng, lat]); - const map = ev.map; - const viewHalf = map.getSize(); - viewHalf.x = viewHalf.x/2; - viewHalf.y = viewHalf.y/2; - const center = ev.center; - const zoom = ev.zoom; - const projectedCenter = map.DE(this.lngLat,zoom,center); - projectedCenter.x=Math.round(projectedCenter.x); - projectedCenter.y=Math.round(projectedCenter.y); - this.setPopupPosition(projectedCenter.x, projectedCenter.y,true); - }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars protected getDefault(option: Partial): O { // tslint:disable-next-line:no-object-literal-type-assertion @@ -534,8 +516,7 @@ export default class Popup } this.hide(); }; - //更新位置 支持zoom时更新 - private updatePosition = (ev:any,zoom:Boolean = true) => { + private updatePosition = () => { const hasPosition = !!this.lngLat; const { className, style, maxWidth, anchor, stopPropagation } = this.popupOption; @@ -571,12 +552,7 @@ export default class Popup this.container.style.whiteSpace = 'nowrap'; } - if(zoom){ - this.updateLngLatPositionWhenZoom(ev); - } - else{ - this.updateLngLatPosition(); - } + this.updateLngLatPosition(); DOM.setTransform(this.container, `${anchorTranslate[anchor]}`); applyAnchorClass(this.container, anchor, 'popup'); @@ -589,11 +565,9 @@ export default class Popup this.container.style.removeProperty('width'); } } - protected updatePositionWhenZoom = (ev:any) => { - this.updatePosition(ev,true); - } + protected update = () => { - this.updatePosition(null,false); + this.updatePosition(); }; /** * 设置 Popup 相对于地图容器的 Position diff --git a/packages/maps/src/tdtmap/map.ts b/packages/maps/src/tdtmap/map.ts index 355b84a5d99..a869d2809da 100644 --- a/packages/maps/src/tdtmap/map.ts +++ b/packages/maps/src/tdtmap/map.ts @@ -1,3 +1,4 @@ + import BaseMapService from '../utils/BaseMapService'; import type { @@ -15,6 +16,8 @@ import { import { MercatorCoordinate } from '@antv/l7-map'; import Viewport from '../utils/Viewport'; import { load } from './maploader'; +import { DOM, anchorTranslate, applyAnchorClass } from '@antv/l7-utils'; +import { Marker, Popup } from '@antv/l7-component'; let mapdivCount: number = 0; @@ -23,7 +26,6 @@ const EventMap: { } = { zoomchange: ['Ge'], }; - export default class TdtMapService extends BaseMapService { protected viewport: IViewport | null = null; protected evtCbProxyMap: Map any, (...args: any) => any>> = new Map(); @@ -34,9 +36,6 @@ export default class TdtMapService extends BaseMapService { const container = this.map.getContainer(); const div = (this.markerContainer = document.createElement('div')); container.appendChild(div); - // div.classList.add('l7-marker-container'); - // div.classList.add('leaflet-layer'); - // div.classList.add('leaflet-zoom-animated'); div.setAttribute('tabindex', '-1'); div.id = 'tdt-L7-marker'; div.style.position = 'absolute'; @@ -49,11 +48,150 @@ export default class TdtMapService extends BaseMapService { return; } - public addZoomListenerWhenAddMarkerOrPopup(object:any): void { - //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现 + // @ts-ignore + public onAddMarkerOrPopup(object: any): void { + // 给marker或popup添加更新目标位置时的过渡效果 缩放时使用 + if (object instanceof Marker) { + //@ts-ignore + if (!object.updatePositionWhenZoom) { + //@ts-ignore + object.updatePositionWhenZoom = (ev: { map: any; center: any; zoom: any }) => { + //@ts-ignore + if (!object.mapsService) { + return; + } + //@ts-ignore + const { element, offsets } = object.markerOption; + //@ts-ignore + const { lng, lat } = object.lngLat; + if (element) { + element.style.display = 'block'; + element.style.whiteSpace = 'nowrap'; + const { containerWidth, bounds } = + //@ts-ignore + object.getMarkerLayerContainerSize() || object.getCurrentContainerSize(); + if (!bounds) { + return; + } + const map = ev.map; + const center = ev.center; + const zoom = ev.zoom; + // @ts-ignore + const projectedCenter = map.DE(object.lngLat, zoom, center); + projectedCenter.x = Math.round(projectedCenter.x + offsets[0]); + projectedCenter.y = Math.round(projectedCenter.y - offsets[1]); + // 当前可视区域包含跨日界线 + if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) { + if (projectedCenter.x > containerWidth) { + // 日界线右侧点左移 + //@ts-ignore + const newPos = object.mapsService.lngLatToContainer([lng - 360, lat],true); + projectedCenter.x = newPos.x; + } + if (projectedCenter.x < 0) { + // 日界线左侧点右移 + //@ts-ignore + const newPos = object.mapsService.lngLatToContainer([lng + 360, lat],true); + projectedCenter.x = newPos.x; + } + } + // if ( + // projectedCenter.x > containerWidth || + // projectedCenter.x < 0 || + // projectedCenter.y > containerHeight || + // projectedCenter.y < 0 + // ) { + // element.style.display = 'none'; + // } + element.style.left = projectedCenter.x + 'px'; + element.style.top = projectedCenter.y + 'px'; + element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)'; + } + } + } + // this._markers.push(object); + } + else if (object instanceof Popup) { + // @ts-ignore + object.updatePositionWhenZoom = (ev: { map: any; center: any; zoom: any }) => { + // @ts-ignore + const hasPosition = !!object.lngLat; + // @ts-ignore + const { className, style, maxWidth, anchor, stopPropagation } = object.popupOption; + // @ts-ignore + if (!object.mapsService || !hasPosition || !object.content) { + return; + } + // @ts-ignore + const popupContainer = object.mapsService.getMarkerContainer(); + // 如果当前没有创建 Popup 容器则创建 + // @ts-ignore + if (!object.container && popupContainer) { + // @ts-ignore + object.container = DOM.create( + 'div', + // @ts-ignore + `l7-popup ${className ?? ''} ${!object.isShow ? 'l7-popup-hide' : ''}`, + popupContainer as HTMLElement, + ); + + if (style) { + // @ts-ignore + object.container.setAttribute('style', style); + } + // @ts-ignore + object.tip = DOM.create('div', 'l7-popup-tip', object.container); + // @ts-ignore + object.container.appendChild(object.content); + + // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加 + if (stopPropagation) { + ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach( + (type) => { + // @ts-ignore + object.container.addEventListener(type, (e:any) => { + e.stopPropagation(); + }); + }, + ); + } + // @ts-ignore + object.container.style.whiteSpace = 'nowrap'; + } + //更新位置 + // @ts-ignore + if (object.popupOption.followCursor) { + return; + } + const map = ev.map; + const center = ev.center; + const zoom = ev.zoom; + // @ts-ignore + const projectedCenter = map.DE(object.lngLat,zoom,center); + projectedCenter.x=Math.round(projectedCenter.x); + projectedCenter.y=Math.round(projectedCenter.y); + // @ts-ignore + object.setPopupPosition(projectedCenter.x, projectedCenter.y,true); + // @ts-ignore + DOM.setTransform(object.container, `${anchorTranslate[anchor]}`); + // @ts-ignore + applyAnchorClass(object.container, anchor, 'popup'); + if (maxWidth) { + // @ts-ignore + const { width } = object.container.getBoundingClientRect(); + if (width > parseFloat(maxWidth)) { + // @ts-ignore + object.container.style.width = maxWidth; + } + } else { + // @ts-ignore + object.container.style.removeProperty('width'); + } + } + } this.on('zoomchange', object.updatePositionWhenZoom); } - public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void { + public onRemoveMarkerOrPopup(object: any): void { this.off('zoomchange', object.updatePositionWhenZoom); } public getMarkerContainer(): HTMLElement { @@ -440,13 +578,26 @@ export default class TdtMapService extends BaseMapService { lat: point.lat, }; } - - public lngLatToContainer([lng, lat]: [number, number]): IPoint { + //@ts-ignore + /** + * @description 经纬度转容器坐标 + * @ignore + * @private + * @param {Number[]} param0 经纬度数组 + * @param {Boolean} [isMarkerOrPopup=false] 是否是marker或popup,这种情况需要加上sceneContainer的偏移 + * @returns {Object} 容器坐标 + */ + public lngLatToContainer([lng, lat]: [number, number],isMarkerOrPopup:boolean=false): IPoint { const overlayPixel = this.map.lngLatToContainerPoint({ lat, lng }); - return { - x: overlayPixel.x, - y: overlayPixel.y, - }; + if(isMarkerOrPopup){ + return { + //@ts-ignore + x: overlayPixel.x+(this.sceneContainer._tdt_pos?.x||0), + //@ts-ignore + y: overlayPixel.y+(this.sceneContainer._tdt_pos?.y||0), + } + } + return overlayPixel; } public lngLatToCoord([lng, lat]: [number, number]): [number, number] { diff --git a/packages/maps/src/utils/BaseMapService.ts b/packages/maps/src/utils/BaseMapService.ts index c2da44b9d30..f2d69a32bb9 100644 --- a/packages/maps/src/utils/BaseMapService.ts +++ b/packages/maps/src/utils/BaseMapService.ts @@ -77,9 +77,9 @@ export default abstract class BaseMapService this.markerContainer.setAttribute('tabindex', '-1'); } //需要子类实现 目前只有天地图实现 - public addZoomListenerWhenAddMarkerOrPopup(object:any): void {} + public onAddMarkerOrPopup(object:any): void {} //需要子类实现 目前只有天地图实现 - public removeZoomListenerWhenRemoveMarkerOrPopup(object:any): void {} + public onRemoveMarkerOrPopup(object:any): void {} public getMarkerContainer(): HTMLElement { return this.markerContainer; From 72d919158678b0e59aeab11b82b2420c0cd6977c Mon Sep 17 00:00:00 2001 From: huyang Date: Wed, 6 Mar 2024 12:50:07 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20amap=E7=9A=84marker=E5=92=8Cpopup?= =?UTF-8?q?=E6=8A=A5=E9=94=99=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: marker组件移除marker和popup方法报错的bug --- packages/component/src/marker.ts | 2 +- packages/core/src/services/map/IMapService.ts | 5 ++++- packages/maps/src/tdtmap/map.ts | 6 ++++++ packages/maps/src/utils/amap/AMapBaseService.ts | 4 ++++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index d6a2bb4dcf6..2aac0e42012 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -78,7 +78,7 @@ export default class Marker extends EventEmitter { this.mapsService.off('moveend', this.update); this.mapsService.off('camerachange', this.update); // @ts-ignore - this.mapsService.onRemoveMarker(this); + this.mapsService.onRemoveMarkerOrPopup(this); } this.unRegisterMarkerEvent(); this.removeAllListeners(); diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index be0b833f9a5..5e84c14346a 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -122,7 +122,10 @@ export interface IMapService { // lngLatToCoords?(lnglatArray: any): any; getCustomCoordCenter?(): [number, number]; exportMap(type: 'jpg' | 'png'): string; - + // 添加marker或popup时触发 + onAddMarkerOrPopup(object:any): void; + // 添加marker或popup时触发 + onRemoveMarkerOrPopup(object:any): void; // 地球模式下的地图方法/属性 rotateY?( diff --git a/packages/maps/src/tdtmap/map.ts b/packages/maps/src/tdtmap/map.ts index a869d2809da..20cace4788a 100644 --- a/packages/maps/src/tdtmap/map.ts +++ b/packages/maps/src/tdtmap/map.ts @@ -49,6 +49,12 @@ export default class TdtMapService extends BaseMapService { } // @ts-ignore + /** + * @ignore + * @private + * 给scene中添加marker或者popup时调用 主要是给对象添加缩放时的回调 + * @param object Marker或者Popup对象 + */ public onAddMarkerOrPopup(object: any): void { // 给marker或popup添加更新目标位置时的过渡效果 缩放时使用 if (object instanceof Marker) { diff --git a/packages/maps/src/utils/amap/AMapBaseService.ts b/packages/maps/src/utils/amap/AMapBaseService.ts index 81b37f5ba49..55e5a29b238 100644 --- a/packages/maps/src/utils/amap/AMapBaseService.ts +++ b/packages/maps/src/utils/amap/AMapBaseService.ts @@ -585,4 +585,8 @@ export default abstract class AMapBaseService $wrapper.appendChild($amapdiv); return $amapdiv; } + //需要子类实现 + public onAddMarkerOrPopup(object:any): void {} + //需要子类实现 + public onRemoveMarkerOrPopup(object:any): void {} }