地图状态

地图状态包括地图的当前视图参数，如中心点、缩放级别、旋转角度、倾斜角度等。SDK 提供了丰富的方法来获取和设置这些状态。

获取地图状态

获取中心点

const center = sdk.getCenter();
console.log("地图中心:", center); // [116.39, 39.9]

获取缩放级别

const zoom = sdk.getZoom();
console.log("缩放级别:", zoom); // 10

获取边界范围

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

获取旋转角度

const bearing = sdk.getBearing();
console.log("旋转角度:", bearing); // 0-360

获取倾斜角度

const pitch = sdk.getPitch();
console.log("倾斜角度:", pitch); // 0-60

设置地图状态

设置中心点

// 直接设置
sdk.setCenter([116.39, 39.9]);

// 带动画效果
sdk.flyTo({
  center: [116.39, 39.9],
  zoom: 12,
  duration: 2000,
});

设置缩放级别

// 直接设置
sdk.setZoom(12);

// 带动画效果
sdk.flyTo({
  zoom: 12,
  duration: 1000,
});

设置旋转角度

// 直接设置
sdk.setBearing(45);

// 带动画效果
sdk.flyTo({
  bearing: 45,
  duration: 1500,
});

设置倾斜角度

// 直接设置
sdk.setPitch(60);

// 带动画效果
sdk.flyTo({
  pitch: 60,
  duration: 1500,
});

适应边界范围

sdk.fitBounds(
  [[116.0, 39.0], [117.0, 40.0]], // 边界范围
  {
    padding: 50, // 边距
    duration: 1000, // 动画时长
  }
);

监听状态变化

监听缩放变化

sdk.on("zoom", () => {
  const zoom = sdk.getZoom();
  console.log("缩放级别变化:", zoom);
  
  // 根据缩放级别执行不同操作
  if (zoom > 10) {
    // 显示详细图层
    sdk.showLayers(["detail-layer"]);
  } else {
    // 隐藏详细图层
    sdk.hideLayers(["detail-layer"]);
  }
});

监听移动变化

sdk.on("move", () => {
  const center = sdk.getCenter();
  console.log("地图中心变化:", center);
});

监听旋转变化

sdk.on("rotate", () => {
  const bearing = sdk.getBearing();
  console.log("旋转角度变化:", bearing);
});

状态组合操作

同时设置多个状态

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

保存和恢复状态

// 保存当前状态
const savedState = {
  center: sdk.getCenter(),
  zoom: sdk.getZoom(),
  bearing: sdk.getBearing(),
  pitch: sdk.getPitch(),
};

// 恢复状态
sdk.flyTo({
  ...savedState,
  duration: 1000,
});

动画选项

flyTo 方法支持丰富的动画选项：

sdk.flyTo({
  center: [116.39, 39.9],
  zoom: 12,
  bearing: 0,
  pitch: 0,
  duration: 2000,        // 动画时长（毫秒）
  easing: (t) => t * (2 - t), // 缓动函数
  essential: true,       // 是否在低性能设备上跳过动画
});

限制范围

设置缩放范围

const sdk = new navMap.MapSDK({
  container: "map",
  minZoom: 2,   // 最小缩放级别
  maxZoom: 18,  // 最大缩放级别
});

设置边界限制

const sdk = new navMap.MapSDK({
  container: "map",
  maxBounds: [
    [116.0, 39.0], // 西南角
    [117.0, 40.0]  // 东北角
  ],
});

实用示例

示例1：回到初始位置

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

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

示例2：根据要素自适应

function fitToFeature(feature) {
  const coordinates = feature.geometry.coordinates;
  
  if (feature.geometry.type === "Point") {
    // 点要素：居中并设置合适的缩放级别
    sdk.flyTo({
      center: coordinates,
      zoom: 15,
      duration: 1000,
    });
  } else {
    // 线或面要素：适应边界
    const bounds = calculateBounds(coordinates);
    sdk.fitBounds(bounds, {
      padding: 50,
      duration: 1000,
    });
  }
}

示例3：响应式地图状态

// 监听窗口大小变化，调整地图
window.addEventListener("resize", () => {
  sdk.resize(); // 重新计算地图尺寸
});

// 监听缩放变化，动态调整图层
sdk.on("zoom", () => {
  const zoom = sdk.getZoom();
  
  if (zoom < 8) {
    // 低缩放级别：显示概览图层
    sdk.showLayers(["overview-layer"]);
    sdk.hideLayers(["detail-layer"]);
  } else {
    // 高缩放级别：显示详细图层
    sdk.hideLayers(["overview-layer"]);
    sdk.showLayers(["detail-layer"]);
  }
});

注意事项

1. 状态设置时机：确保在地图 loadComplete 事件后再设置状态
2. 性能考虑：频繁的状态变化可能影响性能，考虑使用防抖
3. 动画时长：根据用户体验合理设置动画时长，通常 500-2000ms 较为合适
4. 边界检查：设置中心点时注意检查是否超出地图边界