Function getCenter

getCenter(): void

中心座標・移動・飛行・傾き・方位角を操作する — 詳細な使用例

地図の視点（位置・ズーム・傾き・回転）を制御するメソッド群です。

中心座標

メソッド	用途
`getCenter()`	現在の中心緯度経度を取得
`setCenter(latlng)`	中心緯度経度を設定（アニメーション対応）
`getTargetLocation()`	注目地点の緯度経度を取得
`setTargetLocation(latlng)`	注目地点を設定(`setCenterOffset` 使用時に中心とずれる)

移動

メソッド	用途
`moveTo(latlng, zoom)`	緯度経度とズームを指定して移動
`flyTo(destination)`	カメラを動的に目標へ飛行移動
`moveBasedOnLatLngRect(rect)`	矩形範囲が収まるよう移動
`setCenterBasedOnLatLngList(list)`	座標リストが収まるよう移動
`getZoomLevelWithLatLngRect(rect)`	矩形が収まるズームレベルを算出
`setCenterOffset(offset)`	中心基準位置のオフセットを設定
`setMapAreaPadding(padding)`	地図領域にパディングを設定

傾き (Tilt / Polar)

メソッド	用途
`getTilt()`	現在の傾き角度を取得（度）
`setTilt(tilt)`	傾き角度を設定
`setMaxTilt(maxTilt)`	傾きの最大角度を設定（最大60度）
`setTiltWithZoomOptions(opts)`	ズーム連動傾き設定を更新
`getPolar()`	極座標を取得
`setPolar(polar)`	極座標を設定

方位角 (Direction)

メソッド	用途
`getDirection()`	現在の回転角を取得（度）
`setDirection(dir)`	回転角を設定
`setMapDirectionChangeListener(fn)`	方位角変更リスナーを設定
`clearMapDirectionChangeListener()`	方位角変更リスナーを削除
`setMapTiltChangeListener(fn)`	傾き変更リスナーを設定
`clearMapTiltChangeListener()`	傾き変更リスナーを削除

Returns void

Warning

setCenterOffset と setMapAreaPadding は同時に使えません。
flyTo の第1引数 FlightDestination は各要素をコールバック関数で返す形式です。オブジェクトのプロパティ（center/zoom/tilt）を直接渡す形式は誤りです。
setCenterBasedOnLatLngList の第3〜6引数（maxZoomLevel, padding, step, zoomLevelFixFunc）はすべて任意です。
setMaxTilt は60度以上には設定できません。

Example: flyToで視点を往復移動する

import * as GIA from '@ntj/gaia';

const LOCATION_TO = new GIA.value.LatLng(35.68142, 139.76588194);
const LOCATION_BACK = new GIA.value.LatLng(35.681109, 139.767165);

class EaseInOutCubic implements GIA.value.animation.Easing {
  calculateAnimationProgress(progress: number): number {
    if (progress < 0.5) {
      return 4 * progress ** 3;
    }
    return 1 - ((-2 * progress + 2) ** 3) / 2;
  }
}

const animationOption = new GIA.value.animation.AnimationOption(2.0, new EaseInOutCubic());

// 行き
map.flyTo(
  {
    locationCallback: () => LOCATION_TO,
    zoomLevelCallback: () => 18.5,
    tiltCallback: () => 60,
    directionCallback: () => 90,
  },
  animationOption,
);

// 戻り
map.flyTo(
  {
    locationCallback: () => LOCATION_BACK,
    zoomLevelCallback: () => 17,
    tiltCallback: () => 0,
    directionCallback: () => 0,
  },
  animationOption,
);

Example: 座標リストを全て収めて移動する

import * as GIA from '@ntj/gaia';

const points = locations.map((l) => new GIA.value.LatLng(l.lat, l.lng));
map.setCenterBasedOnLatLngList(
  points,
  true,                                              // アニメーション
  17,                                                // 最大ズームレベル
  undefined,                                         // パディング
  0.2,                                               // step
  (z) => z                                           // zoomLevelFixFunc
);

Example: moveBasedOnLatLngRectで範囲全体を収める

import * as GIA from '@ntj/gaia';

const northWest = new GIA.value.LatLng(35.70, 139.75);
const southEast = new GIA.value.LatLng(35.67, 139.79);
const rect = new GIA.object.LatLngRect(northWest, southEast);

map.moveBasedOnLatLngRect(rect, true, 18);

Example: クリック座標を緯度経度に変換し、2点間のピクセル距離を計算する

import * as GIA from '@ntj/gaia';

map.getCanvas().addEventListener('click', (ev) => {
  const latlng = map.getLatLngFromClientCoord(new GIA.value.Point(ev.clientX, ev.clientY));
  if (!latlng) return;
  console.log('クリック緯度経度:', latlng);

  // 2点間のピクセル距離（長距離移動検知などに利用）
  const origin = map.getCenter();
  const dist = GIA.util.calcPixelDistance(origin, latlng, map.getZoomLevel());
  console.log('ピクセル距離:', dist);
});

Example: 方位角変更をリアルタイムで検知する

import * as GIA from '@ntj/gaia';

map.setMapDirectionChangeListener((direction) => {
  compassIcon.style.transform = `rotate(${direction}deg)`;
});

Example: mapAreaPadding を設定/解除する

import * as GIA from '@ntj/gaia';

// 左に400pxのUIパネルがあるケース
map.setMapAreaPadding(new GIA.value.RectExtension(100, 0, 400, 0));

// パディングをクリア
map.setMapAreaPadding(new GIA.value.RectExtension(0, 0, 0, 0));

Function getCenter

中心座標

移動

傾き (Tilt / Polar)

方位角 (Direction)

Returns void

Warning

Example: flyToで視点を往復移動する

Example: 座標リストを全て収めて移動する

Example: moveBasedOnLatLngRectで範囲全体を収める

Example: クリック座標を緯度経度に変換し、2点間のピクセル距離を計算する

Example: 方位角変更をリアルタイムで検知する

Example: mapAreaPadding を設定/解除する

See

Settings

Member Visibility

Theme

On This Page