ArcGIS API for JavaScript でマップの空間参照をクライアントサイドで自由に変更できるようになりました!

ArcGIS API for JavaScript の最新バージョンである 4.23 が先日リリースされました。今回は 4.23 の新機能であるクライアントサイド側での空間参照の切り替え (投影変換) についてピックアップします。
※ 4.23 時点では 2D のアプリケーションのみの機能となっております。

test

ArcGIS API for JavaScript での空間参照

ここで、少し ArcGIS API for JavaScript においての空間参照について解説いたします。マップ上で空間参照の異なる 2 つのレイヤーを同時に表示する場合、正しく重ねて表示させるためには、どちらかのレイヤーの地図画像を歪めて(投影変換を行って)出力させる必要があります。ArcGIS API for JavaScript では、必要に応じて自動的にリアルタイムに投影変換を行っています(正確には、地図データをホストしているサーバーに対し投影変換して出力するようにリクエストします)。

マップにおいては空間参照の定義は、マップ上に最初に追加されたレイヤー (ここではベースマップとします) 空間参照がマップ自体の空間参照として使用されます。ベースマップを設定後、追加した操作レイヤー (フィーチャ レイヤーやマップ イメージ レイヤー) の空間参照がベースマップと異なるものであった場合でも、操作レイヤーはベースマップの座標系に自動で投影変換をされます。ArcGIS Online のベースマップにしておいていただく限りは、デフォルトの空間参照は Web メルカトルの空間参照になります。

ArcGIS API for JavaScript での空間参照の詳細についてはこちらでも解説していますので、併せてご参考ください。

クライアント側の投影変換

先述の通り、ArcGIS API for JavaScript を使用するうえで、これまでは空間参照を変更したい場合はベースマップに定義されている空間参照を変更する必要がございました。4.23 では、MapViewspatialReference プロパティを直接変更するだけで、シームレスにマップの空間参照を簡単に切り替えることができるようになりました。ユーザーが空間参照を変更できないようにするためには、適宜 spatialReferenceLocked プロパティを設定することで操作を制限することができます。

サンプルコード:

// FeatureLayer クラスの作成
const layer = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0"
});

// Map クラスの作成
const mapMain = new Map({
    // ここでサンプルのフィーチャー レイヤーを指定しているため、マップの空間参照は Web メルカトル (wkid:4326)
    layers: [layer]
});

// MapView クラスの作成
const mapView = new MapView({
    map: mapMain,
    // マップの空間参照を Web メルカトル (wkid:4326) から、平面直角座標系第 9 系 (wkid: 6677) に変更
    SpatialReference: [{
        wkid: 6677
    }]
});

また、従来からある機能の BasemapGallery ウィジェットで座標系の異なるベースマップ追加することができず、座標系の異なるベースマップを変更するには Map および MapView を作成しなおす必要がありました。4.23 より、異なる空間参照を持つベースマップを BasemapGallery に追加することができ、ユーザーが BasemapGallery から選択できるようにすることができます。同様に、BasemapToggle は異なる空間参照を持つ 2 つのベースマップを切り替えることができます。

こちらのサンプルコードについては、以下をご参考ください。

現在、ほとんどの Web マップはメルカトル図法で表現されています。これはベースマップの座標系がメルカトル図法で提供されていることによるものでした。世界範囲で統計地図を正しく伝えるなら、正積図法を使うべきですが、独自の座標系を定義したベースマップを作成するには多少の労力が必要でした。今回の機能拡張によって、より誤解のない Webマップの表現がより効率よく作成できるようになりました。

関連リンク

フォローする