はじめに
ここ最近は、フロントエンド側の描画エンジンとして、Esri の ArcGIS API for JavaScript 、Mapbox の Mapbox GL JS、Uber の deck.gl をよく触ったりしています。ライブラリは、JavaScript なので、フロントエンド側の技術のスピードが早いため、なかなか全てをキャッチアップするのは大変です。そのため、自分が興味があるところに絞ってキャッチアップはしています。
昨日、Esri の ArcGIS API for JavaScript も 4.16 がリリースされたので、今回は新機能について紹介していきたいと思います。この各社の新機能や新情報を見るのは毎回楽しみにしています。
ArcGIS API for JavaScript とは
ArcGIS API for JavaScript については、過去にも何度か記事で取り上げてはいますが、地図アプリケーションを作成するための JavaScript の API になります。2D/3D 地図に対応しており、WebGL を使用しているため、3D でも快適に描画することができます。
freedom-tech.hatenablog.com freedom-tech.hatenablog.com
ArcGIS API for JavaScript のリリース情報
幾つか特徴のある情報を紹介したいと思います。
レイヤー ブレンディング
2つ以上のレイヤーを重ねて表現することができるレイヤー ブレンディングと呼ばれる新しい機能が追加されました。 この機能を使用すると、2つ以上のレイヤーを重ねて、30 種類以上ある blendMode の 1 つを適用して、興味深いエフェクトを作成したり、新しいレイヤーのように見えるものを作成したりすることができます。これは、レイヤーの blendMode プロパティを設定して、目的のブレンドモードを適用することで実現することができます。
次の右側の画像は、栽培されている作物の領域を黒色で表示する imageryLayer に blendMode の destination-in を適用した結果を示しています。このレイヤーは、郡ごとに表示している作物のフィーチャ レイヤーの上に表示されています。blendMode の destination-in を適用した結果は、2 つのレイヤーが重なっている特徴を示しています。
1 行のコードで、米国内の耕作地を示すフォーカスしたマップを作成することができます。blendMode の動作を確認するには、レイヤー ブレンディングのサンプルをご参照ください。
blendmode-grouplayer のサンプル
クラスタリングの更新
ポイントクラスタのラベル付け
クラスターによって表されるポイントの数でクラスターにラベルを付けることができます。
featurereduction-cluster のサンプル
あるいは、数値フィールドの平均値や文字列フィールドの優勢値のラベル付けをすることができます。また、クラスタのポップアップで任意の要約した統計を表示することができます。
featurereduction-cluster-filter-slider のサンプル
ラベル付けは、FeatureReductionCluster の labelingInfo プロパティで構成することができます。クラスターにラベルを付ける場合、すべての LabelClass 機能を利用することができます。
layer.featureReduction = { type: "cluster", clusterRadius: "100px", clusterMinSize: "24px", clusterMaxSize: "60px", labelingInfo: [{ // disabling label deconfliction ensures // all cluster counts are displayed deconflictionStrategy: "none", labelExpressionInfo: { // Displays the cluster count in the center of the cluster expression: "Text($feature.cluster_count, '#,###')" }, symbol: { type: "text", color: "#004a5d", font: { weight: "bold", family: "Noto Sans", size: "12px" } }, labelPlacement: "center-center", }] };
以下は、クラスターのラベルで参照できる集計フィールドです。
// cluster count $feature.cluster_count // If a number field is used in the layer's renderer // you can display the average value of this field // within each cluster $feature.cluster_avg_{fieldName} // If a UniqueValueRenderer is applied to the layer // you can display the predominant type of // features in each cluster $feature.cluster_type_{fieldName}
OGCFeatureLayer
新しい OGCFeatureLayer は、MapView や SceneView で使用することで、OGC API のフィーチャ サービスから個々のコレクションに基づいたレイヤーを作成することができます。
layers-ogcfeaturelayer/ のサンプル
3D の更新
水の反射
建物や山などの 3D オブジェクトが水面に映り込み、WaterSymbol3DLayer を使用したシーンがこれまで以上にリアルに見えるようになりました。さらに、トップダウンビューからは、アニメーション化された波や反射した太陽光がより鮮明に見えます。
更新されたサンプルをチェックして、水辺の反射を切り替える方法を確認してください。
統合されたメッシュの修正
クライアント側の修正を適用して、IntegratedMeshLayer の形状を変更します。新しいクラス SceneModifications は、ポリゴンのジオメトリを使用して統合メッシュのアウトラインや平坦化した部分を変更します。これにより、メッシュの特定の領域にフォーカスしたり、アウトラインをトリミングしたり、単一の IntegratedMeshLayer を使用して代替の 3D データをロードしたりすることができます。
layers-integratedmeshlayer-modification のサンプル
新しい BuildingExplorer ウィジェット
新しい BuildingExplorer ウィジェットを使用して、BIM モデルから得られる包括的な建物データの理解を深めます。事前に設定された直感的な UI コンポーネントにより、シーン内の1つまたは複数の建物の特定のレベル、カテゴリ、または建設フェーズを分離することができます。
更新された Filter BuildingSceneLayer サンプルの BuildingExplorer をご参照ください。
スライスツールの改良
シーン内の内部や地下の詳細について、ユーザーに固有の事前定義された視点を提供します。地形や 3D オブジェクトをスライスする際に、スライス プレーンを任意に傾けたり、新しいクラス SlicePlane を使用してスライス形状をプログラムで設定することができるようになりました。
Slice サンプルをチェックして、ウィジェットの動作と UI をカスタマイズする方法について確認することができます。
シンボルの更新
CIMS 記号の線と多角形
CIMSymbol が CIMLineSymbol と CIMPolygonSymbol をサポートするようになりました。複数のシンボルレイヤーを使用して、目的の効果を達成するためにビジュアライゼーションにカスタムシンボルを作成できます。詳細については、CIM 仕様を参照してください。CIM ラインとポリゴンは、現在 3D SceneViews ではサポートされていません。制限事項の完全なリストはこちらをクリックしてください。
cim-lines-and-polygons のサンプル
マーカー記号で線を引く
SimpleLineSymbol は、2D MapView の各線記号の先頭および/または末尾に異なるスタイルのマーカー (矢印、菱形、十字など) をサポートするようになりました。マーカーは、関連するフィーチャに関する追加の視覚的な手がかりを提供することで、線の地図情報を強化することができます。
esri-symbols-LineSymbolMarker のサンプル
イメージレイヤーの更新
RasterShadedReliefRenderer と RasterColormapRenderer は 4.16 で新しくなり、ImageryLayer と ImageryTileLayer のレンダリングに使用できます。RasterShadedReliefRenderer の動作を確認するには、ImageryTileLayer - shaded reliefRenderer のサンプルを参照してください。
その他
上記以外にも幾つか更新されています。 詳細は以下のリリースノートをご確認ください。
さいごに
今回は、ArcGIS API for JavaScript 4.16 リリース情報について特徴のある機能について紹介しました。ArcGIS API for JavaScript は Mapbox GL JS や deck.gl より非常に機能が多くて、便利な GIS の機能と UI を兼ね備えたウィジェットもあるため、アプリケーションを作成する上では、比較的な少ない工数で実現することができるのも特徴だと思います。また、最新の 3D 地図に必要な機能も兼ね備えているため、業務に特化したアプリも作成することができるのかなと思います。今後のバージョンアップも楽しみなところです。次回は、Mapbox GL JS や deck.gl も紹介したいと思います。
