ArcGIS API for Javascript ~ シンボルをカスタマイズできる CIMSymbol の紹介 ~
ArcGIS API for JavaScript を使用して Web アプリケーションを作成していて、「既存で用意されているシンボルでは思うように表現ができない。」という悩みを持たれたことがある方もいらっしゃるかと思います。そういった場面で役立つのが CIMSymbol です。
CIMSymbol を簡単に説明をすると自分でシンボルのデザインをカスタマイズできるというものです。
本記事では、CIMSymbol について米国 Esri 社の ArcGIS Blog の「Create points, lines, and polygons using CIMSymbols」という記事で詳しく紹介されているため、翻訳をして紹介をしたいと思います。
4.16 リリースより、ArcGIS API for JavaScript は 2D MapViews でポイント、ライン、ポリゴンの CIMSymbol をサポートするようになりました。CIMSymbol は、フィーチャやグラフィックスを表示するための高品質でスケーラブルなベクトル シンボルで、どのズーム レベルでもぼやけずに正確に表示されます。CIMシンボルの最大の特徴は、完全にカスタマイズできることです。複数のシンボルレイヤーを組み込むことができ、ダイナミックに更新することができます。
ArcGIS API for JavaScript で CIMSymbol クラスを使用して作成できるラインとポリゴンの例をいくつかご紹介します。
「CIM」とは何ですか？
CIM とは Esri Cartographic Information Model のことで、GIS データセットの地図情報を永続的に転送するために使用されるマップ コンテンツ仕様です。CIM はすでに ArcGIS Pro でシンボルを作成するために使用されており、その高度なシンボルを ArcGIS API for JavaScript で実現したいと考えました。CIM とその仕組みの詳細については、CIM 仕様をご覧ください。
ArcGIS API for JavaScript で CIM はどのように使用されていますか？
CIMSymbol
CIMSymbol は、CIMSymbol.data プロパティに CIMSymbolReference JSON を設定することで作成されます。CIMSymbol の作成方法については、ArcGIS API for JavaScript ドキュメントの「API リファレンス」と「サンプル コード」に例がありますが、ドキュメントの大部分は CIM 仕様書に記載されています。
// require(["esri/symbols/CIMSymbol"], function(CIMSymbol) const cimSymbol = new CIMSymbol({ data: { type: "CIMSymbolReference", symbol: { type: "CIMLineSymbol", symbolLayers: [{ ... }] }, primitiveOverrides: [{ ... }] } }); |
CIMSymbol.data.symbol
CIMSymbolReference の symbol プロパティは、CIMPointSymbol、CIMLineSymbol、CIMPolygonSymbol、または CIMTextSymbol のいずれかのタイプです。各シンボルは 1 つまたは複数のシンボルレイヤーで構成されます。CIMTextSymbol は例外で、固有のプロパティを持っていますが、シンボルレイヤーはありません。
シンボルレイヤーはCIMシンボルの構成要素であり、これらを組み合わせることで豊かなグラフィック描写が可能になります。シンボルレイヤーには3つの主要なタイプがあります（APIで提供されるシンプルなシンボルに似ています）。CIMMarker、CIMStroke、CIMFillです。API の SimpleLineSymbol は CIMSolidStroke シンボルレイヤーに相当し、SimpleFillSymbol は CIMSolidFill に相当します。というように、CIMSymbol の特徴は、シンボルレイヤーを組み合わせてカスタムシンボルを作成できることです。例えば、CIMSolidStroke シンボルと CIMMarker シンボルで CIMLineSymbol を作成し、線に沿ってマーカーを配置することができます。
注：CIMLineSymbol および CIMPolygonSymbol は、現在、3D SceneView でサポートされていません。
CIMSymbol.data.primitiveOverrides
CIMSymbolReference の primitiveOverrides プロパティを使用すると、Arcade 式を使用してシンボルの特定のプロパティをオーバーライドすることができます。
WebStyleSymbols
WebStyleSymbols には、アプリで便利に参照できる定義済みの 2D CIM シンボルのライブラリが含まれています。Esri Web Style Symbols (2D) ガイド ページでは、JavaScript API で現在利用可能な WebStyleSymbol を確認できます。
Web Style Symbol (2D) のガイドページを使って、シンボルの CIM JSON を簡単にコピーすることができます。
CIMSymbolを実際に使ってみましょう！
CIM とは何か、ArcGIS API for JavaScript でどのように使用されているかについて学んだところで、アプリケーションで CIMSymbol を使用した場合にどのように見えるかを見てみましょう。
線に沿った矢印
例えば、一方通行の道路をシンボル化し、矢印を使って交通の流れの方向を指定したいとします。以前は、これを実現するのは非常に困難でしたが、4.16リリースでは、2つのシンボルレイヤーを持つ CIMLineSymbol を作成することができます。道路の位置を示すストロークシンボルレイヤーと、線の上に矢印マーカーを配置するシンボルレイヤーです。それがどのようなものか見てみましょう。
CIMSymbol.data = { type: "CIMSymbolReference", symbol: { type: "CIMLineSymbol", symbolLayers: [ { // black 1px line symbol type: "CIMSolidStroke", enable: true, width: 1, color: [0, 0, 0, 255] }, { // arrow symbol type: "CIMVectorMarker", enable: true, size: 5, markerPlacement: { // places same size markers along the line type: "CIMMarkerPlacementAlongLineSameSize", endings: "WithMarkers", placementTemplate: [19.5] // determines space between each arrow }, frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 }, markerGraphics: [ { type: "CIMMarkerGraphic", geometry: { rings: [ [ [-8, -5.47], [-8, 5.6], [1.96, -0.03], [-8, -5.47] ] ] }, symbol: { // black fill for the arrow symbol type: "CIMPolygonSymbol", symbolLayers: [ { type: "CIMSolidFill", enable: true, color: [0, 0, 0, 255] } ] } } ] } ] } } |
その結果、レイヤー上のシンボロジーは次のようになります。
CIMSymbol は、交通の流れを矢印の頭を持つ黒い線で表現するために使用されます。
その他の例
14日間 のCOVID-19症例：このアプリは、過去14日間に報告された COVID-19 症例の数に基づいて、各郡のCIMPointSymbol を作成します。CIMSymbol のサイズと形状は COVID-19 症例数に基づいて決定され、最大のアウトブレイクが発生した地域を強調する興味深い「スパイク」のビジュアライゼーションが作成されます。
このアプリは、CIMSymbol を用いて、過去14日間の1,000人あたりの COVID-19 の症例数を表示します。
タホ湖-タホ・リム・トレイル：このアプリでは、CIMSymbol をいくつかの異なる方法で使用しています。
・タホ・リム・トレイルを視覚化した CIMLineSymbol です。この線状のシンボルは、3つの異なるシンボルレイヤーで構成されており、ダッシュを使った被せ線の効果を生み出しています。
・CIMPolygonSymbol は、タホ湖の境界を可視化しています。
・各登山口は WebStyleSymbol としてレンダリングされます。WebStyleSymbol.fetchCIMSymbol() を使用して WebStyleSymbol を CIMSymbol に変換し、cimSymbolUtils クラスを使用してこれらのシンボルのサイズと回転を取得および設定することができます。
CIMSymbol を使用して、タホ・リム・トレイルを視覚化します。
Wurman Dots：このアプリは CIMSymbol をプリミティブなオーバーライドで使用する方法を示しています。オーバーライドでは、Arcade を使用して CIMPointSymbol の内円のサイズを決定します。
CIMSymbol を使用して表示される Wurman Dots マッピングスタイル。
CIMSymbol はまだベータ版です。CIM 仕様に記載されている一部のプロパティは、ArcGIS API for JavaScript ではまだサポートされていません。シンボルが期待通りに表示されないことに困惑している場合は、既知の制限事項を確認して、サポートされているものとされていないものを確認してください。
（ArcGIS API for JavaScript バージョン 4.21 現在は、CIMSymbol はベータ版でないですが、既知の制限事項はありますので、確認してご利用ください。）
まとめ
今回は、ArcGIS Blog にて紹介された ArcGIS API for JavaScript の CIMSymbol についての記事を翻訳して紹介しました。CIMSymbol は自由にシンボルをカスタマイズができる便利な機能です。ぜひお試しください！
参考
- ESRIジャパン Web サイト
- Esri 社（米国）Web サイト
