Latest Contributions by YukiOZAWA

はじめに このシリーズでは「ArcGIS Pro SDK for .NET を使用した機能開発」のシリーズ記事として、ArcGIS Proを拡張するためのアドイン開発時によく使う便利なクラスやメソッド、また、それらを用いた実践的な開発をご紹介します。本シリーズで実装するソースはすべて Github に格納してありますので、ぜひArcGIS Pro SDK for .NET（以下 Pro SDK）を使用する開発の参考にしてください。   第1弾と第2弾の記事では、マップとの対話的な操作によって選択したフィーチャの属性表示、フィーチャの強調表示、フィーチャへのズーム機能等の実装方法をご紹介しました。第3弾となる今回は、レイヤーのレンダラーを設定する方法をご紹介します。   本記事の対象読者 ・Pro SDK を使用してArcGIS Pro のアドイン開発を行っている方 ・Pro SDK を使用したArcGIS Pro のアドイン開発をこれから行う、もしくは、検討している方   ※「ArcGIS Pro SDK for .NET を使った独力での開発」でご紹介した Pro SDK のハンズオンで予習しておくと、本シリーズをよりスムーズに理解できると思います。   本記事で実装する機能の概要 レンダラーを使用すると、特定のルールに基づいてレイヤーの表示方法を定義することができます。例えば、レイヤーが持つ文字や数値の属性情報をもとにしてフィーチャを色分け表示したり、またはシンボル サイズを変えたりして、その属性値を地図上に可視化することができます。 本記事ではレイヤーが持つ属性フィールドの一覧を表示し、選択したフィールドとレンダリング手法でレイヤーのレンダラーを設定する機能を実装します。   完成イメージ ※本記事ではドッキング ウインドウの「レンダリング」タブの機能を実装します。「アノテーション操作」、「ジオメトリ変換」タブの機能は今後の連載でご紹介します。 本記事で実装する機能の実装手順 アクティブなマップ ビューに存在するレイヤーをコンボ ボックスに格納  レイヤーの属性フィールドをコンボ ボックスに格納 レンダリング手法をコンボ ボックスに格納 コンボ ボックスで選択した属性フィールドとレンダリング手法をもとにレイヤーにレンダラーを設定   本記事で使用する主な API カテゴリ　     本記事では「プロジェクト アイテム」、「レイヤー」を中心に使用します。   ※API カテゴリに関しては「ArcGIS Pro SDK for .NET を使った独力での開発」をご参照ください。   本記事で使用するソース 本記事で使用するソースは Github に格納しています。ソースに関して実装のポイントとなる部分を抜粋して解説しますので、ダウンロードをお願いします。   本記事で使用するファイル MainDockPane.xaml ドッキング ウインドウの画面を構成するファイル。作成手順に関しては「Pro SDK を使用した ArcGIS Pro の拡張④：アドインの開発」をご参照ください。 MainDockPaneViewModel.cs ドッキング ウインドウの処理を記述するファイル。ViewModel の役割をしています。ドッキング ウインドウ（MainDockPane.xaml）作成時に自動的に作成されます。Pro SDK で扱う ViewModel については、「Pro SDK を使用した ArcGIS Pro の拡張③：アドインプロジェクトの構成」をご覧ください。 実装手順 1. アクティブなマップ ビューに存在するレイヤーをコンボ ボックスに格納 レイヤー コンボ ボックスの選択肢がアクティブなマップ ビューに含まれているレイヤーを動的に表示するように実装します。この処理は、第１回目のマップとの対話的な操作の記事で紹介した方法と同じであるため、本記事では割愛します。実装方法は、「ArcGIS Pro SDK for .NET を使用した機能開発～マップとの対話的な操作その1～」及び GitHub のソースコードを参考にしてください。 2. レイヤーの属性フィールドをコンボ ボックスに格納 選択したレイヤーの属性フィールド名の一覧を取得してコンボ ボックスに表示します。   手順 2.1 MainDockPane.xaml の設定 「レンダリング」タブ アイテムの「renderingField_comboBox」コンボ ボックスに移動し、コンボ ボックスの「Itemsource」と「SelectedItem」属性を「MainDockPaneViewModel.cs」の「Fields」と「SelectedField」プロパティにバインドさせます。 <ComboBox Grid.Column="1" ItemsSource="{Binding Fields}" SelectedItem="{Binding SelectedField}"/>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   2.2 コンボ ボックスとバインドするプロパティを作成 「MainDockPaneViewModel.cs」に「Fields」と「SelectedField」プロパティ（「2.1」でバインドさせたプロパティ）を作成します。各々の役割は以下の通りです。 Fields・・・選択したレイヤーのフィールド名を格納 SelectedField・・・コンボ ボックスで選択しているフィールド名を格納 private List<String> _fields = new List<String>(); public List<String> Fields { get { return _fields; } set { SetProperty(ref _fields, value, () => Fields); } } private string _selectedField; public string SelectedField { get { return _selectedField; } set { SetProperty(ref _selectedField, value, () => SelectedField); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   2.3 GetFields() メソッドの実装 「2.2」で作成した「Fields」プロパティに、選択したレイヤーに存在するフィールドのフィールド名を格納します。属性値に応じて色分けを行うため、レンダラーの設定に使用できる文字列型か数値型のフィールドを抽出して格納します。 private void GetFields() { // アクティブ（選択状態）なマップを取得する var mapView = MapView.Active; if (mapView == null || _selectedRenderingLayer == null) return; // レイヤーの属性テーブルにアクセスして、フィールド名を Fields 配列に格納する　 QueuedTask.Run(() => { // レイヤー名で検索してマップ上のレイヤーを取得する var featureLayer = MapView.Active.Map.FindLayers(_selectedRenderingLayer.Name).FirstOrDefault() as FeatureLayer; var flf = featureLayer.GetTable().GetDefinition().GetFields(); // 文字列型または数値型のフィールドのフィールド名を抽出する Fields = flf.Where(f => f.FieldType == FieldType.Integer | f.FieldType == FieldType.SmallInteger | f.FieldType == FieldType.String | f.FieldType == FieldType.Double).Select(f => f.Name).ToList(); }); } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ３. レンダリングの手法をコンボ ボックスに格納 レンダリングに使用する手法のリストをコンボ ボックスに表示します。レンダリング手法に関しては「4.レンダラーを設定」の手順で説明します。   手順 3.1 MainDockPane.xaml の設定 「レンダリング」タブ アイテムの「renderingMethod_comboBox」コンボ ボックスに移動し、コンボ ボックスの「Itemsource」と「SelectedItem」属性を「MainDockPaneViewModel.cs」の「RenderingMethod」と「SelectedRendering」プロパティにバインドさせます。 <ComboBox Grid.Column="1" ItemsSource="{Binding RenderingMethods}" SelectedItem="{Binding SelectedRenderingMethod}"/>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   3.2 コンボ ボックスとバインドするプロパティを作成 「MainDockPaneViewModel.cs」に「RenderingMethods」と「SelectedRenderingMethod」プロパティ（「3.1」でバインドさせたプロパティ）を作成します。各々の役割は以下の通りです。 RenderingMethods・・・レンダリング手法のリストを格納（「個別値レンダリング」と「等級色レンダリング」） SelectedRenderingMethod・・・コンボ ボックスで選択しているレンダリング手法を格納 private ObservableCollection<string> _renderingMethods = new ObservableCollection<string> { "個別値レンダリング", "等級色レンダリング" }; public ObservableCollection<string> RenderingMethods { get { return _renderingMethods; } set { SetProperty(ref _renderingMethods, value, () => RenderingMethods); } } private string _selectedRenderingMethod; public string SelectedRenderingMethod { get { return _selectedRenderingMethod; } set { SetProperty(ref _selectedRenderingMethod, value, () => SelectedRenderingMethod); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   4.レンダラーを設定 「実行」ボタンを押した際に、選択したフィールドとレンダリング手法でレンダラーを作成しレイヤーに設定します。   手順 4.1 MainDockPane.xaml の設定 「実行」ボタンの「Command」属性を「MainDockPaneViewModel.cs」の「SelectionTool」プロパティにバインドさせます。 <Button Grid.Column="0" Content="実行" Command="{Binding Path= ExecuteRendering}" Style="{DynamicResource Esri_Button}"></Button>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   4.2 MainDockPaneViewModel.cs でイベントハンドラを登録 「実行」ボタンを押すと「ExecuteRenderingClick()」メソッドが実行されるように実装します。 protected MainDockPaneViewModel() { // 実行ボタンを押すと ExecuteRenderingClick() が実行される _executeRendering = new RelayCommand(() => ExecuteRenderingClick(), () => true); } private ICommand _executeRendering; public ICommand ExecuteRendering => _executeRendering; private void ExecuteRenderingClick() { }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   4.3 ExecuteRenderingClick() メソッドの実装 ExecuteRenderingClick() メソッドに以下の構文を追加します。コンボ ボックスでレイヤー、フィールド、レンダリング手法が選択されているかをチェックします。 // コンボ ボックスでレイヤー、フィールド、レンダリング手法が選択されているかをチェックする if (_selectedRenderingLayer is null) { MessageBox.Show("レイヤーを選択してください。"); } else if (_selectedField is null) { MessageBox.Show("フィールドを選択してください。"); } else if (_selectedRenderingMethod is null) { MessageBox.Show("レンダリング手法を選択してください。"); } else { try { // レンダラー作成の処理を実装 } catch (Exception) { MessageBox.Show("レンダリングに失敗しました。"); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   4.4 レンダラーの作成 try ブロックの中にレンダラー作成の処理を実装します。 4.4.1 レイヤーを取得する まず、MapView.Active.Map.FindLayers() メソッドを使用してコンボ ボックスで選択したレイヤー（FeatureLayer オブジェクト）を取得します。 // レイヤー名で検索してマップ上のレイヤーを取得する var lyr = MapView.Active.Map.FindLayers(_selectedRenderingLayer.Name).FirstOrDefault() as FeatureLayer;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4.4.2 レンダラーに使用するカラーランプを取得する カラーランプ（配色）を取得するには、最初に StyleProjectItem（スタイル プロジェクト アイテム）を取得して、取得した　StyleProjectItem　の　SearchColorRamps　メソッドを使用して指定した名前のカラーランプ アイテムを取得します。 今回は、ArcGIS Pro に標準で含まれている「ArcGIS カラー」スタイル プロジェクト アイテムの「フル スペクトル (明るい)」カラーランプを使用します。（ArcGIS Pro の表示言語が英語の場合は、「ArcGIS Colors」及び「Spectrum - Full Light」を指定します）。 // 「ArcGIS カラー」（ArcGIS Pro の表示言語が英語の場合は、「ArcGIS Colors」を指定）プロジェクト スタイル アイテムを取得 StyleProjectItem style = Project.Current.GetItems<StyleProjectItem>().FirstOrDefault(s => s.Name == "ArcGIS カラー"); // 名前で検索してカラーランプ アイテムを取得する（ArcGIS Pro の表示言語が英語の場合は、「Spectrum - Full Light」を指定） IList<ColorRampStyleItem> colorRampList = style.SearchColorRamps("フル スペクトル (明るい)");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4.4.3 個別値レンダラーを作成する 選択したレンダリング手法（_selectedRenderingMethod）により、レンダラーを作成します。レンダリング手法で個別値レンダリングを選択している場合は、個別値レンダラーを作成します。個別値レンダラーは同じ属性値を持つフィーチャを同一シンボルで表示する手法です。 まず、UniqueValueRendererDefinition コンストラクタを使用して個別値レンダラーの定義を作成します。引数にはフィールド コンボ ボックスで指定した属性フィールド名と「4.4.2」で取得したカラーランプを指定します。 続いて、引数に個別値レンダラーの定義を指定して、「4.4.1」で取得したレイヤー（FeatureLayer オブジェクト）の　CreateRenderer　メソッドを実行することで個別値レンダラー（CIMUniqueValueRenderer）を作成できます。 最後に、レイヤーの SetRenderer メソッドを実行して、レイヤーにレンダラーを設定します。引数には作成した個別値レンダラーを指定します。 if (_selectedRenderingMethod == "個別値レンダリング") { // 個別値レンダラーの定義を作成する UniqueValueRendererDefinition uvrDef = new UniqueValueRendererDefinition() { ValueFields = new String[] { _selectedField },　// 分類に使用するフィールド ColorRamp = colorRampList[0].ColorRamp, // カラーランプ }; // 個別値レンダラーを作成する CIMUniqueValueRenderer cimRenderer = (CIMUniqueValueRenderer)lyr.CreateRenderer(uvrDef); // レンダラーをレイヤーに設定する lyr.SetRenderer(cimRenderer); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4.4.4 等級色レンダラーを作成する レンダリング手法で等級色レンダリングを選択している場合は、等級色レンダラーを作成します。等級色レンダラーは属性値（数値）の範囲でフィーチャを分類し、範囲ごとに異なるシンボルで表示する手法です。 まず、GraduatedColorsRendererDefinition コンストラクタを使用して等級色レンダラーの定義を作成します。引数にはフィールド コンボ ボックスで指定した属性フィールド名、「4.4.2」で取得したカラーランプ、分類方法（今回は「自然分類」を使用）、分類数を指定します。 続いて、引数に等級色レンダラーの定義を指定して、「4.4.1」で取得したレイヤー（FeatureLayer オブジェクト）の　CreateRenderer　メソッドを実行することで等級色レンダラー（CIMClassBreaksRenderer）を作成できます。 最後に、レイヤーの SetRenderer メソッドを実行して、レイヤーにレンダラーを設定します。引数には作成した等級色レンダラーを指定します。 else // 等級色レンダリングの場合 { if (GetNumericField(lyr, _selectedField)) // 数値型のフィールドを選択している場合のみ実行する { // 等級色レンダラーの定義を作成する GraduatedColorsRendererDefinition gcDef = new GraduatedColorsRendererDefinition() { ClassificationField = _selectedField,　// 分類に使用するフィールド ColorRamp = colorRampList[0].ColorRamp, // カラーランプ ClassificationMethod = ClassificationMethod.NaturalBreaks, // 分類方法（自然分類） BreakCount = 5, // 分類数（5段階で分類） }; // 等級色（クラス分類）レンダラーを作成する CIMClassBreaksRenderer cimClassBreakRenderer = (CIMClassBreaksRenderer)lyr.CreateRenderer(gcDef); // レンダラーをレイヤーに設定する lyr.SetRenderer(cimClassBreakRenderer); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ※ 等級色レンダリングは数値型フィールドのみ使用できるので GetNumericField 関数を作成して属性フィールドの型を判別しています（実装方法は GitHub のコードをご参照ください）。 これで選択したフィールドに応じてレイヤーにレンダラーを設定する処理は完了です。 まとめ 本記事ではレイヤーが持つ属性フィールドの一覧を表示し、選択したフィールドとレンダリング手法でレイヤーのレンダラーを設定する方法についてご紹介しました。今回は個別値と等級色のレンダラーを使用しましたが、それ以外にもストレッチ、比例シンボル、ドット密度、ヒートマップ等の様々なレンダラーが用意されていますので、ぜひご活用ください。   次回 次回はアノテーションの操作についてご紹介する予定です。   関連リンク ArcGIS Pro SDK for .NET を使用した ArcGIS Pro の拡張 シリーズ ArcGIS Pro SDK for .NET ArcGIS Pro SDK for .NET コンセプト（GitHub） ArcGIS Pro SDK for .NET サンプル集（GitHub） ArcGIS Pro SDK 2.4 for .NET API リファレンス ArcGIS Pro SDK for .NET ハンズオン ... View more

I want to highlight a chart from a selected feature in the Infographic widget of Web AppBuilder Developer Edotion. Does anyone know a good solution to customize it? ... View more

～より新しい記事（「地理院地図Vector」(仮称)をArcGIS で表示してみました - 第2弾 、「地理院地図Vector」(仮称)をArcGIS で表示してみました - 第3弾 ）もありますので、併せてご参照ください。～ 先日、国土地理院から「地理院地図Vector」（仮称） の試験公開の発表がありました。 報道発表：自分でデザインしたウェブ地図を簡単に作成！ ～学校教育や防災対応を地図で支援～   「地理院地図Vector」（仮称）では、ベクター タイルの標準地図、淡色地図、白地図などの地図を表示し、自分でスタイルをカスタマイズすることもできるようです。 この試験提供では、地理院地図のデータが MapBox のベクター タイル仕様で PBF 形式（Protocolbuffer Binary Format）で公開されています。  ベクター タイルには以下の URL からアクセスできます。 https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf  地理院地図のベクター タイルの仕様は GitHub の gsi-cyberjapan/gsimaps-vector-experiment のリポジトリで公開されています。   早速、新しい地理院地図のベクター タイルを ArcGIS でも表示できるか確認してみました。 今回は Web アプリ開発用の API である ArcGIS API for JavaScript （以下、JavaScript API）を利用します。   スタイル ファイルの作成 ベクター タイルを JavaScript API で表示するには、まず JSON 形式のスタイル ファイルを作成する必要があります。 スタイル ファイルでは、地図に表示するレイヤーやその表示シンボルなどを定義します。 今回は試しに、以下のスタイル ファイルを作成しました。 地理院地図で提供されているデータの中から、高速道路のデータのみを表示するように定義しています。  { "version": 8, "name": "My Style", "sources": { "cyberjapan": { "type": "vector", "tiles": [ "https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf" ], "attribution": "国土地理院ベクトルタイル提供実験" } }, "layers": [ { "id": "高速道路", // 任意の ID "type": "line", // ジオメトリのタイプ "source-layer": "road", // ベクター タイル ソースのレイヤー "source": "cyberjapan", // ベクター タイル ソース "paint": {"line-color": "rgba(43, 52, 137, 1)", "line-width": 3.5}, //表示色とライン幅 "filter": [ "any", [ "==", "ftCode", 52703 ], [ "==", "ftCode", 52704 ] ] } ] }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   完成版の JSON   現在提供されているデータ仕様は GitHub に公開されています。 https://maps.gsi.go.jp/help/pdf/vector/dataspec.pdf  上記のデータ仕様を確認すると、徒歩道や一般道なども含めた全ての道路データは road レイヤー（source-layer）に格納されているのが分かります。 そこで、スタイルの filter プロパティを使用して高速自動車道（ftCode が 52703）と高速自動車道トンネル（ftCode が 52704）のデータのみを表示するようにフィルター設定しています。スタイル ファイルの仕様はこちらから確認できます。    JavaScript API で表示 上記で作成したスタイル ファイルを参照して Web アプリでベクター タイルを表示してみます。 ベクター タイルを表示するには、JavaScript API の VectorTileLayer  クラスを使用します。  // ベクター タイル レイヤーの作成 var vtlLayer = new VectorTileLayer({ url: “<スタイル ファイルの参照 URL>" }); // マップに作成したレイヤーを追加 map.add(vtlLayer);‍‍‍‍‍‍‍‍‍‍‍‍    完成版のアプリとサンプル コード ※ 背景地図には ArcGIS Online のベースマップ（キャンバス (ライト グレー)）を表示しています。   今回は高速道路のデータを表示しただけでしたが、独自のスタイル ファイルを作成して、JavaScript API で表示してみてください。 また、クラウド サービスの ArcGIS Online と連携することで、手持ちの位置情報付きのデータを重ねて表示することもできます。    関連リンク 地理院地図Vector（仮称）提供実験 ArcGIS API for JavaScript ... View more

本シリーズ記事では、Web マッピング アプリ開発を行う際に知っておくと便利なツールをシリーズで紹介しています。 前回は TypeScript を使用したアプリ開発について紹介しました。今回は webpack を利用したカスタム ビルドの作成方法と CLI を利用したテンプレート アプリの作成方法ついて紹介します。   アプリのパフォーマンス向上や開発作業の効率化・自動化のために webpack、Grunt、Gulp、npm（npm-run-script、npm-scripts）のような Node.js ビルドツールを既に利用している、または利用を検討している開発者もいるかもしれません。ArcGIS API for JavaScript（以下 JavaScript API）では米国Esri社がホストする CDN（コンテンツ・デリバリ・ネットワーク）にインターネット経由で参照する方法が一般的に利用されていますが、上記のようなビルドツールと連携して、アプリ固有にカスタマイズしたビルドをローカル環境に作成して利用するためのオプションも用意されています。   JavaScript API のカスタム ビルドを作成するには、Dojo のビルドシステムを利用する方法と webpack を利用する方法の 2 つがあります。今回は webpack を利用してカスタム ビルドを作成する方法を紹介します。 Dojo ビルドシステムを使用する方法に関しては、「Using npm for Custom Builds」のガイドをご参照ください。   webpack は JavaScript 用のモジュールバンドラーです。アプリ内のコードを処理して複数の JavaScript ファイルを一つまたは複数にまとめる（バンドル）ことができ、サーバーへのリクエスト数を減らせるなどのメリットがあります。また、バンドルされたファイルは、実行時に必要に応じて動的に読み込むこともできます。 JavaScript API には、webpack を用いて JavaScript API で提供されるモジュールをバンドルできるプラグイン（@arcgis/webpack-plugin）が用意されています。   既に webpack を利用してアプリを開発している、または、一から webpack の設定ファイルなどを作成する場合は、以下のコマンドでプラグインをインストールできます。 npm install --save-dev @arcgis/webpack-plugin   また、webpack の設定ファイルなどを含んだ GitHub のリポジトリをクローン・ダウンロードして始めることもできます。   一番簡単に始める方法は、@arcgis/cli を利用することです。 @arcgis/cli は @Anonymous User/webpack-plugin と TypeScript を利用してアプリを開発するための CLI（コマンドラインインターフェース）を提供します。    ※ @Anonymous User/webpack-plugin を使用するには ArcGIS API for JavaScript バージョン 4.7 以上、Node.js バージョン 8.x 以上、インターネットに接続できる環境が必要です   @Anonymous User/cli のインストールとテンプレート アプリの作成 @Anonymous User/cli をインストールします。 npm install -g @arcgis/cli   アプリが配置されるディレクトリの名前（firstApp）を指定して、テンプレート アプリを作成します（名前は半角英字で指定します）。 arcgis create firstApp   テンプレート アプリは webpack などの必要なパッケージもインストールされた状態で、以下のようなディレクトリ構造で作成されます。 firstApp ├──── README.md ├──── intern.json ├──── package.json ├──── tsconfig.json ├──── tslint.json ├──── src │       ├──── assets │       │       ├──── favicon.ico │       │       └──── icon.png │       ├──── css │       │       ├──── index.scss │       │       └──── main.scss │       ├──── data │       │       └──── app.ts │       ├──── widgets │       │       ├──── App.tsx │       │       ├──── Header.tsx │       │       └──── App │       │               └──── AppViewModel.ts │       ├──── config.ts │       ├──── index.ejs │       ├──── index.ts │       └──── oauth-callback.html ├──── test │       ├──── unit │       │       ├──── all.ts │       │       └──── widgets │       │                ├──── App.ts │       │                ├──── Header.ts │       │                └──── App │       │                         └──── AppViewModel.ts │       └─── tsconfig.json ├──── node_modules ├──── webpack.config.js └──── webpack.tests.config.js     JavaScript API のカスタム ビルドの作成とアプリをビルドする上で、欠かすことができない 4 ファイル（webpack の設定ファイル、JavaScript API のロード設定ファイル、アプリのメイン ファイル、ウィジェット ファイル）を簡単に解説します。   webpack.config.js webpack の設定ファイルです。@arcgis/webpack-plugin では 3D 機能に関連するモジュールを除外したり、特定のモジュール名を配列で指定してビルドされるバンドル ファイルから除外するモジュールを設定したりできるオプションなどが用意されており、webpack.config.js ファイルで設定することができます。 const ArcGISPlugin = require("@arcgis/webpack-plugin"); module.exports = { ... plugins: [ new ArcGISPlugin({ features: { "3d": false, // 3D 機能に関連するモジュールを除外 has: { "esri-native-promise": true } }, userDefinedExcludes:[ "arcgis-js-api/layers/GeoRSSLayer", // 除外するモジュール名を指定 "arcgis-js-api/layers/GeoRSSLayer" ] }), ... ] ... }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   src/config.ts JavaScript API の workers（AMD ローダーの構成オブジェクト）を設定します。 @Anonymous User/webpack-plugin の現在のバージョンでは、CDN で配信される JavaScript API を参照して workers を使用するようにアプリを設定する必要があります。 import esriConfig from "esri/config"; const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.12/"; const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`; (esriConfig.workers as any).loaderUrl = DEFAULT_LOADER_URL; esriConfig.workers.loaderConfig = { baseUrl: `${DEFAULT_WORKER_URL}dojo`, packages: [ { name: "esri", location: DEFAULT_WORKER_URL + "esri" }, { name: "dojo", location: DEFAULT_WORKER_URL + "dojo" }, { name: "dojox", location: DEFAULT_WORKER_URL + "dojox" }, { name: "dijit", location: DEFAULT_WORKER_URL + "dijit" }, { name: "dstore", location: DEFAULT_WORKER_URL + "dstore" }, { name: "moment", location: DEFAULT_WORKER_URL + "moment" }, { name: "@dojo", location: DEFAULT_WORKER_URL + "@dojo" }, { name: "cldrjs", location: DEFAULT_WORKER_URL + "cldrjs", main: "dist/cldr" }, { name: "globalize", location: DEFAULT_WORKER_URL + "globalize", main: "dist/globalize" }, { name: "maquette", location: DEFAULT_WORKER_URL + "maquette", main: "dist/maquette.umd" }, { name: "maquette-css-transitions", location: DEFAULT_WORKER_URL + "maquette-css-transitions", main: "dist/maquette-css-transitions.umd" }, { name: "maquette-jsx", location: DEFAULT_WORKER_URL + "maquette-jsx", main: "dist/maquette-jsx.umd" }, { name: "tslib", location: DEFAULT_WORKER_URL + "tslib", main: "tslib" } ] } as any;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     src/data/app.ts アプリのメインファイルです。以下のコードでは、アプリで使用するマップとレイヤーを作成しています。FeatureLayer、TileLayer、VectorTileLayer 各のコンストラクタでは、ポータル（ArcGIS Online）で共有されているレイヤーを、そのレイヤーのアイテム ID を使用して参照しています。例えば、ベクタータイル表示用の VectorTileLayer では、地形図のレイヤーを参照しています。 export const featureLayer = new FeatureLayer({ portalItem: { id: "b234a118ab6b4c91908a1cf677941702 " }, outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"], title: "U.S. counties", opacity: 0.8 }); export const map = new ArcGISMap({ basemap: { baseLayers: [ new TileLayer({ portalItem: { // world hillshade id: "1b243539f4514b6ba35e7d995890db1d" } }), new VectorTileLayer({ portalItem: { // topographic id: "7dc6cea0b1764a1f9af2e679f642f0f5" } }) ] }, layers: [featureLayer] });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   src/widgets/App.tsx、src/ widgets /App/AppViewModel.ts アプリにマップを表示する機能がウィジェットで提供されています。App.tsx ではウィジェットの UI を表示し、 AppViewModel.ts はウィジェットのロジックが実装されています。   テンプレート アプリの機能を拡張するためにウィジェットを追加する場合は、以下のコマンドで名前（firstWidget）を指定してウィジェットのテンプレートも作成できます（名前は半角英字で指定します）。 arcgis widget firstWidget   ウィジェット開発の方法は「ウィジェット開発」の記事をご参照ください。今後のブログ記事でも開発方法を紹介していきたいと思います。     プロジェクトの実行 npm start コマンドを実行後 http://localhost:8080/ にアクセスして、アプリの動作を確認できます。 また、npm run build コマンドを実行すると、JavaScript API のバンドル ファイルを含むアプリの配置可能なバージョンが dist フォルダにビルドされます。     @Anonymous User/webpack-plugin や @Anonymous User/cli を利用することで、開発環境の構築や webpack の設定などを気にすることなく JavaScript API のカスタム ビルドを作成でき、すぐにコードを書いてアプリ開発をスタートすることができます。お試しください。     ■関連リンク ArcGIS API for JavaScript Using webpack for Custom Builds @arcgis/webpack-plugin @arcgis/cli Esri/jsapi-resources Using npm for Custom Builds TypeScript - Setting up your development environment Widget development Using npm for Custom Builds ... View more

本シリーズ記事では、Web マッピング アプリケーション開発を行う際に知っておくと便利なツールをシリーズでご紹介しています。   前回は Visual Studio Code を使用した開発環境の構築について紹介しました。今回は TypeScript を使用した開発と環境設定について紹介します。 TypeScript は JavaScript にコンパイル可能で、JavaScript の変数に型を設定してコーディングができるのが特長の言語です。 Web アプリ開発でよく使われる多くの API が TypeScript で利用な型定義ファイルを公開していて、それらを使うことでコードのメソッドの引数を確認できたり、型のチェックをしてくれるので、タイプミスも減らせて効率的にコーディングができます。 使用したい API に型定義ファイルが用意されているかは、TypeSearch のページで調べられます。   ArcGIS API for JavaScript にも型定義ファイルが用意されています。 本記事では TypeScript と ArcGIS API for JavaScript の型定義ファイルを使うための開発環境の設定方法を紹介します。   ArcGIS API for JavaScript は地図アプリ開発用の API です。機能や使い方は「はじめての Web マッピングアプリケーション開発」シリーズで紹介しているので、こちらもご覧ください。     TypeScript のインストール TypeScript は Node.js と npm を使用してインストールできます。Node.js をインストールしていない場合は Node.js のサイトからインストーラーをダウンロードして実行します（Node.js をインストールすると npm も自動でインストールされます）。インストールが完了したら、以下のコマンドで Node.js と npm のバージョンを確認します。   node --version npm --version   Visual Studio Code に用意されたターミナル画面で確認できます。       次に TypeScript をグローバルに使えるようにインストールします。 npm install -g typescript   これにより TypeScript のコードを JavaScript にコンパイルするために使用される tsc と呼ばれるコマンドライン ツールがインストールされます。  TypeScript がインストールされたバージョンを確認します。 tsc -v   続いて作成するアプリのフォルダー構成を決めます。今回は以下のようなフォルダー構成にします。 ルート フォルダー/       index.html       package.json       tsconfig.json       app/             main.ts   各ファイルの役割は後ほど説明します。     ArcGIS API for JavaScript の型定義ファイルのインストール アプリのルート フォルダーで次のコマンドを実行します。 npm init --yes npm install --save @types/arcgis-js-api   最初のコマンドは package.json をルート フォルダーに作成します。2番目のコマンドで ArcGIS API for JavaScript の型定義ファイルをインストールします。   Dojo の型定義ファイルをインストールする（オプション） ArcGIS API for JavaScript は Dojo をベースに作成されているので、アプリを開発する際にも Dojo を使う機会があるかもしれません。 Dojo を TypeScript で使用するために、オプションで Dojo 1 Typings をインストールします。 npm install dojo-typings --save-dev     アプリの作成 以下のコードで index.html を作成します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>my map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <script> var locationPath = location.pathname.replace(/\/[^\/]+$/, ""); window.dojoConfig = { packages: [ { name: "app", location: locationPath + "/app" } ] }; </script> <script src="https://js.arcgis.com/4.11"></script> </head> <body <div id="viewDiv"></div> <script>require(["app/main"]);</script> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     続いて、以下のコードで main.ts （TypeScript ファイル）を作成します。 import EsriMap = require("esri/Map"); import MapView = require("esri/views/MapView"); const map = new EsriMap({ basemap: "streets" }); const view = new MapView({ map: map, container: "viewDiv", center: [139.745433, 35.658581], zoom: 15 }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍    例えば、main.ts ファイルの最後の行に view. と入力すると MapView オブジェクトで利用可能なプロパティやメソッド、引数などが表示されます。   これで TypeScript を使用して開発する準備が整いました。     TypeScriptをコンパイルする ある程度コーディングして動作を確認したいとなったら、TypeScript を JavaScript にコンパイルする必要があります。 アプリのルート フォルダーに tsconfig.json ファイルを作成し、以下のように設定します。   { "compilerOptions": { "module": "amd", "noImplicitAny": true, "sourceMap": true, "jsx": "react", "jsxFactory": "tsx", "target": "es5", "experimentalDecorators": true, "preserveConstEnums": true, "suppressImplicitAnyIndexErrors": true }, "include": [ "./app/*" ], "exclude": [ "node_modules" ] }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   tsconfig.json ではコンパイルのパラメーターを設定します。主なオプションは次のとおりです。 compilerOptions.esModuleInterop: true の場合は、import x from 'xyz' のような import 構文を使用できます compilerOptions.module: ArcGIS API for JavaScript に合わせて、TypeScript コードを AMD モジュールにコンパイルします compilerOptions.target: サポートされている全てのブラウザで動作するように ES5 に出力します include : コンパイルするファイルを指定します（グロブのようなファイル パターンを使用できます。ここでは app フォルダー以下の全てのファイルをコンパイルします）   次に、アプリケーションのルートで、次のいずれかのコマンドを実行します。 tsc: このコマンドは tsconfig.json の設定に基づいて TypeScript を JavaScript にコンパイルします tsc -w: このコマンドも tsc と同じですが、ファイルの変更を監視し、TypeScript ファイルが編集されたら自動で再コンパイルします   tsc -w コマンドを実行してみましょう。 実行すると app フォルダーに main.js ファイルが作成されます。index.html を Web ブラウザで開くと ArcGIS Online の道路地図が表示されます。     試しに main.ts の MapView コンストラクタの zoom プロパティを適当な値に変更してファイルを保存すると、自動で JavaScript ファイルにコンパイルされるので、ブラウザをリロードすると、地図の初期表示スケールが変わります。   ※ 型定義がされているので、例えば zoom プロパティ（Numbaer 型）に文字列を入力してみるとエラーが表示されコンパイルが行われません。     必要なファイルをコピーする 最終的にアプリが完成し、実際のサーバーに配置する際には main.ts や tsconfig.json 等のファイルは不要であるため、必要なファイルのみを指定のフォルダーにコピーします。 npm では package.json に定義したスクリプトをコマンドから実行することができます。 package.json のスクリプトに以下の copy コマンドを定義します。   "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "copy-js": "cpx \"./app/*.js\" ./dist/app", "copy-html": "cpx \"./*.html\" dist", "copy-all": "npm run copy-js & npm run copy-html" },‍‍‍‍‍‍   cpx はファイル コピーに使用できるモジュールです。 最初に以下のコマンドで cpx モジュールをインストールします。 npm install --save-dev cpx   次に以下のコマンドを使用して copy コマンドを実行します。  npm run copy-all   dist フォルダーが作成され、フォルダー構造を維持して .html と .js ファイルのみが dist フォルダーにコピーされます。 対象のファイルが更新されたら、自動でコピーされるような設定も可能です。 より複雑な処理が必要な場合は Grunt や Gulp などのタスク ランナーを使用できます。   これで TypeScript と ArcGIS API for JavaScript の型定義ファイルを使用してアプリケーションを開発する最低限必要な環境が整いました。 次回は ArcGIS API for JavaScript のカスタム モジュールの作成について紹介したいと思います。     関連リンク ArcGIS API for JavaScript 製品ページ（Esri / ESRIジャパン） はじめての Web マッピングアプリケーション開発 シリーズ ... View more

「はじめての Web マッピングアプリケーション開発」シリーズでは、はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで紹介してきました。   本シリーズ記事では、更にステップアップとして Web マッピング アプリケーション開発を行う際に知っておくと便利なツールをシリーズでご紹介していきます。   Visual Studio Code で開発環境を構築（本記事） TypeScript を使用したアプリ開発 webpack を利用したカスタム ビルドの作成方法と CLI を利用したテンプレート アプリの作成方法 Visual Studio Code のコード スニペット   本記事では、まず Web アプリ開発環境の構築についてご紹介します。Web アプリ開発に利用できるテキスト エディターには「Sublime Text」「Atom」等、無償で使えるものが数多くあります。   今回は、その中から Visual Studio Code を取り上げ、インストールから開発をはじめるまでの設定について紹介します。 Visual Studio Code は Microsoft 社が公開する無償のコード エディターです。JavaScript や HTML をはじめとした数百の言語に対応し、コード補完やインテリセンス機能を持っています。   ※本記事では Visual Studio Code バージョン 1.32.1 を使用しています     Visual Studio Code のインストール Microsoft 社のサイトにアクセスし、[Download for ～] をクリックしてインストーラーをダウンロードします。   ダウンロードした exe ファイルを実行して、インストールを開始します。ダイアログに沿って進めながらインストールを完了させます。 詳細なインストール手順や Visual Studio Code の画面構成についてはこちらの記事もご覧ください。   インストールが完了したら Visual Studio Code を起動します。     メニューの日本語化 メニュー画面が英語ですが、Visual Studio Code には言語パックが用意されており日本語化することもできます。 左側のバーの一番下の [Extension] ボタンをクリックして Extensions パネルを開き、検索ボックスに「Japanese Language Pack」と入力します。表示された Japanese Language Pack for Visual Studio Code エクステンションの [install] ボタンをクリックします。   インストールが完了したら、Visual Studio Code を再起動します。     メニューが日本語化されます。     Web アプリの作成 次に地図を表示するための HTML ファイルと JavaScript ファイルを作成します。 [フォルダーを開く] ボタンをクリックして、アプリを保存するルート フォルダーを選択します。ルート フォルダーの直下に index.html ファイルと app フォルダーを作成し、app フォルダーに main.js ファイルを作成します。         index.html には以下のコードをコピーしてファイルを保存します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>my map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script> var locationPath = location.pathname.replace(/\/[^\/]+$/, ""); window.dojoConfig = { packages: [ { name: "app", location: locationPath + "/app" } ] }; </script> <script src="https://js.arcgis.com/4.10"></script> </head> <body> <div id="viewDiv"></div> <script>require(["app/main"]);</script> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     main.js ファイルには以下のコードをコピーしてファイルを保存します。 require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 15, center: [139.745433, 35.658581] }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍     Web ブラウザでデバッグ 続いて作成したアプリを Web ブラウザで実行しデバッグできるようにします。Chrome 等の Web ブラウザに付随する開発者ツールでも良いですが、今回は Visual Studio Code でデバッグできるように設定してみます。 [拡張機能] ボタンをクリックし [拡張機能] 画面の検索ボックスで「Chrome」と入力します。表示された Debugger for Chrome エクステンションの [インストール] ボタンをクリックします。   [再読み込み] ボタンが表示されたら、[再読み込み] ボタンをクリックします。   [デバッグ] ボタンをクリックしてデバッグ画面を開きます。デバッグの構成ボタンをクリックし、プルダウンから [Chrome] を選択します。   .vscode フォルダーに launch.json ファイルが作成されます。launch.json ファイルではアプリのデバッグ方法を定義します。Web サーバーが利用可能な環境であれば URL でアプリを開くこともできますし、ローカル ファイルを開くこともできます。デバッグ時に Chrome でローカル ファイルを開くには、launch.json に以下のようにコードを追加して保存します。 { "name": "Launch Chrome localfile", "type": "chrome", "request": "launch", "file": "${workspaceFolder}/index.html" },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ※ ${workspaceFolder} には、現在 Visual Studio Code で開いているフォルダーが適用されます     デバッグ実行のプルダウン メニューに launch.json の “name” 属性で指定している “Launch Chrome against localhost” と ”Launch Chrome localfile” が表示されるので、”Launch Chrome localfile” を選択して実行すると、Chrome が起動し index.html ファイルが表示されます。           ブレーク ポイントは main.js ファイルを開きコード行番号の横をクリックして設定できます。変数の内容なども Visual Studio Code 上で確認することができます。     設定手順の紹介はしませんが、Live Server エクステンションを使用すると、簡単にローカル サーバーを実行でき、ソースコードを変更したら自動で Web ブラウザがリロードされるような機能も使用できます。ぜひ、試してみてください。     本記事では Visual Studio Code のインストールから開発を始めるまでの手順を紹介してきました。次回は TypeScript を使用したアプリ開発について紹介したいと思います。   【関連リンク】 ArcGIS API for JavaScript 製品ページ（Esri / ESRIジャパン） はじめての Web マッピングアプリケーション開発 シリーズ Web アプリ開発のための開発環境を構築してみた   ... View more

「はじめての Web マッピングアプリケーション開発」のシリーズ記事では、はじめて地図アプリ開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをご紹介しています。   第 4 回目となる今回は、マップ上でクリックしたフィーチャの属性情報を表示する画面（ポップアップ）の作成方法をご紹介します。 前回の記事と同様に、ソースコードは ESRIジャパンの GitHub で公開しています（※2021年12月追記：”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです）ので、ぜひご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。     Popup（ポップアップ） Popup を使用すると、ユーザーのクリック操作に応じて対話的にフィーチャの属性情報を表示する機能を簡単に追加できます。 Popup は通常、レイヤー（FeatureLayer や GraphicsLayer など）とともに使用されますが、レイヤーを伴わない操作でも使用できます。たとえば、ユーザーが地図上でクリックした場所の緯度/経度座標を表示することもできます。   今回は、第二弾の記事で地図上に追加した地価公示レイヤー（ポイント フィーチャ）の属性情報を表示する Popup を作成します。   Popup で表示するコンテンツは PopupTemplate を使用して定義できます。PopupTemplate はレイヤーに対して設定するため、地図上に複数のレイヤーがある場合は、各レイヤーに対して表示する属性情報を定義できます。   1.　PopupTemplate　オブジェクトの作成 PopupTemplate では、Popup の上部に表示されるタイトル（title プロパティ）とフィーチャの属性情報などを表示するためのコンテンツ（content プロパティ）を設定できます。 content プロパティには、選択したフィーチャの特定フィールドの属性値を表示するために、content の type（”fields”）とフィールド情報のオブジェクトの配列である fieldInfos を設定します。  ※ PopupTemplate　は autocast（必要なときに自動でモジュールが読み込まれる）に対応しているので、モジュール読み込みのための require の定義などは必要ありません。  const template = { title: "愛知県の地価公示",　 // Popup のタイトルを設定 content: [{ type: "fields",　 // コンテンツに表示する形式を設定（フィールド情報を表示する場合は "fields" を設定） fieldInfos: [{ fieldName: "基準地番号",　// フィールド名を設定 label: "基準地番号" // ラベルを設定 }, { fieldName: "用途", label: "土地利用の用途種別" }, { fieldName: "Ｈ２６価格", label: "平成２６年の価格" }, { fieldName: "Ｈ２５価格", label: "平成２５年の価格" }] }] };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。   const template = { title: "愛知県の地価公示", // Popup のタイトルを設定 content: [{ type: "fields", // コンテンツに表示する形式を設定（属性値を表示する場合は "fields" を設定） fieldInfos: [{ fieldName: "L01_092",　// フィールド名を設定 label: "令和元年の価格"　// ラベルを設定 }, { fieldName: "L01_093", label: "令和２年の価格" }, { fieldName: "L01_094", label: "令和３年の価格" }] }] };   fieldInfos オブジェクトの fieldName と label プロパティには、表示するフィールドのフィールド名とラベルの文字列を指定します。 フィールド名は、FeatureLayer に指定している URL のエンドポイントから確認できます。 地価公示レイヤーの URL     ※2021年12月追記：2021年12月以降で利用しているレイヤーのフィールド名は、次のURL エンドポイントから確認できます。   公示地価レイヤーの URL (2021年12月以降)   属性値を整形する fieldInfos オブジェクトでは format プロパティを使用して、数値フィールドや日付フィールドの書式を設定できます。ここでは、価格フィールドの値を3桁区切りの整数で表示するように設定しています。  { fieldName: "平成２６年の価格", format: { digitSeparator: true,　 // 数値の3桁区切りを有効にする places: 0　 // 整数で表示する } }, { fieldName: "Ｈ２５価格", label: "平成２５年の価格", format: { digitSeparator: true, places: 0 } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍    ※2021年12月追記：2021年12月以降のレイヤーを用いる場合でも、同様の書式で整形できます。   { fieldName: "L01_092",　// フィールド名を設定 label: "令和元年の価格",　// ラベルを設定 format: { digitSeparator: true, // 数値の3桁区切りを有効にする places: 0 // 整数で表示する } }, { fieldName: "L01_093", label: "令和２年の価格", format: { digitSeparator: true, places: 0 } }, { fieldName: "L01_094", label: "令和３年の価格", format: { digitSeparator: true, places: 0 } }     レイヤーに PopupTemplate を設定する FeatureLayer（地価公示レイヤー）の popupTemplate プロパティに作成した　PopupTemplate　を設定します。FeatureLayer のコンストラクタの作成時に定義することも可能です。  chikakojiLyr.popupTemplate = template;‍‍‍‍‍‍‍‍‍‍‍‍‍‍   これで Popup を表示する手順は完了です。作成したアプリで地価公示のポイント フィーチャをクリックしてみましょう。    ステップアップ！ PopupTemplate のコンテンツには属性値を表示するのではなく、独自の文章を表示することもできます。 その場合は content の type プロパティに ”text”、text プロパティに表示する文字列を指定します。text プロパティに表示する文字列には {フィールド名} と入力することで特定フィールドの属性値を埋め込むことも可能です。 content: [ { type: "text",　// コンテンツに表示する形式を設定（テキストを表示する場合は "text" を設定） text: "土地利用の用途種別は {用途} です" }, ・・・ ]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   今回作成したサンプルは以下で動作を確認できます。 https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/popup/popup.html   ※2021年12月追記：2021年12月以降は、以下で動作を確認できます。 https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/popup/popup_2021.html   Popup では、本記事で紹介したもの以外にも、チャートを表示したり独自の関数を埋め込んだりすることもできます。米国 Esri のサンプル サイトには Popup のサンプルも充実しているので、ご興味がある方はぜひそちらもご覧ください。   おわりに 本記事では、Popup の設定方法をご紹介しました。ぜひお手持ちのデータでも試してください。次回は、Web マップの作成・表示方法をご紹介します。    ■関連リンク ArcGIS API for JavaScript (ArcGIS for Developers) ... View more

「デスクトップ地図アプリ開発」シリーズの第10弾記事です。   これまでの記事では、Web マップの作成から、ArcGIS Maps SDK for .NET（以下、SDK）を使用した属性情報表示やレイヤー リストの表示機能などの作成方法をご紹介してきました。第10弾では、SDK で構築したアプリを配布するために必要なライセンス認証の手順についてご紹介します。本記事で紹介する機能のサンプル コードは ESRIジャパン GitHub で公開しています。   ArcGIS Maps SDK for .NET のライセンス これまで作成してきたアプリを実行した際に、アプリのマップ上に 「Licensed for Developer Use Only」と言うウォーターマークが表示されていることに気がつかれたでしょうか？   これは、このアプリが「開発・テスト用途でのみ使用が許可されている」ということを示しています。SDK は無償で開発・テストをすることができる地図アプリ開発キットですが、開発したアプリを実際に配布したり業務で利用したりするには、アプリがライセンス認証されている必要があります。SDK で開発したアプリを配布するためのライセンスには Lite、Basic、Standard、Advanced の 4 種類のライセンスがあり、各ライセンスで利用できる機能に違いがあります。ライセンスの詳細は、ライセンス ページをご参照ください。 このシリーズ記事で作成してきたサンプル アプリに実装した、ArcGIS Online で作成した Web マップの表示、属性情報の表示、住所検索などの機能は Lite ライセンスを使用してアプリを認証できます。Lite ライセンス自体は無償で取得できますが、アプリを運用する場合は、ArcGIS Onlineや ArcGIS Platform を保有するなど、配布のための条件を満たす必要があります（ライセンスの詳細はお問い合わせください）。   Lite ライセンスキーの取得 1. ArcGIS Developers のサイトの Get a license ページ にアクセスして、表示されたライセンスキーをコピーします。 ※ ArcGIS Developers にサインインしてない場合は [Sign in to retrieve your Runtime Lite license string] をクリックして、ArcGIS 開発者アカウントでサインインします。   アプリのライセンス認証 アプリを Lite ライセンスで認証するには、SDK のクラスがアプリのソース コードで使用される前に、認証コードを実行します。   1.App.xaml.cs の ArcGISRuntimeEnvironment.Initialize() で Lite ライセンスのライセンスキーを設定します。   App.xaml.cs ArcGISRuntimeEnvironment.Initialize(config => config .UseLicense("[ここに取得した Lite ライセンスキーを設定]") .UseApiKey("[ここに取得した API キーを設定]") .ConfigureAuthentication(auth => auth .UseDefaultChallengeHandler() // Use the default authentication dialog    2. アプリを実行すると、マップ上に表示されていた 「Licensed for Developer Use Only」 と言うウォーターマークが消えてアプリがライセンス認証されたことを確認できます。   以上で SDK で開発したアプリの Lite ライセンスによる認証は完了です。 「デスクトップ地図アプリ開発」シリーズ記事では、SDK を使用して、地図アプリに必要な基本的な機能を実装したデスクトップ アプリを開発する方法を紹介してきました。 SDK では、本シリーズ記事で紹介した以外にも多くの機能が用意されています。米国 Esri 社の GitHub には多くの機能のサンプル コードが公開されていますので、こちらもご活用ください。ぜひ SDK を使ったデスクトップ地図アプリ開発を試しみてください！   関連リンク デスクトップ地図アプリ開発（連載記事の紹介） ArcGIS Maps SDK for .NET（米国Esri社 / ESRIジャパン） ... View more

5 月 23 日 ～ 25 日の日程で、GIS コミュニティフォーラムが東京ミッドタウン 六本木にて開催されます！ このイベントは、日本国内の GIS ユーザー並びに GIS にご興味をお持ちの方々の情報交換と GIS 利用促進を目的としています。 GIS、リモートセンシングに携わる多くの方にご参加いただき、活用事例や最新テクノロジーの紹介を通してお互いのアイデアを共有する場として、毎年多くの方にご来場いただいています！     ArcGIS に関連する技術者・開発者向けセッションをそろえています！   当フォーラムでは、GIS とは何か？から、実際に日本国内の GIS 導入事例など、GIS の基本から最新情報、活用方法についてたくさんのセッションをご用意しています。 本記事では、その中から ESRIジャパンの技術スタッフが ArcGIS 開発製品の製品概要や活用方法、最新情報などを紹介する技術セッションの概要をご紹介します！     セッションのプログラム   日にち 時間 ルーム セッション タイトル 5月23日(水) 11:30-12:10 ルーム5-6 (タワー4階) Web でも Python！ ～空間解析を取り入れた新世代のマップ作成～ 16:50-17:30 ルーム7 (タワー4階) プログラミングゼロ！ ～Web GIS アプリ 3 分メイキング～ 5月24日(木) 10:00-10:30 ルーム7 (タワー4階) ArcGIS Pro のカスタマイズ 方法と最新情報 5月25日(金) 10:00-10:30 ルーム7 (タワー4階) Web でも Python！データ サイエンスしてみよう ～オープンデータと GIS～ 15:30-17:10 ルーム7 (タワー4階) ArcGIS Developer セッション ～ArcGIS の開発者向け サブスクリプション活用法～       セッションの概要   Web でも Python！ ～空間解析を取り入れた新世代のマップ作成～ 5月23日（水） 11:30 - 12:10 ルーム5-6（タワー4階）     ArcGIS と馴染み深い Python 言語を使って Web 上に 公開されているデータを取得し、ArcGIS Online の解析機能を実行することができる ArcGIS API for Python は、思いのままの Web マップ作成・共有に加え、自動化に対応することができる新しい製品です。いつでもだれとでも共有可能な Web マップの新しい作成方法をご紹介します。       プログラミングゼロ！ ～Web GIS アプリ 3 分メイキング～ 5月23日（水） 16:50 - 17:30 ルーム7（タワー4階）   Web GIS アプリをプログラミング ゼロで作成できることをご存知ですか？本セッションでは Web AppBuilder for ArcGIS を使用して、プログラミング ゼロで本格的な Web GIS アプリを簡単に作成する方法をご紹介いたします。       ArcGIS Pro のカスタマイズ 方法と最新情報 5月24日（木） 10:00 - 10:30 ルーム7（タワー4階）     ArcGIS Pro をカスタマイズして、特定業務のワークフローに合わせたアプリにしたり、独自の機能を追加したりしてみませんか？本セッションでは、ArcGIS Pro SDK を使った ArcGIS Pro アプリケーションのカスタマイズ方法を、SDK の最新情報と共にご紹介します。       Web でも Python！データ サイエンスしてみよう ～オープンデータと GIS～ 2018年5月25日（金） 10:00 - 10:30 ルーム7（タワー4階）     近年よく耳にする「オープンデータ」と「データサイエンス」という 2 つのキーワード。それに対するアプローチとして、データ解析に用いる Jupyter Notebook というツールと、プログラミング初心者から専門研究者まで幅広く使われる Python 言語を使用して、GIS の要素を加えた解析手法をご紹介します。       ArcGIS Developer セッション ～ArcGIS の開発者向け サブスクリプション活用法～ 2018年5月25日（金） 15:30 - 17:10 ルーム7（タワー4階）     ArcGIS をベースにしたアプリ/システム開発に必要な開発キットやソフトウェアなどを 揃えるためのサブスクリプション プログラム「ArcGIS Developer Subscription」の基礎と活用法をご紹介します。また、開発キットの最新情報や実際の開発事例（講演：ジャッグジャパン株式会社様）、セッション参加者のみなさまと一体となって楽しむゲーム形式のデモ（昨年のデモ：屋内即位 ＋ ジオフェンス ＋ リアルタイム送受信）なども併せて、開発者向けの情報満載でお届けします。       参加方法 GISコミュニティフォーラムの参加登録、また、その他のプログラム内容は「第 14 回 GISコミュニティフォーラム」をご参照ください。 皆様のご参加をお待ちしております！     関連リンク GISコミュニティフォーラム関連ページ GIS コミュニティフォーラム ArcGIS 関連ページ ArcGIS for Developers 開発リソース集 ... View more

「デスクトップ地図アプリ開発」シリーズの第2弾の記事です。   第2弾では、第1弾で作成した Web マップを表示するアプリを開発するための準備として、ArcGIS Maps SDK for .NET（以下、SDK）の Visual Studio 機能拡張のインストールと Visual Studio プロジェクトの作成を行います。本記事では Visual Studio を使用して WPF デスクトップ アプリを開発します。   プロジェクトの作成 Visual Studio で新規プロジェクト（WPF アプリ）を作成します。このブログ記事では、下記の環境を使用していますが、他のバージョンでも基本的な手順は同じです。サポートされる開発環境の詳細は動作環境ページをご覧ください。 OS：Windows 11 21H2 開発環境：Visual Studio 2022 17.8.3 .NET SDK/フレームワーク：.NET 8.0.100 SDK：ArcGIS Maps SDK for .NET 200.3 SDK では、Visual Studio のプロジェクト テンプレートが提供されています。各プロジェクト テンプレートは、各開発プラットフォームに適した NuGet パッケージを参照し、Model-View-ViewModel (MVVM) デザイン パターンを使用した地図アプリの雛形として作成されています。プロジェクト テンプレートを使用するためには、まず Visual Studio 拡張機能をインストールします。   Visual Studio 拡張機能のインストール Visual Studio のメニューで、[拡張機能] > [拡張機能の管理] を選択して、[拡張機能の管理] ダイアログを表示します。 [検索] テキスト ボックスに、「ArcGIS」と入力します。 「ArcGIS Maps SDK for .NET Project Templates」拡張機能を選択し、[ダウンロード] を選択します。すぐにダウンロードが実行され、再起動時に拡張機能がインストールされることを示すメッセージが表示されます。 [拡張機能の管理] ダイアログを閉じます。 Visual Studio を閉じ、拡張機能をインストールします。 Visual Studio を閉じた時に表示される [VSIX インストーラー] ダイアログで [変更] をクリックします。 インストールが完了したら、インストーラー ダイアログで [閉じる] をクリックします。   SDK のインストールには、いくつかの方法があります。インストールの詳細は「インストール ガイド」でも説明していますので、必要に応じてご確認ください。   テンプレートを使用したプロジェクトの作成 Visual Studio で [新しいプロジェクトの作成] を選択し、プロジェクトの種類で「ArcGIS」を選択すると、使用可能なすべてのプラットフォームの ArcGIS プロジェクト テンプレートが表示されます。今回は「ArcGIS Maps SDK .NET WPF App (Esri)」を選択します。 プロジェクト名、保存場所を適宜変更します。 フレームワークは .NET 8.0 を選択します。[Create a 2D map or 3D scene]では、今回は 2D アプリを開発するので「Map」を選択します。 [作成] ボタンをクリックして、プロジェクトを作成します。   テンプレートからプロジェクトを作成すると、SDK アプリ開発に必要な NuGet パッケージも自動でプロジェクトに追加されます。   第2弾「開発の準備」はここまでです。次回の第3弾「マップの表示」では、第1弾で作成した Web マップをアプリで表示します。   関連リンク デスクトップ地図アプリ開発 （連載記事の紹介） ArcGIS Maps SDK for .NET（米国Esri社/ESRIジャパン） ... View more