Google Maps JavaScript API から ArcGIS API for JavaScript への移行 : シェイプの追加

1 Kudo

※ この記事は、米国 Esri 社のブログ記事「Migrating Web Apps from Google to ArcGIS: Adding a Shape」を翻訳したものです。

本記事は、Google Maps JavaScript API から ArcGIS API for JavaScript（以下、JavaScript API）への移行に関連する基本的なトピックを紹介するブログシリーズの第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 マッピングアプリケーション開発」と題したシリーズ記事を連載しています。こちらもぜひご参照ください。

Google Maps JavaScript API から ArcGIS API for JavaScript への移行 : シェイプ の追加