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

Document created by ayako_suzukiesrij-esridist Employee on Sep 9, 2018
Version 1Show Document
  • View in full screen mode

※ この記事は、米国 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 では、ポリラインをマップへ追加するために、一連のライン セグメントまたはパスを定義する2つ以上の緯度経度の座標の配列を作成します。各座標はリストされた順で渡されます。最後に作成されたポリラインをマップに追加します。

 

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 の学習と効率的なアプリ開発のためのさまざまなリソースが提供されています。

 

ArcGIS 開発者コミュニティでは、ArcGIS API for JavaScript を使用して、はじめて地図アプリ開発を行う方へ「はじめての Web マッピングアプリケーション開発」と題したシリーズ記事を連載しています。こちらもぜひご参照ください。

1 person found this helpful

Attachments

    Outcomes