Latest Contributions by AyakoSUZUKI

  この記事は「はじめてのWeb マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで連載しています。   第7回は、クエリ機能を紹介します。前回の記事と同様にソースコードは ESRIジャパンの GitHub で公開しています（※2022年2月追記：”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2022年に書き換えしたサンプルです）ので、ぜひご覧ください。 Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。   Tips GIS では、属性検索と空間検索と呼ばれる検索方法を用いて、地図に可視化された位置情報から目的の情報を取得します。 属性検索は、データの属性情報に対して検索を行います。一方、空間検索は、データ間の空間的な関連性（指定した範囲内にあるフィーチャなど）に対する検索を行います。 クエリ機能を使用することで、指定した条件に当てはまるフィーチャを簡単に取得することができます。   クエリの実行   これまでの連載で、地価公示レイヤー、市区町村レイヤー、地理院のタイル レイヤーを表示した地図を作成しました。今回は、市区町村レイヤーを使用して、レイヤーに含まれるフィーチャのうち、指定した市区町村名と一致するフィーチャを探してみます。 市区町村レイヤーの [SIKUCHOSON] フィールドには、市区町村名が含まれています。この値を利用してクエリを実行します。   1. 地図の作成   これまでの記事を参考に地図を作成します。 今回は、第５回「Web マップの作成・表示編」をもとに進めていきます。   さて、Web マップを利用する場合は、Web マップに含まれるレイヤーからクエリを実行するレイヤーをあらかじめ取得しておきます。 Web マップに追加されたレイヤーには一意の ID が付与されるので、ID が一致するレイヤーを変数に代入します。   let cityareaLyr; webmap.when(function() { webmap.layers.forEach(function(layer) { //... // レイヤー ID をもとに市区町村レイヤーを取得 if (layer.id === "<レイヤー ID>") { cityareaLyr = layer; } }); });‍‍‍‍‍‍‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 let cityareaLyr; webmap.when(() => {   webmap.layers.forEach(layer => {     //...     // レイヤー ID をもとに市区町村レイヤーを取得     if (layer.id === "<レイヤー ID>") {       cityareaLyr = layer;     }   }); });‍‍‍‍‍‍‍‍‍‍‍‍   Tips レイヤー ID は、Web マップの JSON で確認することができます。以下の URL から JSON を取得できます。 - https://<portalurl> /sharing/rest/content/items/<webmapid>/data?f=json   また、ArcGIS Online Assistant では、アイテムの管理や利用に役立つツールがいくつか提供されており、Web マップの JSON を確認することもできます。   2. クエリ パラメーターの作成   クエリの条件を指定するパラメーターを作成します。フィーチャ レイヤーに対してクエリを作成する場合は、FeatureLayer.createQuery() を使用します。   パラメーターとして設定できる条件はいくつかあります。 今回は、属性をもとにクエリを実行するので、作成したパラメーターに対して、SQL の where 句を利用して、where パラメーターに条件を指定します。 さらに、地図に結果を表示するので、検索結果として返ってくるフィーチャにジオメトリが含まれるよう returnGeometry を true に設定します。 ※ where パラメーターを設定する際はクォーテーションの位置にご注意ください。where 句に文字列を指定する場合はシングルクォートを使用します。   function doQuery() { // クエリ パラメーターの作成 const queryParams = cityareaLyr.createQuery(); queryParams.where = "SIKUCHOSON = '<市区町村名>'"; queryParams.returnGeometry = true; }‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 function doQuery() {   // クエリ パラメーターの作成   const queryParams = cityareaLyr.createQuery();   queryParams.where = "SIKUCHOSON = '<市区町村名>' + str + "' AND JCODE LIKE '23%'";   queryParams.returnGeometry = true; }‍‍‍‍‍‍   3. クエリの実行   では、クエリを実行しましょう。 FeatureLayer.queryFeatures() に手順2で作成したパラメーターを渡します。 このメソッドは Promise を返すので、then() にクエリが成功した場合に実行する関数、catch() に失敗したときに実行する関数を指定します。   function doQuery() { // クエリ パラメーターの作成 // ... // クエリの実行 cityareaLyr.queryFeatures(queryParams) .then(showResult) .catch(showErr); }‍‍‍‍‍‍‍‍‍   4. 結果の描画   クエリを実行すると、結果として、FeatureSet オブジェクトが返ります。 FeatureSet には、フィーチャが配列として含まれます。フィーチャをもとにグラフィックを作成して地図に結果を描画してみましょう。   function showResult(results) { if (results.features.length > 0) { // 結果フィーチャからグラフィックを作成 const graphics = results.features.map(function(feature) { const graphic = feature.clone(); graphic.symbol = { type: "simple-marker", style: "none", outline: { color: "#00ffff", width: "5px" } }; return graphic; }); // グラフィックを表示 view.graphics.addMany(graphics); // グラフィックへズーム view.goTo(graphics); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 function showResult(results) {   if (results.features.length > 0) {     // 結果フィーチャからグラフィックを作成     const graphics = results.features.map(feature => {       const graphic = feature.clone();       graphic.symbol = {         type: "simple-marker",         style: "none",         outline: {           color: "#00ffff",           width: "5px"         }       };       return graphic;     });     // グラフィックを表示     view.graphics.addMany(graphics);     // グラフィックへズーム     view.goTo(graphics);   } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Tips API リファレンスには、各クラスのページが用意されており、クラスの概要や提供されているメソッド、プロパティ、イベントなどの詳細な情報を知ることができます。 クエリを実行する FeatureLayer.queryFeatures() を見てみましょう。メソッドの概要のほかに引数や戻り値がどのような形式なのかを確認することができます。このメソッドは、引数に Query オブジェクトを指定し、戻り値として FeatureSet オブジェクトが返ることがわかります。   5. UI の実装   最後に、市区町村名を入力するテキストボックスとクエリを実行するボタンを作成して、UI の操作でクエリを実行できるようにします。   まず、HTML の body タグにテキストボックスとボタンを追加し、各要素を以下のように更新します。   <div id="controls"> <div id="layerToggle"></div> <div id="queryToggle"> <input type="text" value="" placeholder="豊田市" id="attrTxt"/> <input type="button" value="検索" id="queryButton"/> </div> </div>‍‍‍‍‍‍‍   次に、ボタンのクリックでクエリを実行するようにイベント ハンドラを作成します。 さらに、手順2で作成したパラメーターをテキストボックスから取得した値を使用するように変更します。   // 検索ボタンのイベントハンドラ document.getElementById("queryButton").addEventListener("click", doQuery); // クエリの実行 function doQuery() { // 前回のクエリ結果を削除 view.graphics.removeAll(); // input 要素に入力された文字列を取得 const str = document.getElementById("attrTxt").value; // クエリ パラメーターの作成 const queryParams = cityareaLyr.createQuery(); queryParams.where = "SIKUCHOSON = '" + str + "'"; queryParams.returnGeometry = true; // クエリの実行 //... }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 // 検索ボタンのイベントハンドラ document.getElementById("queryButton").addEventListener("click", doQuery); // クエリの実行 function doQuery() {   // 前回のクエリ結果を削除   view.graphics.removeAll();   // input 要素に入力された文字列を取得   const str = document.getElementById("attrTxt").value;   // クエリ パラメーターの作成   const queryParams = cityareaLyr.createQuery();   queryParams.where = "SIKUCHOSON = '" + str + "' AND JCODE LIKE '23%'";   queryParams.returnGeometry = true;   // クエリの実行   //... }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   コードを実行してみましょう。 検索ボタンをクリックすると、テキストボックスに入力した市区町村名と一致するフィーチャを取得して地図上でハイライト表示します。     クエリの基本的な利用方法の紹介は以上です。   ステップアップ：空間検索の実行   ここでは、ステップアップとして、これまでの手順で取得した市区町村のフィーチャを利用して空間検索を行ってみましょう。   地価公示レイヤーから、取得した市区町村のフィーチャに含まれるフィーチャを表示します。このように、『あるフィーチャに「含まれる」フィーチャ』、というような空間的な関連性を求めるためのクエリは空間検索と呼ばれます。   6. 地価公示レイヤーの取得   手順1を参考に、地価公示レイヤーを取得します。   webmap.when(function() { webmap.layers.forEach(function(layer) { //... // レイヤー ID をもとにレイヤーを取得 if (layer.id === "all_Japan_shikuchoson_2377") { cityareaLyr = layer; } else if (layer.id === "Aichi_ken_Chikakoji_H25_7383") { chikakojiLyr = layer; } }); });‍‍‍‍‍‍‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 webmap.when(() => {   webmap.layers.forEach(layer => {     //...     // レイヤー ID をもとにレイヤーを取得     if (layer.id === "municipalityboundaries2021_5687") {       cityareaLyr = layer;     } else if (layer.id === "LandPrice_4765") {       chikakojiLyr = layer;     }   }); });‍‍‍‍‍‍‍‍‍‍‍‍   7. クエリ パラメーターの作成とクエリの実行   空間検索では、検索に使用するジオメトリを指定する geometry オプションと、指定したジオメトリと検索対象のフィーチャとの空間的な関連性を定義する spatialRelationship オプションをパラメーターに設定します。   今回は、地価公示レイヤーのうち、市区町村フィーチャに『含まれる』フィーチャを取得したいので、geometry オプションに、ステップ 4 で取得した市区町村フィーチャを設定し、spatialRelationship オプションに contains を指定します。   // クエリの実行 function doQuery() { //... // クエリの実行 cityareaLyr.queryFeatures(queryParams) .then(showCityArea) .then(queryChikakoji) .then(showChikakoji) .catch(showErr); } // 市区町村の表示 function showCityArea(results) { // 結果フィーチャ数が 0 以上のとき if (results.features.length > 0) { //... // 空間検索で使用するためのフィーチャを返す return results.features; } } // 地価公示の取得 function queryChikakoji(features) { // クエリ パラメーターの作成 const queryParams = chikakojiLyr.createQuery(); queryParams.geometry = features[0].geometry; queryParams.spatialRelationship = "contains"; queryParams.where = "1 = 1"; queryParams.returnGeometry = true; // クエリの実行 return chikakojiLyr.queryFeatures(queryParams); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   8. 結果の描画   手順 4 を参考に、クエリの結果からグラフィックを作成して地図に描画します。 さらに、今回は、取得したフィーチャの数を表示します。   // クエリの結果を表示 function showChikakoji(results) { // 結果フィーチャ数が 0 以上のとき if (results.features.length > 0) { // 結果フィーチャからグラフィックを作成 const graphics = results.features.map(function(feature) { const graphic = feature.clone(); graphic.symbol = { type: "simple-marker", color: "#00ff80", size: "12px" }; return graphic; }); // グラフィックを表示 view.graphics.addMany(graphics); // グラフィックへズーム view.goTo(graphics); // フィーチャ数を表示 const count = results.features.length; document.getElementById("resultText").innerHTML = "地価公示地点：" + count + " 箇所"; } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2022年2月追記：2022年2月以降に試す場合は以下のコードを追加してください。 // クエリの結果を表示 function showChikakoji(results) {   // 結果フィーチャ数が 0 以上のとき   if (results.features.length > 0) {     // 結果フィーチャからグラフィックを作成     const graphics = results.features.map(feature => {       const graphic = feature.clone();       graphic.symbol = {         type: "simple-marker",         color: "#00ff80",         size: "12px"       };       return graphic;     });     // グラフィックを表示     view.graphics.addMany(graphics);     // グラフィックへズーム     view.goTo(graphics);     // フィーチャ数を表示     const count = results.features.length;     document.getElementById("resultText").innerHTML = "地価公示地点：" + count + " 箇所";   } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   HTML にフィーチャ数を表示する要素を追加します。   <div id="queryToggle"> <!-- 省略 --> <span id="resultText"></span> </div>‍‍‍‍   では、サンプルを開いてみましょう。 テキストボックスに入力した市区町村にある地価公示フィーチャが表示されましたか？     属性検索と空間検索の２つのクエリ方法を紹介しました。 クエリを活用して、目的の情報を効率的に探してみましょう。   ※2022年2月追記：クリア処理を追加 追加：クエリ結果のクリア   クリアボタンを作成して、UI の操作で追加したクエリのグラフィックを削除できるようにします。 まず、HTML の body タグにボタンを追加し、各要素を以下のように更新します。   <div id="controls">   <div id="layerToggle"></div>   <div id="queryToggle">     <input type="text" value="" placeholder="豊田市" id="attrTxt" />     <input type="button" value="検索" id="queryButton" />     <input type="button" value="クリア" id="clearButton" />   </div>   <div id="resultText"></div> </div>    次に、ボタンのクリックでクリア処理を実行するようにイベント ハンドラと処理を追加します。   // クリア処理 document.getElementById("clearButton").onclick = () => {   // 入力値、クエリ結果を削除   view.graphics.removeAll();   document.getElementById("resultText").innerHTML = "";   document.getElementById("attrTxt").value = ""; }    今回作成したサンプルは以下で動作を確認することも可能です。 属性検索：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/query/attributes.html  空間検索：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/query/spatial.html   ※2022年2月追記：2022年2月以降は、以下で動作を確認できます。 属性検索：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/query/attributes_2021.html  空間検索：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/query/spatial_2021.html   さいごに   「はじめての Web マッピングアプリケーション開発」は本記事で最後となります。 地図の作成やレイヤーの表示、検索方法など基本的な要素を紹介してきましたが、API には、マッピング アプリケーションを開発するための豊富な機能が提供されています。 API の Web ヘルプ（英語）には、トピックごとにまとめられたガイドやクラスの詳細を網羅した API リファレンス、コードと一緒に手軽に試せるサンプルを紹介したサンプル コードなど開発に役立つさまざまな情報が提供されています。 また、専門的な用語が多い GIS をわかりやすく解説した GIS 基礎解説も併せてご参照ください。   ArcGIS 開発者コミュニティでは、今後も開発に役立つ情報を提供していく予定です。ご期待ください！   関連リンク   ArcGIS API for JavaScript (ArcGIS for Developers)：https://developers.arcgis.com/javascript/ GIS 基礎解説：https://www.esrij.com/gis-guide/ ... View more

I am trying to create a custom widget and I use Esri's widget as a part of the widget. So I instantiated Esri's widget and set JSX.Element in container property. However the customized widget does not show the Esri's widget in the element. Is it possible to add a widget in customized widget? Does anyone know any information about it? Below is a part of my source code. @property() @renderable() element: JSX.Element; render() {       return(             <div                   class={CSS.base}>                   {this.element}             </div>       ); } private _onViewReady() {       const search = new Search({             view: this.view,             container: this.element as HTMLElement       }); } I do not deeply understand TypeScript and widget development, so I could miss something... Any comment is really helpful! ... View more

  はじめに   この記事は、「ArcGIS API for Python を使ってみよう」シリーズその⑥です。   当シリーズでは、ArcGIS API for Python（以下、Python API）の使い方をご紹介しています。 前回までの記事では、ArcGIS Online へデータを作成・検索・削除する方法や、Web マップにデータを可視化する方法を紹介しました。 今回は、ArcGIS Online が提供する解析ツールを利用して、データに対して空間的な解析を行います。   CSV データをもとにダムの集水域および河川の流域データを作成する     ArcGIS Online には、さまざまな解析ツールが提供されており、高度な解析を簡単に実行できます。   今回は、オープンデータとして公開されている栃木のダム諸元表（出典：G空間情報センター）をもとにダムの集水域を取得し、地図に表示してみます。さらに下流解析を行いダムから放出される水の流れを GIS 解析で求めて可視化します。   次の手順で解析の実行とマップを作成します。 CSV データをホスト フィーチャ サービスにする 集水域を作成する GIS 解析を実行する 下流解析を行う GIS 解析を実行する 解析結果を Web マップとして保存する   Tips: GIS 解析のメリット これまでの記事で、CSV ファイルやシェープファイル、オープンデータとして公開されているフィーチャ サービスなどのさまざまな位置情報を持つデータを Python API を利用して ArcGIS Online へ公開し、地図上に可視化する方法を紹介してきました。   地図を用いてデータを可視化することで、データを羅列するだけでは分からなかった空間的な関連性に気付くことができます。しかし、GIS でできることはそれだけにとどまりません。さまざまな解析手法を用いて、目的の情報を検出したり、共通の情報をまとめたり、情報の分布を探ったりすることで、データから新しい情報を得ることもできます。   実行コードと解説   実行するコードを解説していきます。   1. ダム情報の作成   解析ツールで使用するデータを準備します。 『ローカル端末から ArcGIS Online へデータを作成してみよう』の記事を参考に、CSV ファイルとして公開されているダム情報をホスト フィーチャ サービスとして公開します。   # ArcGIS Online に CSV ファイルをアイテムとして追加する csv_file = 'https://www.geospatial.jp/ckan/dataset/d6a87e42-6e86-449e-9d76-1e40319bb99b/resource/b5d633c8-f2c8-4baa-88a9-fcf1872dcfcd/download/724522014tochiginodamsyogen04033.csv' csv_item = gis.content.add({}, csv_file) display(csv_item)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   # CSV にある緯度経度の情報を使用して、追加したアイテムからホスト フィーチャ サービス（ダムのポイント）を公開する csv_lyr = csv_item.publish({'name':'dam','locationType':'coordinates', 'latitudeFieldName':'緯度', 'longitudeFieldName':'経度'}) display(csv_lyr)‍‍‍‍‍‍‍‍‍‍‍‍   CSV ファイルに含まれる位置情報が XY フィールド以外に格納されている場合、'latitudeFieldName' および 'longitudeFieldName' オプションを使用して位置情報が含まれるフィールドのヘッダーを指定します。     2. 集水域の作成   集水域を作成するには [集水域の作成（Create Watersheds）] ツールを使用します。   Python API では、ポイントなどのフィーチャ データに対して処理を行う機能は features モジュールに含まれており、解析機能は arcgis.features.analysis モジュールにまとめられています。 [集水域の作成] ツールは、create_watersheds メソッドから利用できます。メソッドに手順 1 で作成したレイヤーを渡します。また、output_name オプションに結果として出力されるレイヤー名を指定します。   # ダムのポイントのホスト フィーチャ サービスを引数にして集水域の作成ツール（create_watersheds）を実行する from arcgis.features import analysis watershedsResult = analysis.create_watersheds(csv_lyr, output_name='watersheds_result') watershedsResult‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   解析を実行してみましょう。解析が完了すると、各ダムの集水域のポリゴンを含んだレイヤーが作成されます。 さらに、レイヤーを地図に追加することで、各ダムの集水域が一目で確認できます。     3. 下流解析   続いて、[下流解析（Trace Downstream）] ツール を使用してダムから放出される水の流路を求めます。   下流解析は、arcgis.features.analysis モジュールの trace_downstream メソッドを使用します。 集水域の作成と同じように、手順1で作成したフィーチャ レイヤーを渡して解析を実行し、結果を地図に追加してみましょう。   # 集水域の解析結果で出力された調整された入力ポイントを引数にして下流解析ツール（trace_downstream）を実行する input_layer = watershedsResult.layers[0] downstreamResult = analysis.trace_downstream(input_layer, output_name='downstream_result') downstreamResult‍‍‍‍‍‍‍‍‍‍‍‍     地図を拡大すると、ダムから放出された水は下流の河川に沿って流れていくことが分かります。   4. 解析結果の保存   最後に、解析結果を表示したマップを Web マップとして保存します。   # Web マップのタイトルなどを定義する webMap_properties = {'title':'栃木県のダム・河川', 'snippet':'Python API で作成した栃木県のダム・河川 Web マップ', 'tags':'栃木県, ダム, 河川', 'extent':downstreamResult.extent } # Web マップを保存する webMap = map.save(item_properties=webMap_properties) webMap‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ArcGIS Online には、集水域や下流解析のほかにも多彩な解析ツールが用意されています。 どのツールも基本的には今回紹介した方法と同じようなフローで利用できます。 全体のコードは ESRIジャパン GitHub で公開しています。ぜひ、お手持ちのデータでお試しください。   関連リンク集 ArcGIS 関連ページ ・ArcGIS API for Python（ESRIジャパン製品ページ） ・ArcGIS for Developers（ESRIジャパン製品ページ） ・ArcGIS Online（ESRIジャパン製品ページ） ・ArcGIS for Developers 開発リソース集 ・ESRIジャパン オープンデータポータル ・ArcGIS API for Python（米国Esri ページ（英語）） シリーズブログ 関連ページ ・ArcGIS API for Python を使ってみよう：できることや使いどころ ・ArcGIS API for Python を使ってみよう ①：Jupyter Notebook で使うための環境構築 ・ArcGIS API for Python を使ってみよう：ArcGIS Pro からの環境構築 (ArcGIS Pro 2.1) ・ArcGIS API for Python を使ってみよう ②：ローカル端末から ArcGIS Online へデータを作成してみよう ・ArcGIS API for Python を使ってみよう ③：ArcGIS Online のアイテムを検索してみよう ・ArcGIS API for Python を使ってみよう ④：ArcGIS Online 上のアイテムを削除してみよう ・ArcGIS API for Python を使ってみよう ⑤：Web マップを作成してみよう ・ArcGIS API for Python を使ってみよう ⑥：解析ツールを使ってみよう ArcGIS 開発リソース集 ・ArcGIS for API for Pythonのコンセプト ・インストールガイド ・ArcGIS for API for Pythonのための基礎環境：conda入門 ... View more

※ この記事は、米国 Esri 社のブログ記事「Turbulence Ahead – Using ArcGIS API for JavaScript to Design and Evaluate a 3D Web-Based Aviation Weather Visualizer」を翻訳したものです。 チューリッヒ工科大学は、航空気象に関する直観的な 3D 可視化表現の不足に対処するため、国際線を運行している航空会社と協力して、ArcGIS API for JavaScript を使用して気象予報データを 3D Web アプリケーションに表示するプロトタイプを開発しました。このブログ記事では、実装プロセスの詳細と、ArcGIS API for JavaScript が設計プロセスで使用された方法、およびパイロットがこんにち使用している 2D マップに対してプロトタイプを評価したユーザーテストについて紹介します。 可視化だけではなく、日々の業務で 3D データの利点をすでに実感し、探求している業界がますます増えています。航空業界も例外ではありません。Web 上の 3D グラフィックスやストリーミング サービスの分野における技術的な進歩により、大量の気象に関連する航空データを可視化する新しい可能性が広がりました。 民間航空会社のパイロットは、飛行計画のためにさまざまな気象プロダクトを使用し、大気中の乱気流の激しいエリアを避けています。これらの気象プロダクトの多くは、パイロットに対して乱気流の予測データを含む気象情報を 2D で表示しています（例えば、図２は 2D の Significant Weather Charts です）。過去数十年間で重大な航空機事故が大幅に減少した一方で、乱気流に起因する傷害および死亡事故の数は依然として増加しています。 図２：2D の Significant Weather Charts（ソース：https://www.aviationweather.gov/progchart） 乱気流は依然として民間航空の大きな脅威であり、予測データを 3D で可視化することは、チューリッヒ工科大学の地図学および地理情報の研究機関（Institute for Cartography and Geoinformation）の研究者に 3D Web ベースの航空気象ビジュアライザーを開発する動機となりました。4ヵ月にわたり、修士論文の範囲内で、プロトタイプが設計、実装され、最終的に64人のパイロットが参加したユーザー・スタディで評価されました。 データ処理 プロトタイプに使用される元の乱気流予測データは、いわゆる Significant Weather Charts（SWC）です。これは、ロンドンとワシントンにある World Area Forecast Center（WAFC）によって1日に4回発行されます。2D の白黒マップは、ジェット気流、雲や晴天での中程度または深刻な乱気流のエリア、雷雨をともなう積乱雲および航空に関するそのほかの気象現象などの要素を示します。 2D 要素は、はじめに ArcGIS Proを使用してデジタイズし（ソース データが利用できないため）、注釈を付けたり、高度や追加情報を表すいくつかの属性（例えば、最小と最大の高さなど）を付与しました。いくつかのレイヤーは、飛行経路と乱気流エリアとの 3D 交差や、気流に沿って均等に配置されたポイント上のジェット気流の方向の判定などに利用するために、さらに処理が必要でした。 次のステップでは、Web アプリケーションが 3D 可視化のためにアクセスする Portal for ArcGIS にすべてのデータ レイヤーを公開することでした。図3に示したワークフローで、アプリケーションのプロトタイプを作成し、その後、パイロット・スタディでレビューを行いました。 図３：既存の 2D 気象予測データから 3D Web アプリケーションへのワークフロー 設計 航空気象データを可視化する主な課題のひとつは、ほとんどの気象プロダクトが気象学者によって作成、維持され、パイロット向けに設計されていないことです。高水準のユーザビリティを備えたプロトタイプを実装するためには、経験豊富なパイロットという専門家からのフィードバックに基づき最適な設計が確認できるパイロット・スタディを行うことが重要でした。パイロット・スタディを行う動機は、気象オブジェクトのパイロットの感覚と可能な限り一致する 3D 表現を実装するという要件から生じました。 パイロット・スタディは、現場でのインタビューのために招かれた３名の専門家により実施されました。彼らは、最初のドラフト段階のアプリケーションでいくつかの設計パラメーターを選択することができました。パラメーターには、垂直方向の強調（太さ）、地面からのオフセット、要素とベースマップの色、レンダラーの種類などが含まれていました。アプリケーションの夜間モードについては、専門家が、図4のような異なる 3D 設計を考え出しました。彼らはまた、より明るい色を持つ日中モードのためのパラメーターを動的に選択することができました。ほとんどの航空機のディスプレイは、操縦席の照明が頻繁に変化するため、昼夜モードの切り替えができるようになっており、アプリケーションにもデュアルモードが実装されました。 図４：パイロット・スタディで開発された専門家からの設計提案 パイロット・スタディの情報と、専門家による3つの設計の追加レビューは、実際のプロトタイプを実装するために使用されました。 実装 すでに説明したように、アプリケーションは、3D シンボル機能を備えた ArcGIS API 4.x for JavaScript を使用して実装されました。ここでは、3D の方向線の表示を必要とするジェット気流の可視化および現在の WebGL の制限のために必要な手動での透明度ソートの2つの実装の詳細を紹介します。 ジェット気流の可視化は図5に見ることができます。3D ラインとオーバーレイされた 3D パス両方の可視化が特徴です。3D ラインは縮小しないため大縮尺に適しており、3Dパスは近くにズームインしたときに適しています。また、3D パス シンボルは、ジェット気流のパイロットの感覚とよく似ています。さらに、風速は異なる色で可視化され、飛行高度はコールアウト付きのラベルとして表示されます。ジェット気流の難しいところは、気流の方向が重要で可視化する必要があるということです。ArcGIS API for JavaScript は、ArcGIS Pro のような方向に関するレンダラーが組み込まれていないため、回避策を設定する必要がありました。 図5：方向の 3D シンボルを使用した Web アプリケーションでのジェット気流の可視化 ジェット気流の方向は、白い円錐シンボルとして ObjectSymbol3DLayer（width = 75 km, height = 150 km）を使用して可視化しました。シンボルの回転は、オブジェクトの heading プロパティに可視化変数を設定し、気流に沿った各ポイントに適用しました。さらに、シンボルは、正しい初期配置と同様に横になるように 270° 傾けます。 以下は、シンボルのレンダラーです。 renderer = {   type: "simple",   symbol: {     type: "point-3d",     symbolLayers: [{       type: "object",       resource: { primitive: "cone" },       color: "white",       tilt: 270,       width: 75000,       height: 150000     }]   },   visualVariables: [{     type: "rotation",     field: "angle",     stops: [       { value: 0, size: 180 },       { value: 0, size: 180 }     ],     axis: "heading",     rotationType: "geographic"   }] }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 色や形のような透過率は、特にデータ オーバーレイの 3D 可視化において効果的な可視化変数であることが証明されています。しかし、正しい透明度ソートをすることは、Web で 3D グラフィックスを表示する際の課題の1つであり、WebGLではサポートされていません。いくつかの気象オブジェクトは透明なスタイルでレンダリングされているため（例えば、気象オブジェクトを囲むオブジェクトを可視化するため）、プロトタイプには順序に依存する透明度ソートを手動で設定しました。実装は、直前の FeatureLayer の LayerView が読み込まれるまで待つ各レイヤーの promise を使用することで実現しました。その後、次のレイヤーまたはレイヤーのグループが読み込まれます。透明度ソートの結果は図6で見られます。 図６：手動の透明度ソートで Web アプリケーション内で積乱雲を可視化 以下は、レイヤー1がレイヤー2により囲まれており、レイヤー2がレイヤー3のアウトラインを表していることを想定したときに、どのように実装されるかを示したコードです。 view.whenLayerView(layer1).then(function () {        scene.add(layer2);                             view.whenLayerView(layer2).then(function () {                    scene.add(layer3);   }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 実装に関するもうひとつの興味深いトピックは、このアプリケーションのターゲット デバイスが、パイロットによってコックピットに持ち込まれるタブレットであることです。タブレットなどのモバイル デバイスのサポートは、ArcGIS API for JavaScript のバージョン 4.6 から利用可能であり、この要件はプロトタイプの開発を満たしています。図７で、ブラウザーと比較してタブレットに表示されているWebアプリケーションを確認できます。 図７：ブラウザーとタブレットの Web アプリケーションのインターフェイス 評価 このプロジェクトの研究課題は、データの 3D 表現がヒューマン・コンピューター・インタラクションの特定の側面を高めることができるのか、というアイディアを中心に展開したため、次のステップとしてユーザー・スタディの形式で評価が行われました。評価、比較された見地は、認知負荷、ユーザビリティ、空間認識でした。ユーザー・スタディの参加者は、2D の白黒マップと新しい 3D プロトタイプの両方で可視化された飛行計画に関連する一連のタスクを実行するように求められました。同じ航空会社の 64 名のパイロットがユーザー・スタディに参加しました。結果は、2つの条件の間で評価され、新しい Web ベースのアプリケーションを使用したときに、認知負荷が 18.3％ 減少し、ユーザビリティが 29.4％、空間認識が 24.4％ 改善されました。認知負荷とユーザビリティについては、標準的なアンケートを使用して相違を測定し、空間認識は、ArcGIS API for JavaScript を使用しました。 空間認識は、飛行経路とベースマップを参照して、4つのカテゴリの気象オブジェクト（ジェット気流、雲、積乱雲、晴天乱気流エリア）を描画するタスクによって評価されました。認知地図（cognitive maps）と感覚を評価するために使用されたスケッチ マップの描画は、方向感覚、つまり空間認識、に関する環境の認識を調査するための信頼できるソースであることが証明されています。ユーザー・スタディの参加者は、2D または 3D で表現されたデータを見て、第２ステップで記憶したものを描くことが求められました。記憶したものの描画は、マップと描画ウィジェットを使用したユーザー・スタディで実施されました。参加者が描いたフィーチャは結果レイヤーに新しいフィーチャとして保存されました。参加者のひとりの描画は、参加者が 2D または 3D で提示されたものと比較して、図8に見ることができます。 図８：空間的な類似を探すための実際の航空気象の要素（右）と参加者が描画したもの（左） この研究プロジェクトは航空気象における 3D Web ベースの可視化の使用の大きな潜在的かつ有望な結果を示したもので、チューリッヒ工科大学は航空会社と協力して継続してプロジェクトを行っています。さらに、このプロジェクトは、ユーザーインターフェイスを中心とした研究コミュニティに貢献し、国際会議でも発表されています。詳細は、このプロジェクトに関する研究論文を参照してください。 ... View more

※ この記事は、米国 Esri 社のブログ記事「Migrating Web Apps from Google to ArcGIS: Adding a Shape」を翻訳したものです。 本記事は、Google Maps JavaScript API から ArcGIS API for JavaScript（以下、JavaScript API）への移行に関連する基本的なトピックを紹介するブログシリーズの第4弾です。 このシリーズでは、以下のトピックを取り上げます。 第1弾：はじめに - マーカーとポップアップの表示 第2弾：ルート案内の取得とルートの表示 第3弾：検索とジオコーディング 第4弾：シェイプの追加 今回はマップへシェイプ（ラインやポリゴンなどの図形）を追加する概要を紹介します。   はじめに 開発者向けプログラムへ無償でサインアップし、ArcGIS で開発をはじめてみましょう。このプログラムは、JavaScript API へのアクセス、1 ヶ月あたり 100 万 トランザクションまでのベースマップおよびジオサーチ（インタラクティブな検索とズームなど）、ArcGIS Online にホストされた多様なコンテンツやサービスへのアクセス、無制限の非商用アプリのデプロイをはじめとするサービスを無償で利用できます。そのほか提供されているサービスはブログシリーズの第1弾の記事を参照ください。   基本的なマッピング アプリケーションの作成 第1弾の記事で JavaScript API の読み込みとマップの作成方法を参照してください。   ポリラインの追加 ポリラインやポリゴン、円などのシェイプは、ジオメトリとデフォルトのシンボルまたはカスタマイズされたシンボルにより定義されます。必要に応じて、各シェイプへ属性情報を割り当てたり、属性を表示するポップアップを追加したりできます。ここでは、属性を持たないポリラインをマップへ追加してみましょう。 Google では、ポリラインをマップへ追加するために、一連のライン セグメントまたはパスを定義する２つ以上の緯度経度の座標の配列を作成します。各座標はリストされた順で渡されます。最後に作成されたポリラインをマップに追加します。 const map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: {lat: 21.4691, lng: -78.6569} }); const polylineCoordinates = [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757} ]; const polyline = new google.maps.Polyline({ path: polylineCoordinates }); polyline.setMap(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ JavaScript API でポリラインを作成するパターンは似ています。ポリラインのジオメトリはポリラインのパスを定義する2つ以上の緯度経度の配列で構成されます。マップにポリラインを表示するため、ポリラインのジオメトリからグラフィックを作成し、グラフィックにシンプルなライン シンボルを設定して、グラフィック レイヤーへ追加します。 require([ "esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer" ], function( Map, MapView, GraphicsLayer ) { const graphicsLayer = new GraphicsLayer(); const map = new Map({ basemap: "streets-vector", layers: [graphicsLayer] }); const view = new MapView({ center: {latitude: 21.4691, longitude: -78.6569}, container: "viewDiv", map: map, zoom: 3 }); const polylineGraphic = { geometry: { type: "polyline", paths: [ [-80.190, 25.774], [-66.118, 18.466], [-64.757, 32.321]] }, symbol: { type: "simple-line" } }; graphicsLayer.add(polylineGraphic); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ シェイプを作成し、属性を割り当て、ポップアップを追加するチュートリアルに興味がある方は DevLab の Display point, line, and polygon graphics をトライしてみてください。   対話式でシェイプの描画 コード内でシェイプをあらかじめ定義する方法のほかに、ユーザーがスケッチ ツールを使用して対話的にシェイプを描画することができます。これを実現するには、スケッチ ツール（SketchViewModel）のインスタンスを初期化し、create-complete イベントのイベント リスナーを設定します。リスナーに渡したイベント ハンドラ内で、ポリラインのジオメトリを使用して新しいグラフィックを作成し、グラフィック レイヤーへ追加します。 require([ "esri/views/MapView", "esri/Map", "esri/widgets/Sketch/SketchViewModel", "esri/layers/GraphicsLayer", ], function( MapView, Map, SketchViewModel, GraphicsLayer ) { // スケッチ ツールにより作成されたグラフィックを持つグラフィック レイヤー const graphicsLayer = new GraphicsLayer(); const map = new Map({ basemap: "streets-vector", layers: [graphicsLayer] }); const view = new MapView({ container: "viewDiv", map: map, zoom: 3 }); view.when(function() { const sketchViewModel = new SketchViewModel({ view: view, layer: graphicsLayer }); sketchViewModel.on("create-complete", function(event){ graphicsLayer.add({ geometry: event.geometry, symbol: sketchViewModel.graphic.symbol }); }); sketchViewModel.create("polyline"); }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ スケッチ ツールはさまざまなジオメトリ タイプを作成できます。sketch temporary geometry サンプルで動作を確認してみましょう。   次のステップと関連リソース ArcGIS API for JavaScript の学習と効率的なアプリ開発のためのさまざまなリソースが提供されています。 マップへのシェイプの追加やスケッチ ツールでできることをもっと知る マップへ追加したシェイプのシンボルをインタラクティブにスタイリングするシンボル プレイグラウンドを試す。シンボルのスタイルが決まったら、コードをコピーしてアプリケーションで利用できます。 コードを試せる sandbox を利用したサンプル、API を使用した開発に関する主なトピックにフォーカスしたガイド、API リファレンスを調べる API を使用した開発について順を追って学べるチュートリアルである DevLabs を試す   ArcGIS 開発者コミュニティでは、ArcGIS API for JavaScript を使用して、はじめて地図アプリ開発を行う方へ「はじめての Web マッピングアプリケーション開発」と題したシリーズ記事を連載しています。こちらもぜひご参照ください。 ... View more

※ この記事は、米国 Esri 社のブログ記事「Migrating Web Apps from Google to ArcGIS: Searching and Geocoding」を翻訳したものです。   本記事は、Google Maps JavaScript API から ArcGIS API for JavaScript（以下、JavaScript API）への移行に関連する基本的なトピックを紹介するブログシリーズの第3弾です。 このシリーズでは、以下のトピックを取り上げます。 第1弾：はじめに - マーカーとポップアップの表示 第2弾：ルート案内の取得とルートの表示 第3弾：検索とジオコーディング 第4弾：シェイプの追加 今回は検索（ジオサーチ）とジオコーディングの概要を紹介します。 はじめに 開発者向けプログラムへ無償でサインアップし、ArcGIS で開発をはじめてみましょう。このプログラムは、JavaScript API へのアクセス、1 ヶ月あたり 100 万 トランザクションまでのベースマップおよびジオサーチ（インタラクティブな検索とズームなど）、ArcGIS Online にホストされた多様なコンテンツやサービスへのアクセス、無制限の非商用アプリのデプロイをはじめとするサービスを無償で利用できます。そのほか提供されているサービスについては、このシリーズの第1弾の記事を参照ください。   基本的なマッピング アプリケーションの作成 第1弾の記事で JavaScript API の読み込みとマップの作成方法を参照してください。   場所の検索 マップ上の目的の場所を探す方法はいくつかあります。ひとつはキーワードまたはタイプをもとに特定の地点周辺の場所の一覧を検索する方法です。 特定の地点の周辺のレストランを検索したいとき、Google では、検索の中心地点を定義し、nearbySearch を行うため PlacesService を使用します。コールバック内で検索結果をパースし、表示します。 const searchCenter = {lat: 40.0150, lng: -105.2705}; const map = new google.maps.Map(document.getElementById("map"), { zoom: 7, center: searchCenter }); const service = new google.maps.places.PlacesService(map); service.nearbySearch({ location: searchCenter, radius: 500, type: ["restaurant"] }, callback);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 同じような検索を JavaScript API で行うには、検索の中心地点を定義し、addressToLocations により地点の付近を検索するため Locator を使用します。以下では、Locator は ArcGIS World Geocoding Service を使用して ”food” カテゴリーにある地点を検索します。 require([ "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/geometry/Point" ], function( Map, MapView, Locator, Point) { const searchCenter = new Point({ type: "point", latitude: 40.0150, longitude: -105.2705 }); const map = new Map({ basemap: "streets-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: searchCenter, zoom: 7 }); const locator = new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); locator.addressToLocations({ location: searchCenter, distance: 500, categories: ["Food"] }) .then(function(results) { // 結果のパースとグラフィックの描画 }) });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 場所の検索に関するチュートリアルに興味がある方は DevLab の Find places をトライしてみてください。 JavaScript API では、検索ウィジェットを使用して複数の検索機能をまとめて実装することも可能です。ウィジェットは、たった数行のコードで検索とジオコーディングの機能を提供します。場所の検索やジオコーディングに加えて、マップ上の独自のデータを検索するようウィジェットを構成することも可能です。 const searchWidget = new Search({ view: view });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   以下は検索ウィジェットをアプリケーションの右上に追加する例です。 view.ui.add(searchWidget, { position: "top-right" });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   検索結果を取得すると、ウィジェットはマップを関連する地点へズームし、自動でポップアップを作成します。検索ウィジェットを使用したサンプルを確認ください。 Locator は、場所の名前による検索に加えて、ジオコーディングやリバース ジオコーディングなどにも使用されます。例えば、locationToAddress は、マップ上の特定のポイントから住所を検索するときに使用されます。これは、マップ上をクリックしたときにポイントを取得するクリック イベントを作成し、取得したポイントをクリック地点の住所を返すために locationToAddress へ渡すことで実現されます。 view.on("click", function(event){ geocoder.locationToAddress(event.mapPoint) .then(function(response) { // 結果のパースとグラフィックの描画 }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ リバースジオコーディングを使用した住所検索に関するチュートリアルに興味がある方は DevLab の Search for an address をトライしてみてください。   次のステップと関連リソース 次回はマップへシェイプ（ラインやポリゴンなどの図形）を追加する方法について紹介する予定です。ご期待ください。 ArcGIS API for JavaScript の学習と効率的なアプリ開発のためのさまざまなリソースが提供されています。 複数の住所の処理、地点から住所への変換、自動入力機能を提供する suggest API など Locator でできることをもっと知る コードを試せる sandbox を利用したサンプル 、API を使用した開発に関する主なトピックにフォーカスしたガイド、API リファレンスを調べる API を使用した開発について順を追って学べるチュートリアルである DevLabs を試す ※ 今後のブログシリーズについては、米国 Esri 社のブログで紹介され次第、順次翻訳してお届けする予定です。 ... View more

※ この記事は、米国 Esri 社のブログ記事「Migrating Web Apps from Google to ArcGIS: Directions and Routing」を翻訳したものです。   本記事は、Google Maps JavaScript API から ArcGIS API for JavaScript（以下、JavaScript API）への移行に関連する基本的なトピックを紹介するブログシリーズの第2弾です。 このシリーズでは、以下のトピックを取り上げます。   第1弾：はじめに - マーカーとポップアップの表示 第2弾：ルート案内の取得とルートの表示 第3弾：検索とジオコーディング 第4弾：シェイプの追加   はじめに   開発者向けプログラムで無償で開発者アカウントを作成し、ArcGIS で開発をはじめてみましょう。開発者アカウントでは、JavaScript API へのアクセス、1 ヶ月あたり 100 万 トランザクションまでのベースマップおよびジオサーチの利用、ルート検索等のプレミアムサービス利用のためのサービス クレジット（1ヶ月 50 クレジットまで）、アプリ数無制限のデプロイをはじめとするサービスを無償で利用できます。そのほか提供されているサービスはブログシリーズの第1弾の記事 を参照してください。   また、開発者向けプログラムのアカウントへサインアップすると、アプリ開発に使用するルート検索のための ArcGIS Online  にホストされたプロキシを作成することができます。   基本的なマッピング アプリケーションの作成   第1弾の記事で JavaScript API の読み込みとマップの作成方法を参照してください。   ルート案内の表示   ここでは、指定した2地点間のルート案内とルートを作成、表示する方法を見ていきます。   Google では、以下のような処理を行います。   const map = new google.maps.Map(document.getElementById("map"), { mapTypeId: "roadmap", center: {lat: 39.8367, lng: 105.0372}, zoom: 10 }); const directionsService = new google.maps.DirectionsService; const directionsDisplay = new google.maps.DirectionsRenderer; directionsDisplay.setMap(map); directionsService.route({ origin: "Denver, CO", destination: "Boulder, CO", travelMode: "DRIVING" }, function(response, status) { if (status === "OK") { directionsDisplay.setDirections(response); } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ArcGIS では、指定した2地点間のルート案内の計測または数行のコードで動的なルート案内を実装できるルート案内ウィジェットを利用することができます。ルート案内ウィジェットは以下のことが可能です。 出発地点と到達地点の検索またはマップのクリックによる 1つ以上の地点へのルートの設定 出発地点と到達地点のマーカー表示 Esri World Route service（または ArcGIS Server へ独自に公開したサービス）を使用したルート計測および計測結果のマップへの表示 進路変更のルート案内の表示   ウィジェットを使用するためには、routeServiceUrl へ [はじめに] で紹介した ArcGIS Online にホストされたプロキシを指定して初期化し、View UI へ追加します。JavaScript API は便利な UI 配置ツールを提供しています。以下は、ウィジェットを View の右上に追加するコードです。   require([ "esri/Map", "esri/views/MapView", "esri/widgets/Directions" ], function( Map, MapView, Directions) { const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map }); const directionsWidget = new Directions({ view: view, // Paste the hosted proxy URL here that you created previously routeServiceUrl: "https://utility.arcgis.com/usrsvcs/appservices/<your-id>/rest/services/World/Route/NAServer/Route_World/" }); // Add the Directions widget to the top right corner of the view view.ui.add(directionsWidget, { position: "top-right" }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   このコードではナビゲーション ベースマップを使用していますが、道路（夜）のような豊富なベースマップから選択できます。     サンプルを使用してルート案内ウィジェットを試してみましょう。   ルートサービスの使用   2つ以上の地点間の経路を検索し、ルート案内を提供する JavaScript API の RouteTask を直接使用することも可能です。RouteTask は、シンプルなルートを解析するだけでなく、複数の地点やバリア、時間枠を考慮に入れた複雑なルートも処理できます。マップ上で2地点間のルートを検索するシンプルなアプリケーションを作成するには、出発地点と到達地点のグラフィックを作成し、ルートを計測するために RouteTask を使用します。計測されたルートは、マップに表示されます。ルート案内ウィジェットのサンプルと同じように、RouteTask は ArcGIS Online にホストされたプロキシの URL を参照します。   require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/tasks/RouteTask", "esri/tasks/support/RouteParameters", "esri/tasks/support/FeatureSet" ], function( Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet ) { // Point the URL to a valid route service const routeTask = new RouteTask({ url: "https://utility.arcgis.com/usrsvcs/appservices/<your-id>/rest/services/World/Route/NAServer/Route_World/" }); const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [-105.0372, 39.8367], zoom: 10 }); const origin = new Graphic({ symbol: { type: "simple-marker", color: "cyan" }, geometry: { type: "point", longitude: -104.9903, latitude: 39.7392 } }); const destination = new Graphic({ symbol: { type: "simple-marker", color: "yellow" }, geometry: { type: "point", longitude: -105.2705, latitude: 40.0150 } }); const route = [origin, destination]; view.graphics.addMany(route); const routeParams = new RouteParameters({ stops: new FeatureSet({ features: route }) }); routeTask.solve(routeParams).then(function(data) { data.routeResults.forEach(function(result) { result.route.symbol = { type: "simple-line", color: "blue", width: "4px" }; view.graphics.add(result.route); }); }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   RouteTask についての詳細はサンプルを参照ください。   まとめと次のステップ   Google Maps のルート検索アプリケーションを ArcGIS API for JavaScript へ移行する基本を紹介しました。ArcGIS は、そのまま使用できる UI コンポーネントまたは独自のカスタマイズに対応しており柔軟な開発をサポートします。   開発をはじめるのに役立つ以下のリソースもあわせて参照ください。 Google Maps JavaScript API から ArcGIS API for JavaScript への移行 DevLab – Get a route and directions（英語） Sample – Directions widget（英語） Introduction to creating a 2D map（英語） Introduction to Widgets（英語）   ※ 今後のブログシリーズについては、米国 Esri 社のブログで紹介され次第、順次翻訳してお届けする予定です。 ... View more

※ この記事は、米国 Esri 社のブログ記事「Migrating from Google Maps JavaScript API to ArcGIS API for JavaScript」を翻訳したものです。 先日 Google が発表した価格と請求に関する変更により、Web アプリに表示している地図のコストが増加していませんか？この価格の更新は、Google Maps API を使用している多くの開発者がほかの Web マッピング サービスへの移行を検討し、ArcGIS を選択するきっかけになっています。それにはいくつかの理由があります。 ひとつめに、ArcGIS API for JavaScript は、2D および 3D でのデータ探索や可視化のための強力な開発ツール、魅力的な UX を作成するためのウィジェット、そして最新の Web 技術を活用したインタラクティブなアプリ開発のためのクライアント サイド処理により、洗練された Web マッピング API として位置付けられています。 ふたつめに、Esri の ArcGIS 開発者向けプログラムでは、開発者は以下に挙げるような多くのことを無償で行えます。 Esri が提供する Web、ネイティブ、そしてモバイルプラットフォーム向けのすべての API および SDK の利用 1 ヶ月あたり 100 万 トランザクションまでのベースマップおよびジオサーチの利用 ルート検索などのプレミアム サービスのためのサービス クレジット（1 ヶ月あたり 50 クレジットまで）利用 非商用のアプリを、アプリ数もユーザー数も無制限で公開 ArcGIS  Online にホストされている幅広いリッチなコンテンツおよびサービスへのアクセス ベースマップのスタイリングおよびマップ コンテンツの管理 ジオグラフィック コンテンツのホスティング、クエリおよび解析の実行 Google Maps JavaScript API から ArcGIS API for JavaScript への移行の準備はできましたか？ここでは、いくつかの基本的なコンセプトの概要を見てみましょう。 ArcGIS API for JavaScript による開発 ArcGIS の開発者向けプログラムへサインアップして、コストをかけずに始めてみましょう。開発者向けプログラムでは、前項でリストアップした以上のことが可能です（詳細は開発者向けプログラムの Web サイトを参照ください）。 Google Maps JavaScript API を読み込むには、以下のように Google API キーを含めた API を参照します。 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 一方、ArcGIS API for JavaScript に API キーは必要ありません。API とスタイルシートの参照だけで利用できます。 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> <script src="https://js.arcgis.com/4.8/"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ マップの表示 以下は Google を使用した場合のマップの作成方法です。 const map = new google.maps.Map(document.getElementById('mapDiv'), { mapTypeId: 'roadmap', center: { lat: 35.6779, lng: 139.7719}, zoom: 12 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ArcGIS ではどうなのか見てみましょう。ArcGIS では、マップは Map と View を使用して作成します。View は 2D または 3D（またはその両方）でのデータの可視化からマップ データの分離を可能にします。 require(["esri/Map", "esri/views/MapView"], function(Map, MapView) { const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: { latitude: 32.7353, longitude: -117.1490 } }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 上記のコードは、Esri のナビゲーション ベースマップを背景にしたマップを作成します。衛星画像や地形図、キャンバス（ダーク グレイ）などの ArcGIS Online が提供するベースマップから用途に合ったベースマップを選択することもできます。 マーカーの追加 Google でマーカーは以下のように追加します。 const marker = new google.maps.Marker({ position: { lat: 32.7353, lng: -117.1490 }, title: "San Diego Zoo", map: map });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ArcGIS では、マーカーを追加するためには、View のグラフィック コレクションへ新しいグラフィックを追加します。 view.graphics.add({ symbol: { type: "simple-marker", color: "cyan" }, geometry: { type: "point", longitude: -117.1490, latitude: 32.7353 } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 上記のコードは、シアン色の円形のシンプルなマーカー シンボルを作成しますが、マーカーをシンボルで表現する方法はほかにもあります。例えば、Esri Icon Font からシンボルを選択することもできます。以下はマップピン アイコンを使用した例です。 view.graphics.add({ symbol: { type: "text", color: "#7A003C", text: "\ue61d", // esri-icon-map-pin font: { size: 30, family: "CalciteWebCoreIcons" } }, geometry: { type: "point", longitude: -117.1490, latitude: 32.7353 } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ArcGIS では、シンボルを選択するためのより動的なオプションは、データの属性情報を使用して、シンボルの色や大きさ、不透明度を定義することです。地震データの GeoJSON からグラフィックを作成し、マグニチュードに比例した大きさのシンボルを動的に各グラフィックのシンボルへ設定しているサンプルを見てみてください。 ポップアップの使用 Google の情報ウィンドウ（InfoWindow）はポップアップ ウィンドウにコンテンツを表示するために使用され、以下の方法でマーカーに追加されます。 const map = new google.maps.Map(document.getElementById("mapDiv"), { mapTypeId: "roadmap", center: { lat: 32.7353, lng: -117.1490 }, zoom: 14 }); const marker = new google.maps.Marker({ position: { lat: 32.7353, lng: -117.1490 }, title: "San Diego Zoo", map: map }); const contentString = "<h1>San Diego Zoo</h1>" + "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " + " in Balboa Park houses over 3,700 animals.<p><p>" + "<img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"; const infowindow = new google.maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infowindow.open(map, marker); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ArcGIS では、ポップアップ テンプレートを作成することでポップアップを作成できます。テンプレートはポップアップのコンテンツを定義します。以下は Map と View を作成し、ピン アイコンのマーカーを表示して、ポップアップを追加したすべてのコードです。 require([ "esri/Map", "esri/views/MapView" ], function( Map, MapView ) { const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: { latitude: 32.7353, longitude: -117.1490 } }); const contentString = "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " + " in Balboa Park houses over 3,700 animals." + "<p><p><img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>"; view.graphics.add({ symbol: { type: "text", color: "#7A003C", text: "\ue61d", // esri-icon-map-pin font: { size: 30, family: "CalciteWebCoreIcons" } }, geometry: { type: "point", longitude: -117.1490, latitude: 32.7353 }, popupTemplate: { title: "San Diego Zoo", content: contentString } }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 完成したアプリは codepen で確認できます。 最後に、同じアプリを 3D で作成してみましょう。"MapView" を "SceneView" へ変更するだけで簡単に 3D アプリを作成できます。コードはここから確認できます。 次のステップと関連リソース 今後は、以下のワークフローに沿ったチュートリアルを紹介する予定です。ご期待ください。 検索とジオコーディング ルートの検索と表示 シェイプの追加 ArcGIS API for JavaScript の学習と効率的なアプリ開発のためのさまざまなリソースが提供されています。 コードを試せるサンドボックスでさまざまなサンプルを探索可能 API を使用した開発についての主要なトピックにフォーカスした有用なガイド 検索可能な API リファレンス API を使用した開発を学べるチュートリアルを提供する dev lab ※ 今後のステップについては、米国 Esri 社のブログで紹介され次第、順次翻訳してお届けする予定です。 ... View more

「デスクトップ地図アプリ開発」シリーズ第4弾です。   今回は、第3弾で作成した地図アプリに、ズーム レベルを変更するボタンを追加します。本記事で紹介する機能のサンプル コードは Esriジャパン GitHub で公開しています。   ズーム ボタンの追加 ArcGIS Maps SDK for .NET（以下、SDK） では、コードを書かなくてもマップを表示した時点で、マウス操作でのマップの移動や縮尺変更などの操作が行えます。さらに、SDK にはプログラミングを使用した動的なマップ操作の機能も用意されています。今回は、ズームイン/ズームアウトの操作をズーム ボタンからコントロールする機能を実装します。   1. MainWindow.xaml を開き、ズーム ボタンを作成します。コードから、MapView コントロールにアクセスするために、MapView コントロールに x:Name 属性（x:Name="MainMapView"）を追加します。また、＋/－のズーム ボタンを作成します。   MainWindow.xaml <esri:MapView x:Name="MainMapView" Map="{Binding Map, Source={StaticResource MapViewModel}}" /> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5"> <Button Content="＋" Height="20" Width="20" Background="White" Click="OnZoomin" ToolTip="ズームイン"></Button> <Button Content="－" Height="20" Width="20" Background="White" Click="OnZoomout" ToolTip="ズームアウト"></Button> </StackPanel>   2. MainWindows.xaml.cs を開きます。ボタンのクリック イベント ハンドラーを作成し、マップのスケールを設定する MapView.SetViewpointScaleAsync() にズームしたいスケールの値を渡します。下記コードでは、現在のスケールから 2 倍または 1/2 のスケールへズームするように設定しています。   MainWindow.xaml.cs // ズームインボタンのイベント ハンドラー private async void OnZoomin(object sender, RoutedEventArgs e) { // 現在のマップのスケールを取得し、1/2 のスケールで表示する double currentScale = MainMapView.MapScale; double scale = currentScale / 2; await MainMapView.SetViewpointScaleAsync(scale); } // ズームアウトボタンのイベント ハンドラー private async void OnZoomout(object sender, RoutedEventArgs e) { // 現在のマップのスケールを取得し、2 倍のスケールで表示する double currentScale = MainMapView.MapScale; double scale = currentScale * 2; await MainMapView.SetViewpointScaleAsync(scale); }   3. MapViewModel.cs の SetupMap 関数にマップを表示するスケールの範囲を設定します。表示するデータの範囲に応じた最適なスケールを定義することで、データの確認が容易になります。各レイヤーに対しての表示スケールは Web マップでも設定可能ですが、マップ自体の表示スケールを設定する場合は、コーディングで実装する必要があります。   MapViewModel.cs Map = new Map(mapItem); await Map.LoadAsync(); // マップのスケール範囲を設定する Map.MinScale = 5000000; Map.MaxScale = 5000;   4. アプリを実行して、ズーム ボタンのクリックでスケールが変更されるか確認します。   第4弾「マップ操作」ではマップのズーム レベルを変更する方法を紹介しました。次回、第5弾ではマップに追加しているデータの属性情報を取得する方法を紹介します。   関連リンク デスクトップ地図アプリ開発 （連載記事の紹介） ArcGIS Maps SDK for .NET（米国Esri社 / ESRIジャパン） ... View more

  前回の記事では、東京公共交通オープンデータチャレンジへ応募したアプリ の概要をご紹介しました。 今回は、アプリがどのような仕組みで動作しているのか、その裏側をご紹介します。   また、アプリのソースコードは、Esriジャパンの GitHub で公開しています。記事とあわせて、ぜひご参照ください。   リアルタイム列車遅延マップ   前回の記事でもご紹介した通り、東京公共交通オープンデータチャレンジへ応募したリアルタイム列車遅延マップは、遅延している路線を地図上に表示することで、通勤、退勤のタイミングの判断に役立ててもらうことを目的に作成しました。   遅延している路線の情報は、東京公共交通オープンデータチャレンジが公開している東京メトロ 列車ロケーション情報を利用しました。 列車ロケーション情報には、列車が出発した駅（fromStation）と列車が向かっている駅（toStation）、そして遅延時間（delay）が含まれています。これらの情報をもとに地図に遅延情報を可視化する、という機能を実装するところからアプリの開発はスタートしました。   遅延情報の取得   列車ロケーション情報の変換   アプリの大枠は決まりましたが、どのようにして遅延情報を地図に表示するのか？というのが大きな課題でした。 なぜならば、列車ロケーション情報に含まれる位置情報は、緯度経度やフィーチャというような、普段私たちが扱いなれている GIS データではなく、列車が出発した駅と列車が向かっている駅という、列車がいる駅区間のテキスト データだったからです。 そのために、列車ロケーション情報を路線のライン データに変換し、GIS で扱えるようにするところからはじめました。   列車ロケーション情報をライン データへ変換するベースとして、国土数値情報の鉄道データが役立ちました。 まず鉄道データを整理し、路線のネットワーク データと駅のポイント データを作成します。 また、変換した遅延路線のライン データの保存先も作成しておきます。 データ作成には ArcGIS Desktop を使用し、作成したデータはネットワークを介してアクセスできるよう ArcGIS Enterprise へ公開しました。   つづいて、列車ロケーション情報の出発駅と向かっている駅をもとに、遅延路線のライン データを作成します。 作成の流れは以下です。   1. 列車ロケーション情報の取得 列車ロケーション情報（JSON）を取得し、CSV へ書き出す 2. 遅延列車の抽出 CSV から東京メトロの路線で遅延（delay）している列車を抽出 3. 駅ポイントの取得 出発した駅（fromStation）と列車が向かっている駅（toStation）の駅名から、駅ポイント データを属性検索し、駅のポイントを取得 4. ルート検索 手順 3 で取得した駅ポイント間の最短ルートを、ネットワーク解析機能を利用して取得 5. ラインの作成 取得したルートをコピーし、ライン データとして保存     これで、遅延している列車がいる駅間の路線のライン データが作成されます。 ここまでの処理は ArcPy を使用して実装しました。   遅延情報の更新   駅間のテキスト データをもとに、ライン データを作成することで、遅延情報を GIS で扱うことができるようになりました。 次の課題は、どのように遅延情報を更新し続けるか、です。   リアルタイムに遅延情報を地図上に可視化するには、常に最新の列車ロケーション情報を取得し、遅延路線を更新し続けなければなりません。 そこで、リアルタイム性を保持するため、Esri が公開している Aggregated Live Feeds と呼ばれる仕組みを参考に、遅延路線を更新することにしました。   この仕組みは、遅延路線のライン データを配信するサービスが参照するデータベースに対して処理を行います。 データベースに格納されている既存のライン データ（前回の処理で取得した遅延路線）を削除し、新たに作成したライン データを保存します。 そのため、ArcGIS Enterprise で公開しているサービスの REST エンドポイントを変更せずに、データのみを更新することができます。   先ほどの処理に 、遅延路線を更新する、という作業を追加します。   6. データベースの更新 データベースから前回の遅延路線を削除し、今回、取得したライン データを保存   最後に、作成した ArcPy のスクリプトを ArcGIS Enterprise へ公開します。   公開されたスクリプトは Windows タスクスケジューラから実行可能です。 そこで、一連の処理の定期的な実行はタスクとして登録しました。     これで、常に最新の遅延情報が配信されるようになりました。   遅延路線の可視化   さて、いよいよ、遅延路線を地図上に可視化してみます。 可視化の部分は、ArcGIS API for JavaScript（以下、「API」）を使用して、Web アプリを作成しました。 最新の遅延情報を表示させるために、ここでも、遅延情報の更新方法が課題となりました。   どのようにするかを開発チーム内で検討した結果、タイマー処理を実装することにしました。 一定の間隔で、遅延路線を配信するサービスに対してリクエストを送り、データを取得します。そして、取得したデータをマップに再描画します。   この方法で、遅延路線を更新し、常に最新の情報を表示することができました。 しかし、再描画する際に、それまで描画されていた路線を削除し、新しく取得した路線を追加する、という処理を行っているため、更新時に一時的に遅延路線が消えてしまうという課題が残りました。   なお、ArcGIS Enterprise バージョン 10.6.1 では、WebGL を使用した、より高速で軽量な描画が実現される予定ですので、更新時の再描画もよりスムーズに実現できるのではないかと思います。   さらに、今回は使用しませんでしたが、WebSocketを活用したリアルタイム GIS ソリューションも提供されています。 ArcGIS GeoEvent Server というリアルタイム データ配信に特化したサーバーを使用することで、WebSocket を利用したストリーム サービスを公開することができます。 API は、一度ストリーム サービスを読み込むだけで、今回実装したようにサービスに対してリクエストを送信しなくても、常にサービスが配信するデータを取得することが可能となります。   さて、Web アプリでは、遅延路線のほかに、遅延予測に役立つよう、ESRIジャパン データコンテンツの気象オンラインサービス（ベータ版）を使用した降水強度予測のメッシュ表示や、Twitter API を利用した遅延に関するつぶやきの検索機能も実装しました。   API は、気象オンラインサービスのような ArcGIS サービスのほかに、Twitter API のような外部のサービスとも簡単にマッシュアップすることができ、地図に関連する様々な機能を簡単に追加することができます。     オープンデータチャレンジを通して、データの作成から変換、可視化まで、GIS の機能をフルに活用したアプリを作成することができました。 ぜひ、リアルタイム列車遅延情報マップにアクセスしてみてください！！   ※ 2018年5月15日でオープンデータチャレンジは終了しましたので、本アプリの公開も終了いたしました。アクセスいただきましてありがとうございます。   関連リンク   東京公共交通オープンデータチャレンジ：https://tokyochallenge.odpt.org/ ArcGIS Desktop：https://www.esrij.com/products/arcgis-desktop/ ArcGIS Enterprise：https://www.esrij.com/products/arcgis-enterprise/ ArcGIS API for JavaScript：https://www.esrij.com/products/arcgis-api-for-javascript/ ... View more

I created React component which shows data retrieved from DB via API (The API is not ArcGIS API for JavaScript, just for searching data) and it works fine. Then I want to replace the component as a widget on the map. I created the widget by extending widget class by following references about widget development. Then I added the component to the widget and compiled the widget. However it throw an error when I add the widget to the map. It seems that the app references React module under dojo (https://js.arcgis.com/4.6/dojo/react/). So I think I need to set some options when I compile the widget. I am new to React, TypeScript and widget development. So I probably miss something very basic, but it would be great if I get infromation about how to use React component in widget. P.S. I have already checked the React sample Esri and odoe provided, but it does not follow widget development workflow and it uses compiler library. So unfortunately it does not help. ... View more

※ 2025 年 11 月 追記：ArcGIS Maps SDK for JavaScript (旧 ArcGIS API for JavaScript) は、バージョン 4.30 より Web コンポーネントであるマップ コンポーネントを使用した開発を推奨しています。マップ コンポーネントを使用した開発方法に関しては以下の記事をご参照ください。 ArcGIS で始める Web マップ アプリ開発　地図表示編 - Esri Community はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで紹介していきます。   はじめての Web マッピングアプリケーション開発：地図表示編 はじめての Web マッピングアプリケーション開発：レイヤー表示編 はじめての Web マッピングアプリケーション開発：レイヤーの可視化編 はじめての Web マッピングアプリケーション開発：ポップアップの設定編 はじめての Web マッピングアプリケーション開発：Web マップの作成・表示編 はじめての Web マッピングアプリケーション開発：グラフィック編 はじめての Web マッピングアプリケーション開発：クエリ編 続編 はじめてのWeb マッピングアプリケーション開発：ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：印刷ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：編集ウィジェット編 続編 はじめての Web マッピングアプリケーション開発：ナビゲーション ウィジェット編 続編 はじめてのWeb マッピングアプリケーション開発：OAuth 2.0編 番外編 はじめてのWeb マッピングアプリケーション開発：多言語のべースマップ活用編 はじめてのWeb マッピングアプリケーション開発:最新化&ポップアップの設定編その2   ArcGIS API for JavaScript とは？   ArcGIS API for JavaScript は、Web ブラウザーから GIS 機能を利用するための API です。 簡単な地図を既存の Web ページに組み込んだり、地図上にさまざまな表現方法を用いて位置情報を可視化したり、検索や解析などの豊富な GIS 機能を実装したりするなど、Web マッピングアプリケーション開発をサポートします。   このシリーズ記事では、ArcGIS API for JavaScript を使用して、Web マッピングアプリケーション開発の流れをご紹介していきます。 第 1 回目となる今回は、地図を表示するところまでをご紹介します。   Web ブラウザーに地図を表示してみよう！   1. ArcGIS API for JavaScript の参照 まず、地図を表示する Web ページの HTML を作成して、以下を入力します。   Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。 JSBin を開くと左側に HTML、右側に実行結果が表示されるので、あらかじめ入力されている HTML を削除し、以下を入力してください。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Web ブラウザーに地図を表示してみよう！</title> </head> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   <head> タグ内に以下のコードを追加し、API を参照します。 <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。   <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.22/"></script>   <link> タグは、ウィジェットやコンポーネントといった UI を定義するスタイルが含まれるスタイルシートを参照します。 <script> タグは、CDN から API を読み込みます。   2. モジュールの読み込み 続いて、API からアプリで使用するモジュールを読み込みます。今回、読み込むのは以下のモジュールです。 esri/Map ：マップを作成するコードを読み込みます esri/views/MapView ：2D でマップを描画するコードを読み込みます dojo/domReady! ：作成した全体のコードを実行する前に DOM が読み込まれたことを確認します   <head> タグ内に <script> タグを追加し、読み込むモジュールを設定します。 <script> require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { // 地図作成のコード }); </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。   <script> require([ "esri/Map", "esri/views/MapView" ],(Map, MapView) => { // 地図作成のコード }); </script>   ※ API は Dojo をベースにしており（※2021年12月追記：ArcGIS API for JavaScript の近代化の取り組みの中で、バージョン 4.16 以降、Dojo に依存しなくなりました）、Dojo が取り入れているモジュール システムを活用したアプリ開発を実現しています。モジュール システムの詳細は以下の記事をご参照ください。 Dojo：きほんのき① ～モジュール システム（前編）～ Dojo：きほんのき② ～モジュール システム（後編）～   3. Map の作成 esri/Map モジュールから読み込まれた Map クラスを参照する Map を使用して、新しいマップを作成します。マップには、地図の背景に表示するベースマップを定義する basemap などのプロパティを設定できます。 require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。   require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => { const map = new Map({ basemap: "streets" }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ベースマップには、streets（道路地図）のほかに、satellite（衛星画像）、hybrid（ラベル付き衛星画像）、topo（地形図）、gray（キャンバス（ライト グレー））、dark-gray（キャンバス（ダーク グレー））などのいくつかの種類があり、地図の用途に合わせて最適なベースマップを選択します。※2021年12月追記：ArcGISブログ 廃止されるベクター ベースマップとラスター ベースマップのお知らせ でお知らせしたように、ラスターベースマップのいくつかは2021年で更新が停止される予定ですが、それの代替となる、streets-vector（道路地図）、topo-vector（地形図）、gray-vector（キャンバス（ライトグレー））、dark-gray-vector（キャンバス（ダーク グレー））などの、ベクターベースマップが用意されています。その他にも、利用可能なベースマップの詳細は、Map のbasemap プロパティをご参照ください。   4. View の作成 View は、HTML ページ内でマップを表示する DOM ノードを参照し、マップを描画します。 MapView を作成して、プロパティを設定してみましょう。 require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // View を表示する DOM ノードを参照 map: map // ステップ 3 で作成した map オブジェクトを参照 }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。   require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => { const map = new Map({ basemap: "streets" }); const view = new MapView({ container: "viewDiv", // View を表示する DOM ノードを参照 map: map // ステップ 3 で作成した map オブジェクトを参照 }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   上記のコードでは、container プロパティにマップを表示する DOM ノードの名前を設定しています（DOM ノードはステップ 5 で定義します）。map プロパティは、ステップ 3 で作成した map オブジェクトを参照します。 MapView には、このほかにも、View の表示範囲を設定する center（描画するマップの中心地点）や zoom（描画するマップのズームレベル）などのプロパティも含まれます。   これで Map と View の作成は完了です。次のステップは、地図を表示する HTML 要素の追加です。   5. 要素の定義 <body> タグを作り、View を表示する <div> 要素を入れます。 <body> <div id="viewDiv"></div> </body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   <div> は、ステップ 4 で作成した MapView の container プロパティへ渡した id とマッチする “viewDiv” という id を持っています。マップは、この DOM ノードに描画されます。   6. スタイルの設定 <head> タグ内に <style> タグを使い HTML 要素のスタイルを定義します。 ブラウザー ウィンドウいっぱいにマップを表示させるため、以下の CSS を <style> に追加します。 <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   これで、地図の作成は完了です。作成した地図を表示させてみましょう。 JSBin を使用している場合は、[Run with JS] ボタンをクリックすると、実行結果が右側に表示されます。   今回作成したサンプルは Esriジャパンの GitHub に公開しています（※2021年12月追記：”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです）。   チャレンジ：3D 地図を作成してみよう！   マップを描画する View には、2D で描画する MapView のほかに 3D で描画する SceneView が用意されており、View を切り替えることで、2D 地図と 3D 地図を簡単に変更できます。   API からマップを 3D で描画する esri/views/SceneView モジュールを読み込み、3D 地図を作成してみましょう 。 esri/views/SceneView ：3D でマップを描画するコードを読み込みます   ここまでのステップで作成したサンプルを使い、読み込むモジュールを esri/views/MapView から esri/views/SceneView に変更してみてください。   変更前 require([ // モジュールの読み込み "esri/views/MapView", ], function(/*...*/) { // 地図作成のコード }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 変更後 require([ // モジュールの読み込み "esri/views/SceneView", ], function(/*...*/) { // 地図作成のコード });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   ※2021年12月追記：2021年12月以降に試す場合は以下のコードです。   require([ // モジュールの読み込み "esri/views/SceneView", ], (/*...*/) => { // 地図作成のコード });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   View を変更することで、簡単に 3D 地図を作成できます。 さらに、同じ Map を 2D（MapView）、3D（SceneView）で描画する、ということも可能です。     このように、API では、6つのステップで簡単に地図を作成できます。さらに描画方法を切り替えることで、Map を 2D で描画するか、3D で描画するか、変更可能です。   今回作成したサンプルは以下で動作を確認できます。 2D：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/show_map/2d.html  3D：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/show_map/3d.html  ※ 2021年12月追記：2021年12月以降は、以下で動作を確認できます。 2D：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/show_map/2d_2021.html  3D：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/show_map/3d_2021.html    次回は、作成した地図に位置情報を表示する方法をご紹介します。   関連リンク   ArcGIS API for JavaScript（ArcGIS for Developers）：https://developers.arcgis.com/javascript/ ... View more

GIS では、ジオフェンスと呼ばれる仮想のエリア（ポリゴン）をマップ上に作成することで、エリアへの入出をイベントとしてキャッチすることができます。この仕組みを利用して、顧客へのマーケティングや観光客へのプロモーションなどへの利用が期待されています。 今回は、店舗の位置情報を持つサンプルデータをもとに、店舗から半径 200m のジオフェンスに入った顧客へ、店舗の情報を含んだプッシュ通知を送るアプリを作成しました。筆者は JavaScript 製品担当なので、通知を受信するクライアント側は Web アプリ、通知を送信するサーバー側は Node.js で実装しています。作成したアプリは、ESRIジャパンの GitHub にて公開しています。 プッシュ通知の流れ プッシュ通知を行うには、まず、ユーザーに通知を購読してもらいます。 購読の大まかな流れは以下です。 このあと説明しますが、Web ブラウザーのプッシュ通知には Service Worker を使用します。Service Worker は JS ファイルを登録することで、バックグラウンドで実行されます。 Service Worker を登録したら、購読先のサーバーへアプリケーション サーバー キーをリクエストします。キーを使用して、プッシュ サービス（プッシュ通知を送信するサービス）が、購読しているユーザーの判定と、購読先のサーバーが同じであることを確認します。認証には、VAPID という仕組みが使用されます。 キーの取得後、ユーザーへ、プッシュ通知の許可を確認するポップアップを表示します。通知が許可されたら、購読情報（PushSubscription オブジェクト）を生成します。 生成した購読情報はサーバーへ送られ、ユーザーへプッシュ通知を送る際に使用されます。 購読が完了したら、サーバーはユーザーへプッシュ通知を送ることが可能になります。 サーバーはプッシュ通知を、プッシュ サービスへリクエストします。リクエスト先のプッシュ サービスは、PushSubscription の endpoint に含まれています。使用されるプッシュ サービスは、ブラウザーにより異なり、設定することはできません。また、プッシュ通知は暗号化されている必要があります。 プッシュ サービスへプッシュ通知をリクエストすると、サービスはプッシュ通知をブラウザーへ送信します。 そして、プッシュ通知を受け取ったブラウザーはプッシュ イベントを実行し、プッシュ通知を表示します。 では、実際にプッシュ通知を表示してみましょう。 プッシュ通知を受信する プッシュ通知を受信し、表示する Web アプリを作成します。 1. Service Worker の登録 ブラウザーでプッシュ通知を受け取るには Service Worker という仕組みを使用します。Service Worker は、バックグラウンドで動作する JavaScript の実行環境です。Web ページを開いていなくても処理を実行することができるため、Web ページを閉じていても通知を受け取り表示することができます。 Service Worker を使用するには、JS ファイルを登録します。登録するとブラウザーは JS ファイルを Service Worker 上で動作させます。登録には、以下のコードのように、Service Worker API の register() に JS ファイルのパスを渡します。 js/main.js function initServiceWorker() {    // ......    // Service Worker を登録    navigator.serviceWorker.register("sw.js").then(function(swReg) {       // ......    }); } 2. Service Worker の実装 登録した Service Worker にプッシュ通知を表示する機能を実装します。 Service Worker には、ブラウザーがプッシュ通知をプッシュ サービスから受け取ったときに呼び出す Push イベント ハンドラーが用意されています。このイベントのコールバック関数に、通知を表示する showNotification() を設定します。第１引数に、表示するタイトル、第2引数に表示するコンテンツやアイコンなどのオプションを渡します。 また、Push のイベント オブジェクトには、プッシュ通知を送る際にサーバーが送信した情報が含まれています。ここでは、この情報をもとにタイトルとコンテンツの値を設定しています。 sw.js // プッシュ通知のイベントハンドラー self.addEventListener('push', function(e) {    // サーバーが送信した情報を取得    var json = e.data.json();    // タイトルとオプションを設定    var title = json.title;    var options = {       body: json.body,       icon: 'images/icon.png',       badge: 'images/badge.png'    };    // プッシュ通知を表示    e.waitUntil(       self.registration.showNotification(title, options)    ); }); Service Worker の設定は以上です。続いて、Web アプリでプッシュ通知を購読します。 3. プッシュ通知の購読 プッシュ通知をサーバーから受け取るには、サーバーから認証情報を取得し、購読情報を生成して送信する必要があります。 通知の購読には、ServiceWorkerRegistration.pushManager.subscribe() を使用します。 ServiceWorkerRegistration.pushManager.subscribe() には、サーバーから取得した公開鍵を渡します。サーバー側の実装はこのあと説明しますが、”api/key” へのリクエストで公開鍵を取得することができます。 購読が成功すると、PushSubscription オブジェクトが返ります。PushSubscription には、プッシュ サービスのエンドポイントや認証情報など、通知に必要な情報が含まれており、サーバーは PushSubscription を使用してプッシュ サービスへ通知をリクエストします。 js/main.js // 通知を購読する function subscribeUser() {    // サーバーから公開鍵を取得    fetch("/api/key").then(function(res) {       if (res.ok) {          return res.text();       }    }).then(function(applicationServerPublicKey) {       // 公開鍵をエンコーディング       var applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);       // 公開鍵を渡して、プッシュ通知を購読する       swRegistration.pushManager.subscribe({          userVisibleOnly: true,          applicationServerKey: applicationServerKey       }).then(function(subscription) {          // ......       });    }); } 4. プッシュ通知のリクエスト プッシュ通知をリクエストする処理です。 実際にプッシュ サービスへ通知の送信をリクエストするのはサーバーですが、クライアント側で、サーバーへプッシュ サービスへリクエストを送るリクエストを投げます。 param には、サーバーがプッシュ サービスへ通知をリクエストするときに使用する PushSubscription と通知に表示するタイトルとコンテンツを渡します。 js/main.js // 通知をリクエスト function updateSubscriptionOnServer(param) {    fetch("/api/notification", {       method: "POST",       headers: {          "Content-Type": "application/json"       },       body: JSON.stringify(param)    }).then(function(response) {      // ......    }); } 5. 位置情報をトリガーにプッシュ通知をリクエスト やっと GIS の出番です。 あらかじめ作成しておいた店舗から 200m のバッファー（ジオフェンス）に対してクエリを行います。現在地の情報をもとにバッファー内に入ったときに、関連する店舗の情報を通知します。 では、コードを見てみましょう。 現在地の取得は Geolocation API の watchPosition() を使用します。現在地が更新されたらクエリの処理を記述した initQuery() を実行します。 js/main.js // 現在地の監視 function initWatchPosition() {    // 現在地を監視し、現在地が更新されたらクエリを実行    watchId = navigator.geolocation.watchPosition(function(position) {       initQuery(position);    }); } クエリの処理を行います。 バッファー（ジオフェンス）にポイント（現在地）が含まれているかどうかをクエリするため、パラメーターに以下の3つを設定しています。 geometry：クエリ対象のジオメトリ。watchPosition() で取得した現在地をもとに作成したポイントを渡します。 outFields：クエリの結果として含めるフィールド。プッシュ通知に表示するため、店舗名とメッセージのフィールドを指定します。 spatialRelationship： geometry に渡したジオメトリ情報との空間リレーションシップ。今回は、geometry に渡した現在地のポイントとバッファーが交差するかどうかを判定するため、”intersects” を使用します。 クエリを実行した結果、ポイントと交差するバッファーが返った場合に、手順4 で説明したプッシュ通知をリクエストする updateSubscriptionOnServer() を呼び出します。 js/main.js function initQuery(position) {    // 現在地の緯度経度からポイントを作成    var point = new Point({       longitude: position.coords.longitude,       latitude: position.coords.latitude    });    // クエリ パラメーターを作成    var query = new Query();    query.geometry = point;    query.outFields = ["OBJECTID", "SHOP_NAME", "MESSAGE"];    query.spatialRelationship = "intersects";    // あらかじめ作成しておいた店舗から 200m のバッファー（ジオフェンス）に対してクエリを実行    targetLyr.queryFeatures(query).then(function(result){       // バッファー内にポイント（現在地）が含まれる場合       if (result.features.length > 0) {          var attr = result.features[0].attributes;          var objId = attr.OBJECTID;          // バッファー内のポイントが同じではないとき、プッシュ通知をリクエスト          if (objId !== currentGeofence) {             currentGeofence = objId;             swRegistration.pushManager.getSubscription().then(function(subscription) {             var param = {                subscription: subscription,                message: {                   title: "いろは堂 " + attr.SHOP_NAME,                   body: attr.MESSAGE                }             }             updateSubscriptionOnServer(param);          });       }    }    // ...... }); } Web アプリ側の実装は以上です。次は、プッシュ サーバーへプッシュ通知をリクエストするサーバー側の実装を行います。 プッシュ通知を送信する Web プッシュは、送信する際にメッセージを暗号化する必要があります。今回は、暗号化を行ってくれる web-push-libs を使用しました。 1. 鍵の作成 web-push モジュールを読み込み、generateVAPIDKeys() を使って、認証に使用する VAPID の公開鍵と秘密鍵を生成します。 生成した鍵をモジュールに設定します。設定時には、公開鍵と秘密鍵の他に、送信者の情報としてプッシュ サービスのリクエストに含めるためメールアドレスが必要です。 server.js // web-push-libs の読み込み const webpush = require('web-push'); // VAPID の生成 const vapidKeys = webpush.generateVAPIDKeys(); // VAPID の設定 webpush.setVapidDetails(    'mailto:[email protected]',    vapidKeys.publicKey,    vapidKeys.privateKey ); 2. 公開鍵の送信 公開鍵をクライアントへ送信します。 今回は、クライアントから送られてきたリクエストをリクエスト先の URL に応じて処理を分けるために Express を使用しました。ここでは、クライアントから ‘api/key’ へリクエストを送られたときに、公開鍵を返します。 「プッシュ通知を受信する」の手順３で、この URL へリクエストが送られています。 server.js // クライアントへ公開鍵を返す app.get('/api/key', (req, res) => {    res.send(vapidKeys.publicKey); }); 3. プッシュ通知の送信 いよいよプッシュ通知をプッシュ サービスへリクエストします。 PushSubscription、コンテンツを定義したペイロード、そして鍵を含むオプションを sendNotification() に渡すと、プッシュ サービスへ通知がリクエストされます。 リクエストが成功し、プッシュ サービスからプッシュ通知が送信されると、通知を受け取ったブラウザーは Service Worker の push イベントを実行し、通知が表示されます。 server.js // プッシュ通知をプッシュ サーバーへ送信 app.post('/api/notification', (req, res) => {    const pushSubscription = req.body.subscription;    const payload = JSON.stringify(req.body.message);    const options = {       vapidDetails: {          subject: 'http://localhost:3000/',          publicKey: vapidKeys.publicKey,          privateKey: vapidKeys.privateKey       }    }    webpush.sendNotification(       pushSubscription,       payload,       options    ); }); 動作の確認 それでは、サーバーを立ち上げ、Web ページを開いてみましょう。 GitHub のサンプルをローカル環境へクローンまたはダウンロードします。 コマンドプロンプトを起動し、“npm install” を入力し、サンプルで使用しているモジュールをインストールししたら、“npm start” を入力し、Web ブラウザーから http://localhost:3000 へアクセスしてみてください。 ※ IE11、Edge および Safari は Service Worker をサポートしていません。Chrome または Firefox をお試しください。 [プッシュ通知を有効化] をクリックすると、「プッシュ通知を受信する」の手順３で説明した、通知を購読する subscribeUser() が実行され、通知の表示の許可を求めるポップアップが表示されます。通知の表示を許可すると、updateSubscriptionOnServer() が実行され、通知が表示されます。 また、現在地を取得する initWatchPosition() が実行され、現在地が更新されるたびに、initQuery() が呼び出され、現在地付近の店舗がないかクエリを行います。 もう一つ、[シミュレーションを実行] 機能を追加しています。これは、Mock-geolocation という位置情報を疑似するライブラリを使用して、現在地を東京タワー周辺に疑似しています。 東京タワー周辺には３つの店舗があるので、ジオフェンスに入るとどのように通知が届くのかをみることができます。 プッシュ通知は、Service Worker を使用するので、アプリを開いていなくても使用できますが、現在地の取得はバックグラウンドで実行できないので、今回は、Service Worker のメリットを実感することができませんでした。 サーバー側で PushSubscription を管理して、ユーザー別に通知内容を変えるなど、いろいろな使い方ができるのではないかと思います。 サンプルを参考に、ぜひお試しください。 参考リンク ウェブアプリへのプッシュ通知の追加（Google）：https://developers.google.com/web/fundamentals/codelabs/push-notifications/ Web Push Notifications: Timely, Relevant, and Precise（Google）：https://developers.google.com/web/fundamentals/push-notifications/ Service Workers（Google）：https://developers.google.com/web/fundamentals/primers/service-workers/ 超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート（HTML5 Experts.jp）：https://html5experts.jp/horo/21360/ ChromeでW3C Push APIを使ってみた：https://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d [改訂版] Web Pushでブラウザにプッシュ通知を送ってみる：https://qiita.com/tomoyukilabs/items/2ae4a0f708a1af75f13e GCMの登録が不要になったChromeのWeb Pushを試してみる：https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762 Web PushをFCMとVAPIDで認証してブラウザにプッシュ通知を送る（平日インプット週末アウトプットぶろぐ）：http://blog.soushi.me/entry/2017/05/18/124558 WEB PUSH 通知を実装してみた（rilakkuma3xjapanのブログ）：https://weblike-curtaincall.ssl-lolipop.jp/blog/?p=1910 Service Workerの基本とそれを使ってできること：https://qiita.com/y_fujieda/items/f9e765ac9d89ba241154 ... View more