L7 Map
npm install @antv/l7-mapMap fork from maplibre-gl-js@4.3.2, keep event loop, responds user interaction and updates the internal state of the map (current viewport, camera angle, etc.)
``mermaid
sequenceDiagram
actor user
participant DOM
participant handler_manager
participant handler
participant camera
participant transform
participant map
user->>camera: map#setCenter, map#panTo
camera->>transform: update
camera->>map: fire move event
map->>map: _render()
user->>DOM: resize, pan,
click, scroll,
...
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 holds the current viewport details (pitch, zoom, bearing, bounds, etc.). Two places in the code update transform directly:
- Camera (parent class of Map) in response to explicit calls to Camera#panTo, Camera#setCenter
- HandlerManager in response to DOM events. It forwards those events to interaction processors that live in src/ui/handler, which accumulate a merged HandlerResult that kick off a render frame loop, decreasing the inertia and nudging map.transform by that amount on each frame from HandlerManager#\_updateMapTransform(). 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() which renders a single frame of the map.