第09章 - 相机视图与坐标系

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [116.391, 39.907],
  zoom: 10,
  bearing: -20,
  pitch: 45,
  roll: 0
});

console.log(map.getCenter().toArray()); // [116.391, 39.907]
console.log(map.getZoom(), map.getBearing(), map.getPitch(), map.getRoll());

// 经纬度 → 屏幕像素
const p = map.project([116.391, 39.907]);
console.log(p.x, p.y);

// 屏幕像素 → 经纬度
const lngLat = map.unproject([400, 300]);
console.log(lngLat.toArray());

// 经纬度 → Mercator 单位坐标（0–1）
const mc = maplibregl.MercatorCoordinate.fromLngLat([116.391, 39.907], 0);
console.log(mc.x, mc.y, mc.z);

// Mercator → 经纬度
console.log(mc.toLngLat().toArray());

// 在自定义图层里把"米"换算成 Mercator 单位
const origin = maplibregl.MercatorCoordinate.fromLngLat([116.391, 39.907], 100);
const metersToMercator = origin.meterInMercatorCoordinateUnits();
console.log('1 米 =', metersToMercator, 'Mercator 单位');

// 四种等价的构造
new maplibregl.LngLatBounds([116.2, 39.8, 116.6, 40.0]);           // [west, south, east, north]
new maplibregl.LngLatBounds([116.2, 39.8], [116.6, 40.0]);          // 西南 + 东北
new maplibregl.LngLatBounds({west: 116.2, south: 39.8, east: 116.6, north: 40.0});

const b = new maplibregl.LngLatBounds();
b.extend([116.2, 39.8]).extend([116.6, 40.0]);                      // 逐点扩展

console.log(b.getCenter().toArray());
console.log(b.contains([116.39, 39.9])); // true

// 跨 180° 经线：从 170°E 到 170°W
const crossing = new maplibregl.LngLatBounds([170, -10, -170, 10]);
crossing.adjustAntiMeridian();
console.log(crossing.getWest(), crossing.getEast()); // 170, 190（内部展开）

// 瞬时
map.jumpTo({center: [121.47, 31.23], zoom: 12, bearing: 0, pitch: 0});

// 相对：向下平移 100 px
map.panBy([0, 100], {duration: 300});

// 动画：飞过去
map.flyTo({
  center: [121.47, 31.23],
  zoom: 13,
  bearing: 30,
  pitch: 50,
  speed: 1.2,
  curve: 1.42
});

// 适配范围：给出四角，自动算中心与 zoom
map.fitBounds(
  [[116.2, 39.8], [116.6, 40.0]],
  {padding: {top: 60, bottom: 40, left: 40, right: 40}, duration: 800}
);

// 只算不动：用于"预览将要跳到哪里"
const target = map.cameraForBounds([[116.2, 39.8], [116.6, 40.0]], {padding: 40});
if (target) {
  console.log(target.center, target.zoom);
}

// 自动驾驶类场景：先算，再自己决定何时应用
map.jumpTo(target);

// 尊重系统设置：关键动效标 essential，其余让它自动降级
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

map.flyTo({
  center: [121.47, 31.23],
  zoom: 13,
  essential: !reduced,     // 用户要求减少动效时不强制动画
  duration: reduced ? 0 : undefined
});

// 估算当前视口的实际范围（米）
function viewportMeters(map) {
  const b = map.getBounds();
  const sw = b.getSouthWest();
  const ne = b.getNorthEast();
  const widthMeters = sw.distanceTo(new maplibregl.LngLat(ne.lng, sw.lat));
  const heightMeters = sw.distanceTo(new maplibregl.LngLat(sw.lng, ne.lat));
  return {widthMeters: Math.round(widthMeters), heightMeters: Math.round(heightMeters)};
}

map.on('moveend', () => console.log(viewportMeters(map)));

map.setMaxBounds([[73, 18], [135, 54]]);

// 只约束纬度轴（6.11+）：经度不限
map.setMaxBounds([[73, 18], [135, 54]], {constrainLng: false});

// 自定义约束：不允许进入某个禁区
map.setTransformConstrain(({center, zoom, bearing, pitch}) => {
  // 返回修正后的相机；具体签名见 TransformConstrainFunction
  return {center, zoom, bearing, pitch};
});

map.setTerrain({source: 'dem', exaggeration: 1.5});

// 查询某点地形高程（米），没有地形时返回 null
const elev = map.queryTerrainElevation([116.391, 39.907]);
console.log('高程', elev);

// 查询"相机看到的目标点"海拔
console.log(map.getCameraTargetElevation());

// 中心点海拔：默认随地形自动更新
console.log(map.getCenterElevation());

// 关闭自动贴地（pitch > 90 时必须）
map.setCenterClampedToGround(false);