Design and Implementation of AMap GIS SDK for Smart Traffic Map Visualization

Background

Map space visualization is a core function of AMap Smart Traffic front‑end business, supporting large‑scale map rendering for city traffic brain, whole‑scene intelligent screens, etc. It must display data across provinces, cities, districts, business circles, and custom areas, handling massive data, many element types, and complex logical presentation.

AMap JSAPI provides low‑level map rendering and overlay capabilities, but for industry applications it suffers from high development difficulty, poor framework integration, and lack of industry‑specific layer features.

To address these issues, a reusable, extensible, and easy‑to‑extend map SDK was designed, becoming the preferred solution for smart‑traffic map space visualization.

Solution Design

Overall Framework Design

The AMap Smart Traffic team designed a map space visualization SDK based on extensive project practice. The architecture includes:

(1) MapContainer is the SDK base that hosts the map engine and loads overlay layers and framework modules.

(2) Configuration Controller receives user settings (API key, optional features, styles) and propagates updates to other modules.

(3) SourceLoader standardizes incoming data (GeoJSON, WKT, lists) into a unified format for distribution to the map container and layers.

(4) Framework Adaptation Layer isolates Vue, React, etc., wrapping core modules as compatible components for multi‑framework extension.

(5) Event Queue Mechanism ensures ordered execution of map API calls, which are otherwise asynchronous and potentially out‑of‑order.

State‑Driven Implementation

1. Lifecycle Design

The native AMap JS API follows a command‑style, imperative pattern:

// Create map
const map = new AMap.Map(options);
// Add overlay
const marker = new AMap.Marker(markerOptions);
map.add(marker);
// Update overlay
marker.setContext(newContext);
// Remove overlay
map.remove(marker);
map.destroy();

This imperative style clashes with component‑based frameworks (Vue, React). To improve maintainability, the SDK abstracts a complete lifecycle for each business layer, including registration, loading, updating, and destruction phases.

The lifecycle methods include:

RegisterMap – triggered after the map base loads.

beforeAppendGroup / appendGroup / afterAppendGroup – for batch loading of grouped elements.

beforeAppendComponent / appendComponent / afterAppendComponent – core element loading logic, with hooks for validation, event registration, and animation.

beforeRemoveComponent / removeComponent / afterRemoveComponent – clean‑up, including event unbinding and timer disposal.

shouldUpdate / diff / updateComponent – diff‑based updates to avoid full re‑rendering.

2. Plugin Implementation

Reusable built‑in plugins (e.g., scheme for timed refresh, animate for animations, event for interaction registration) are designed to hook into the lifecycle functions, ensuring consistent behavior across layers.

3. Asynchronous Process Consistency

The underlying map engine imposes strict ordering:

Map base creation must precede all other processes.

Loca/L7 initialization follows map base creation.

Map elements load after the base and must be destroyed before the base is destroyed.

State and result consistency must be maintained even under rapid successive updates.

Because framework lifecycles are asynchronous, the SDK introduces an event‑queue controller that serializes all map‑engine calls, prioritizes base creation, and filters out mutually canceling operations to improve performance.

Additional Optimizations

Map Instance Caching

Creating and destroying a map base is costly. A cache that holds up to two map instances hides and reuses bases instead of destroying them, reducing overhead during route changes.

Multi‑Instance Isolation

The SDK now supports multiple isolated SDK instances on a single page, each with its own event queue and lifecycle control, and improved layer‑to‑base association logic.

GL Rendering Context GC Issue

When using L7, WebGLRenderingContext resources were not released, leading to crashes after repeated create/destroy cycles. The fix involves resetting canvas width/height to 0 before Vue unmounts, forcing GC of the rendering context.

Multidimensional Data Comparison

Extensive project practice demonstrates the SDK’s business and technical value, with measurable improvements in data comparison before and after SDK adoption (illustrated by accompanying charts).

Future Outlook

The SDK has matured through extensive real‑world use, offering simplicity, stability, and performance. Future plans include publishing the SDK on a developer portal to better serve the community.