JavaScript の Map / View に関する逆引きトピック集

はじめに

2025 年 10 月に行われた ArcGIS Online のバージョンアップで、ArcGIS Experience Builder でマップを表示する縮尺をユーザーが任意に設定できるようになりました。多くのユーザーに望まれていた待望の機能追加ですが、ArcGIS Experience Builder のベースとなっている ArcGIS Maps SDK for JavaScript では実は比較的簡単に実装できます。
このほかにも ArcGIS Maps SDK for JavaScript には、あまり知られていない地図表示に関する設定が様々に用意されています。そこで本記事では JavaScript での地図表示を担う Map および View に関する隠れた便利機能を逆引き的にご紹介します。

表示する縮尺を任意に設定したい
マップの拡大 / 縮小を縮尺レベルに依存しないようにしたい
マップを移動できる範囲を制限したい
マップが表示される縮尺範囲 / 縮尺レベルを制限したい
マップを回転できないようにしたい

本記事でご紹介するコードはすべてマップコンポーネントを使用してアプリを作成したケースでご紹介しますが、従来のクラスを使ってアプリを作成された場合でも同様です。

各トピックの画像をクリックすると、実際のアプリとして動作を確認できます。

2D マップ

表示する縮尺を任意に設定したい

マップを任意の縮尺で表示したい場合 MapView.constraints の lods プロパティと snapToZoom プロパティを使います。MapView.constraints.lods に任意の縮尺を定義した LOD クラスの配列を設定し、MapView.constraints.snapToZoom に true を設定します。

// arcgis-map コンポーネントを取得し、View の作成を待機
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();

// arcgis-map から View を取得
const view = arcgisMap.view;

view.constraints = {
  // デフォルトで true の設定
  snapToZoom: true,
  // 表示したい縮尺を定義
  lods: [{
    level: 0,
    scale: 10000000
  },{
    level: 1,
    scale: 5000000
  },{
    level: 2,
    scale: 1000000
  },{
    level: 3,
    scale: 500000
  },{
    level: 4,
    scale: 250000
  },{
    level: 5,
    scale: 100000
  },{
    level: 6,
    scale: 50000
  },{
    level: 7,
    scale: 25000
  },{
    level: 8,
    scale: 10000
  },{
    level: 9,
    scale: 5000
  },{
    level: 10,
    scale: 2500
  }]
};

表示する縮尺を任意に設定

マップの拡大 / 縮小を縮尺レベルに依存しないようにしたい

マップの拡大 / 縮小を縮尺レベルに依存しない自由な縮尺で表示したい場合、MapView.constraints の snapToZoom プロパティを使います。

MapView.constraints.snapToZoom を false に設定することで、マウスホイールの操作によるマップの拡大 / 縮小が縮尺レベルに依存しない、細かな表示の調整が行えます。

Zoom コンポーネント (＋ / －ボタン) によるマップの拡大 / 縮小は変わらず縮尺レベルに依存します。

// arcgis-map コンポーネントを取得し、View の作成を待機
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();

// arcgis-map から View を取得
const view = arcgisMap.view;

// マップの拡大 / 縮小を縮尺レベルに依存しない設定に
view.constraints = {
  snapToZoom: false
}

縮尺レベルに依存しまいマップの拡大 / 縮小

マップを移動できる範囲を制限したい

マップを表示し、移動できる範囲を埼玉県内のみとしたいなど、マップを移動できる範囲を制限したい場合、MapView.constraints の geometry プロパティを使用します。

MapView.constraints.geometry にマップを表示、移動可能な範囲を示す Extent または Polygon を設定することで、マップの移動範囲を設定したジオメトリー内に制限できます。

// arcgis-map コンポーネントを取得し、View の作成を待機
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();

// arcgis-map から View を取得
const view = arcgisMap.view;

// 埼玉県の範囲を示す Extent を作成
const saitamaExtent = new Extent({
  xmin: 15441278.0144287,
  ymin: 4266740.25050772,
  xmax: 15573634.4647773,
  ymax: 4339686.83426497,
  spatialReference: {wkid: 3857}
});

// マップの移動範囲に作成した Extent を設定
view.constraints = {
  geometry: saitamaExtent
};

マップを移動できる範囲を制限

マップを表示できる縮尺範囲 / 縮尺レベルを制限したい

ArcGIS Maps SDK for JavaScript はデフォルトでベースマップの縮尺レベルの範囲がマップの拡大、縮小の範囲になりますが、プログラムからその範囲を制限することもできます。

縮尺の値で制限したい場合は MapView.constraints の maxScale / minScale を、縮尺レベルで制限したい場合は MapView.constraints の maxZoom / minZoom プロパティを設定することで、不要にマップが拡大、縮小されることを防げます。

// arcgis-map コンポーネントを取得し、View の作成を待機
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();

// arcgis-map から View を取得
const view = arcgisMap.view;

// 縮尺レベルで拡大 / 縮小の範囲を制限
view.constraints = {
  maxZoom: 4,
  minZoom: 12
};

マップの拡大 / 縮小できる範囲を制限

マップを回転できないようにしたい

ArcGIS Maps SDK for JavaScript の 2D マップでは、マウスの右ボタンのドラッグでマップを回転することができます。この振る舞いは MapView.constraints の rotationEnabled プロパティを false に設定することで無効にできます。

// arcgis-map コンポーネントを取得し、View の作成を待機
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();

// arcgis-map から View を取得
const view = arcgisMap.view;

// マップの回転を無効化
view.constraints = {
  rotationEnabled: false
};

マップの回転を無効化

3D シーン

シーンを表示する視点 (Camera) の高さ、角度を制限したい

3D シーンを表示する際の視点の情報として SceneView.camera プロパティがありますが、SceneView.constraints の altitude、tilt プロパティを設定することで、視点の高さと角度を制御できます。

// arcgis-scene コンポーネントを取得し、View の作成を待機
const arcgisScene = document.querySelector("arcgis-scene");
await arcgisScene.viewOnReady();

// arcgis-scene から View を取得
const view = arcgisScene.view;

// カメラの高さと角度を制限
view.constraints = {
  altitude: {
    min: 10000,
    max: 100000
  },
  tilt: {
    max: 45
  }
}

カメラの高さと角度を制限

シーンの特定の範囲を強調したい

3D シーンでは SceneLayer クラスを使用して建物などの 3D として扱われる情報をアプリに表示できますが、Map.focusAreas に強調したいエリアをポリゴンで設定することで、注目したい建物やエリアを指定し、3D シーン上で強調できます。

// arcgis-scene コンポーネントを取得し、View の作成を待機
const arcgisScene = document.querySelector("arcgis-scene");
await arcgisScene.viewOnReady();

// arcgis-scene から Map を取得
const map = arcgisScene.map;

// 強調したいエリアを Polygon で指定
const focusAreaPolygon = new Polygon({
  spatialReference : {wkid: 102100},
  rings: [[
    [15543526.3799, 4285975.3189],
    [15543484.4228, 4286321.0569],
    [15543616.9118, 4286367.8089],
    [15543641.6474, 4286352.2775],
    [15543768.1462, 4286172.9982],
    [15543815.3415, 4286078.6076],
    [15543526.3799, 4285975.3189]
  ]]
});

// 作成した Polygon を含む FocusArea を作成
const focusArea = new FocusArea({
  outline: {color: [255, 128, 128, 0.8]},
  geometries: [focusAreaPolygon]
});

// Map に FocusArea を設定
map.focusAreas.areas.add(focusArea);
map.focusAreas.style = "dark";

シーンの特定の範囲を強調

シーンを表示する範囲を制限したい (ローカルシーンのみ)

3D シーンでは、3D コンテンツを地球の球面上に表現する「グローバルシーン」と平面上に表現する「ローカルシーン」とを使い分けることができます。

ローカルシーンは「ローカル」と呼ばれるように、特定の地域を限定して表現することに適しており、SceneView.clippingArea プロパティを設定することで、シーンに表示される範囲を制限することができます。

// arcgis-scene コンポーネントを取得し、View の作成を待機
const arcgisScene = document.querySelector("arcgis-scene");
await arcgisScene.viewOnReady();

// arcgis-scene から View を取得
const view = arcgisScene.view;

// ローカル シーンを表示する Extent を作成
const clipExtent = new Extent({
  xmin: 15557883.9219,
  ymin: 4255378.8403,
  xmax: 15559941.236,
  ymax: 4257921.5574,
  spatialReference: {wkid: 102100}
});

// 作成した Extent を clippingArea に設定
view.clippingArea = clipExtent;

シーンを表示する範囲を制限

シーンの表示クオリティーを変更したい

ArcGIS Maps SDK for JavaScript の 3D シーンは WebGL2 が有効な 64 ビットブラウザーがサポートされています。一般的な Web ブラウザーであれば問題なくご利用いただけますが、ご利用の端末やシーンに追加されたレイヤーによっては良好なパフォーマンスが得られない場合があります。

SceneView では qualityProfile プロパティから 3D シーンの表示クオリティーを変更できます。基本的に qualityProfile プロパティはユーザーの端末に応じて自動的に調整されるため、コーディングによる調整は不要ですが、端末のメモリー不足や 3D シーンに表示する情報量が多い場合など、アプリの表示が良好でなくなってしまうケースを想定したクオリティーの調整機能をアプリに組み込むことができます。

// arcgis-scene コンポーネントを取得し、View の作成を待機
const arcgisScene = document.querySelector("arcgis-scene");
await arcgisScene.viewOnReady();

// arcgis-scene から View を取得
const view = arcgisScene.view;

// SceneView の表示クオリティーを "低" に設定
view.qualityProfile = "low";

シーンの表示クオリティーを変更

3D シーンの使用しているメモリーを始めとした様々なリソースは SceneView.performanceInfo プロパティから確認できるので、この情報をもとに適宜クオリティーを調整するといった運用も可能です。

シーンの地下を表示したい

3D シーンはデフォルトで視点を地下に移動することができないため、地下に表現された情報を確認することができません。Map.ground.navigationConstraint プロパティを設定すると、カメラを地下に潜り込ませることができ、地下に表現されたデータも確認できるようになります。

// arcgis-scene コンポーネントを取得し、View の作成を待機
const arcgisScene = document.querySelector("arcgis-scene");
await arcgisScene.viewOnReady();

// arcgis-scene から Map を取得
const map = arcgisScene.map;

// 3D シーンでカメラを地下に移動できるように設定
map.ground.navigationConstraint = "none";

シーンの地下を表示

まとめ

本記事では、ArcGIS Maps SDK for JavaScript の Map および View クラスで活用できる、意外と知られていない便利設定を逆引き形式でご紹介しました。縮尺の細かな制御から 3D シーンの視点・表示範囲の制限まで、ほんの数行のコードで表現の自由度を大きく高めることができます。ぜひお使いのアプリにもこれらの機能を取り込んでいただき、ユーザー体験の向上に役立ててみてください。

JavaScript の Map / View に関する逆引きトピック集