Map State

Map state includes the current view parameters of the map, such as center point, zoom level, rotation angle, tilt angle, etc. The SDK provides rich methods to get and set these states.

Getting Map State

Get Center Point

const center = sdk.getCenter();
console.log("Map center:", center); // [116.39, 39.9]

Get Zoom Level

const zoom = sdk.getZoom();
console.log("Zoom level:", zoom); // 10

Get Bounds

const bounds = sdk.getBounds();
console.log("Map bounds:", bounds);
// [[minLng, minLat], [maxLng, maxLat]]

Get Rotation Angle

const bearing = sdk.getBearing();
console.log("Rotation angle:", bearing); // 0-360

Get Tilt Angle

const pitch = sdk.getPitch();
console.log("Tilt angle:", pitch); // 0-60

Setting Map State

Set Center Point

// Direct setting
sdk.setCenter([116.39, 39.9]);

// With animation
sdk.flyTo({
  center: [116.39, 39.9],
  zoom: 12,
  duration: 2000,
});

Set Zoom Level

// Direct setting
sdk.setZoom(12);

// With animation
sdk.flyTo({
  zoom: 12,
  duration: 1000,
});

Set Rotation Angle

// Direct setting
sdk.setBearing(45);

// With animation
sdk.flyTo({
  bearing: 45,
  duration: 1500,
});

Set Tilt Angle

// Direct setting
sdk.setPitch(60);

// With animation
sdk.flyTo({
  pitch: 60,
  duration: 1500,
});

Fit Bounds

sdk.fitBounds(
  [[116.0, 39.0], [117.0, 40.0]], // Bounds
  {
    padding: 50, // Padding
    duration: 1000, // Animation duration
  }
);

Listening to State Changes

Listen to Zoom Changes

sdk.on("zoom", () => {
  const zoom = sdk.getZoom();
  console.log("Zoom level changed:", zoom);
  
  // Execute different operations based on zoom level
  if (zoom > 10) {
    // Show detail layers
    sdk.showLayers(["detail-layer"]);
  } else {
    // Hide detail layers
    sdk.hideLayers(["detail-layer"]);
  }
});

Listen to Move Changes

sdk.on("move", () => {
  const center = sdk.getCenter();
  console.log("Map center changed:", center);
});

Listen to Rotation Changes

sdk.on("rotate", () => {
  const bearing = sdk.getBearing();
  console.log("Rotation angle changed:", bearing);
});

Combined State Operations

Set Multiple States Simultaneously

sdk.flyTo({
  center: [116.39, 39.9],
  zoom: 12,
  bearing: 45,
  pitch: 60,
  duration: 2000,
});

Save and Restore State

// Save current state
const savedState = {
  center: sdk.getCenter(),
  zoom: sdk.getZoom(),
  bearing: sdk.getBearing(),
  pitch: sdk.getPitch(),
};

// Restore state
sdk.flyTo({
  ...savedState,
  duration: 1000,
});

Animation Options

The flyTo method supports rich animation options:

sdk.flyTo({
  center: [116.39, 39.9],
  zoom: 12,
  bearing: 0,
  pitch: 0,
  duration: 2000,        // Animation duration (milliseconds)
  easing: (t) => t * (2 - t), // Easing function
  essential: true,       // Whether to skip animation on low-performance devices
});

Range Limits

Set Zoom Range

const sdk = new navMap.MapSDK({
  container: "map",
  minZoom: 2,   // Minimum zoom level
  maxZoom: 18,  // Maximum zoom level
});

Set Bounds Limits

const sdk = new navMap.MapSDK({
  container: "map",
  maxBounds: [
    [116.0, 39.0], // Southwest corner
    [117.0, 40.0]  // Northeast corner
  ],
});

Practical Examples

Example 1: Return to Initial Position

const initialState = {
  center: [116.39, 39.9],
  zoom: 10,
  bearing: 0,
  pitch: 0,
};

function resetMap() {
  sdk.flyTo({
    ...initialState,
    duration: 1000,
  });
}

Example 2: Fit to Feature

function fitToFeature(feature) {
  const coordinates = feature.geometry.coordinates;
  
  if (feature.geometry.type === "Point") {
    // Point feature: center and set appropriate zoom level
    sdk.flyTo({
      center: coordinates,
      zoom: 15,
      duration: 1000,
    });
  } else {
    // Line or polygon feature: fit bounds
    const bounds = calculateBounds(coordinates);
    sdk.fitBounds(bounds, {
      padding: 50,
      duration: 1000,
    });
  }
}

Example 3: Responsive Map State

// Listen to window resize, adjust map
window.addEventListener("resize", () => {
  sdk.resize(); // Recalculate map size
});

// Listen to zoom changes, dynamically adjust layers
sdk.on("zoom", () => {
  const zoom = sdk.getZoom();
  
  if (zoom < 8) {
    // Low zoom level: show overview layers
    sdk.showLayers(["overview-layer"]);
    sdk.hideLayers(["detail-layer"]);
  } else {
    // High zoom level: show detail layers
    sdk.hideLayers(["overview-layer"]);
    sdk.showLayers(["detail-layer"]);
  }
});

Notes

1. State Setting Timing: Ensure state is set after the map loadComplete event
2. Performance Considerations: Frequent state changes may affect performance, consider using debouncing
3. Animation Duration: Set animation duration reasonably based on user experience, usually 500-2000ms is appropriate
4. Bounds Checking: When setting center point, check if it exceeds map bounds