Community

ArcGIS API for JavaScript 4.x の Tasks 階層にあるモジュールのサポート終了に関するお知らせ

1550
0
05-18-2022 09:38 PM
Labels (1)
Labels:

ArcGIS API for JavaScript 4.x の Tasks 階層にあるモジュールのサポート終了に関するお知らせ

ArcGIS API for JavaScript バージョン 4.24 へのアップデートにて、バージョン 4.20 で非推奨となっていた Tasks 階層にあるモジュールのサポートを終了することが予定されています。本記事では、Tasks 階層にあるモジュールのサポート終了に関する内容について、米国 Esri 社がアップしている「Rest is up to the task」の記事を翻訳してご紹介いたします。

 

ArcGIS API for JavaScript バージョン 4.20 では、Tasks を非推奨とし、esri/rest フォルダ内にあるよりモジュール性の高いクラスやオブジェクトを使用するようにしました。ArcGIS API for JavaScript のバージョン 4.24 (2022 年夏頃リリース) で、Tasks のサポートが廃止される予定です。

RyukiHIRAMATSU_1-1652933310141.png

 

 esri/rest を採用することにより、よりモジュール化されたアプリの設計にコードを組み込むことが容易になり、また不要な依存関係を減らすことができます（必要なものだけをインポートします）。新しい rest モジュールは関数で、コンストラクタを必要としないので、すぐにそのメソッドを使うことができます。

また、よりモジュール化された設計のため、モジュール全体をインポートするのではなく、rest モジュールの1つまたは複数のメソッドだけをインポートすることができます。しかし、この説明には1つだけ注意点があります。それについては、いくつかのコード例を見てから説明します。

では、いくつかの例を見てみましょう。まず、これは Task を使ってクエリを処理する方法です。

 

// 非推奨のQueryTaskを使用した例
require([
  "esri/tasks/QueryTask", "esri/tasks/support/Query", ...
], function(QueryTask, Query, ...){

  // 問い合わせ対象のレイヤーへの URL
  let queryUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";

  // 上記の URLで新しい QueryTask を作成
  let queryTask = new QueryTask({
    url: queryUrl
  });

  // Queryオブジェクトの作成
  let queryObject = new Query();
  queryObject.where = "STATE_NAME = 'Washington'";
  queryObject.outSpatialReference = { wkid:4269 };
  queryObject.returnGeometry = true;
  queryObject.outFields = [ "HOUSEHOLDS" ];

  // 正常終了すると、クエリを満たすフィーチャとグラフィックを返す
  queryTask.execute(queryObject).then(function(results){
    console.log(results.features);
  });
});

 

 

これは上記と同じ例ですが、esri/rest/queryを使用しています。

 

 

// 同じ例で、"esri/rest/query" を使用
require([
  "esri/rest/query", "esri/rest/support/Query", ...
], function(query, Query, ... ) {

  // 問い合わせ対象のレイヤーへの URL
  let queryUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";

  // Query オブジェクトの作成
  let queryObject = new Query();
  queryObject.where = "STATE_NAME = 'Washington'";
  queryObject.outSpatialReference = { wkid:4269 };
  queryObject.returnGeometry = true;
  queryObject.outFields = [ "HOUSEHOLDS" ];

  //正常終了すると、クエリを満たすフィーチャとグラフィックを返す
  query.executeQueryJSON(queryUrl, queryObject).then(function(results){
    console.log(results.features);
  });
});

 

 

コードがとても類似していることにお気づきでしょうか？この場合（実際にはほとんどすべての場合）、Tasks から rest への移行は単純明快で、ありがたいことに、よく文書化されています。ここでは、require 文のモジュール名を変更し、QueryTask コンストラクタの URL を executeQueryJSON() メソッドのパラメータに移動させる必要がありました。

また、上記と同じ例ですが、ES モジュールの @arcgis/coreを使用して @arcgis/core/rest/query/executeQueryJSON をインポートし、残りの esri/rest/query メソッドをロードすることでリソースを浪費しないようにすることも可能です。

 

 

// 同じ例で、ESモジュールで目的のクエリメソッドのみをロード
import { executeQueryJSON } from "@arcgis/core/rest/query";
import Query from "@arcgis/core/rest/support/Query";

// 上記の URLで新しい QueryTask を作成します。
let queryUrl =
  "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";

// Queryオブジェクトの作成
let queryObject = new Query({
    where: "STATE_NAME = 'Washington'",
    outSpatialReference: { wkid: 4269 },
    returnGeometry: true,
    outFields: ["HOUSEHOLDS"]
});

//正常終了すると、クエリを満たすフィーチャとグラフィックを返す。
executeQueryJSON(queryUrl, queryObject).then((results) => {
  console.log(results.features);
});

 

 

コードがとても類似していることにお気づきでしょうか？この場合（実際にはほとんどすべての場合）、Tasks から rest への移行は単純明快で、ありがたいことに、よく文書化されています。ここでは、require 文のモジュール名を変更し、QueryTask コンストラクタの URL を executeQueryJSON() メソッドのパラメータに移動させる必要がありました。

また、上記と同じ例ですが、ES モジュールの @arcgis/coreを使用して @arcgis/core/rest/query/executeQueryJSON をインポートし、残りの esri/rest/query メソッドをロードすることでリソースを浪費しないようにすることも可能です。

 

 

// 同じ例で、ESモジュールで目的のクエリメソッドのみをロード
import { executeQueryJSON } from "@arcgis/core/rest/query";
import Query from "@arcgis/core/rest/support/Query";

// 上記の URLで新しい QueryTask を作成します。
let queryUrl =
  "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";

// Queryオブジェクトの作成
let queryObject = new Query({
    where: "STATE_NAME = 'Washington'",
    outSpatialReference: { wkid: 4269 },
    returnGeometry: true,
    outFields: ["HOUSEHOLDS"]
});

//正常終了すると、クエリを満たすフィーチャとグラフィックを返す。
executeQueryJSON(queryUrl, queryObject).then((results) => {
  console.log(results.features);
});

 

 

こちらのコードもとても類似していることにお気づきでしょうか？主な違いは、このアプリでは他の6つのクエリ メソッドのロードを回避し、ロード時間と消費するリソースを削減している点です。

しかし、前のコードスニペットのように AMD を使用して CDN から API を消費する場合、同じ利点を得るには残りのモジュールが必要です。

また、Query モジュールを直接使うよりも、レイヤーの Qurery メソッドを使った方が良いということも覚えておいてください。これには queryFeatures や queryRelatedFeatures といったメソッドが含まれます。これらの Query メソッドはバックサービスの機能を考慮しているのでその必要がありません。

最後に、この変更について注意すべき点は、バージョン4.21で Portal Helper メソッドを非推奨とし、4.24でこれら5つの Task ベースの関数も削除することです。

代わりに、Portal.helperServices のURLをそれぞれのrestモジュールと一緒に使用することをお勧めします。esri/rest/printをhelperServicesで使用する例を見てみましょう。

 

 

// esri/rest/print" と helperServices の組み合わせの例
require([
 "esri/portal/Portal",
 "esri/rest/print",
 "esri/rest/support/PrintTemplate",
 "esri/rest/support/PrintParameters",
 ...
], function(Portal, print, PrintTemplate, PrintParameters, ... ) {

  // 関連するURLを持つ新しい Portal オブジェクトを作成
  const portal = new Portal({
     url: "YOUR_PORTAL_URL"
  });

  const template = new PrintTemplate({
    format: "pdf",
    exportOptions: {
      dpi: 12
    },
    layout: "a4-portrait",
    layoutOptions: {
      titleText: "Gillette Stadium",
      authorText: "Thomas B."
    }
  });

  const params = new PrintParameters({
    view: view,
    template: template
  });

  // Portalインスタンスのロード
  portal.load().then(function() {
    // すべてのヘルパーサービスの URL を表示する
    console.log("Show helperServices URLs: ", portal.helperServices);
    //Portal インスタンスからhelperServicesにアクセスし、目的の印刷 URLを取得
    const printURL = portal.helperServices.printTask.url;
    // 印刷を行うためにhelperServicesを使用
    print.execute(printURL, params).then(printResult).catch(printError);
  }

  function printResult(result) {
    console.log(result.url);
    window.open(result.url);
  }

  function printError(err) {
    console.log("Something broke: ", err);
  }
});

 

 

上記のコードスニペットから、一度ヘルパーサービスのURLを取得すれば、printの使用は簡単であることがわかります。もし、ポータルから利用できるサービスのURLがわからない場合、コンソールに helperServices を表示することで、どのようなオプションが利用できるかを簡単に確認することができます。

要約

Tasks モジュールは 4.20 で非推奨となり 4.24 で廃止となります。早い段階での rest モジュールへの移行を推奨します。

 

参考

  •   ESRIジャパン Web サイト

ArcGIS API for JavaScript

  •   Esri 社（米国）Web サイト

ArcGIS API for JavaScript

Labels (1)
Labels:
0 Kudos
Version history
Last update:
‎05-18-2022 09:41 PM
Updated by:
Esri Contributor
Contributors