Skip to content

Commit

Permalink
refactor: 升级新版一方地图交互事件机制,解决抖动问题 (#2521)
Browse files Browse the repository at this point in the history
* refactor: 升级新版地图交互事件机制

* refactor: 默认升级 MapNext 至 [email protected]
  • Loading branch information
lvisei authored Jun 5, 2024
1 parent 67647e9 commit 7e38a83
Show file tree
Hide file tree
Showing 145 changed files with 17,317 additions and 365 deletions.
5 changes: 5 additions & 0 deletions .changeset/large-pumas-provide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@antv/l7-map': patch
---

refactor: 升级新版一方地图交互事件机制,解决抖动问题
3 changes: 3 additions & 0 deletions __tests__/unit/preset/environment.ts
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
(window as any).URL.createObjectURL = jest.fn;
(window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
}));
33 changes: 27 additions & 6 deletions packages/map/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,32 @@
# `map`
## Map

> TODO: description
Map fork from [[email protected]](https://github.com/maplibre/maplibre-gl-js), keep event loop, responds user interaction and updates the internal state of the map (current viewport, camera angle, etc.)

## Usage
```mermaid
sequenceDiagram
actor user
participant DOM
participant handler_manager
participant handler
participant camera
participant transform
participant map
```
const map = require('map');
user->>camera: map#setCenter, map#panTo
camera->>transform: update
camera->>map: fire move event
map->>map: _render()
// TODO: DEMONSTRATE API
user->>DOM: resize, pan,<br>click, scroll,<br>...
DOM->>handler_manager: DOM events
handler_manager->>handler: forward event
handler-->>handler_manager: HandlerResult
handler_manager->>transform: update
handler_manager->>map: fire move event
map->>map: _render()
```

- [Transform](./src/geo/transform.ts) holds the current viewport details (pitch, zoom, bearing, bounds, etc.). Two places in the code update transform directly:
- [Camera](./src/camera.ts) (parent class of [Map](./src/map)) in response to explicit calls to [Camera#panTo](./src/camera.ts#L207), [Camera#setCenter](./src/camera.ts#L169)
- [HandlerManager](./src/handler_manager.ts) in response to DOM events. It forwards those events to interaction processors that live in [src/ui/handler](./src/handler), which accumulate a merged [HandlerResult](./src/handler_manager.ts#L64) that kick off a render frame loop, decreasing the inertia and nudging map.transform by that amount on each frame from [HandlerManager#\_updateMapTransform()](./src/handler_manager.ts#L413). That loop continues in the inertia decreases to 0.
- Both camera and handler_manager are responsible for firing `move`, `zoom`, `movestart`, `moveend`, ... events on the map after they update transform. Each of these events (along with style changes and data load events) triggers a call to [Map#\_render()](./src/map.ts#L2480) which renders a single frame of the map.
Loading

0 comments on commit 7e38a83

Please sign in to comment.