IWEBノート - 基本的なウェブマッピングアプリの説明

RudyProsser

<\/HEAD>

ArcGIS API for JavaScriptを使用したウェブ開発入門（IWEB）インストラクター主導コースの学習補助資料です。Introduction to Web Development Using ArcGIS API for JavaScript<\/A>（IWEB）インストラクター主導コースの学習補助資料です。<\/P>

<\/P>

追加情報については

IWEB Notes - Basic web page described<\/A>をご覧ください。<\/P>

<\/P>

一般的な参考資料:<\/H3>ArcGIS API for JavaScript<\/A><\/LI>Dojo Toolkit documentation<\/A><\/LI>Mozilla Developer Network (MDN) > Web technology for developers<\/A><\/LI>w3schools.com<\/A><\/LI><\/UL>

<\/P>

基本的なウェブマッピングアプリケーション<\/H2>参照: Get started with MapView - Create a 2D map 
<\/A><\/P>

<\/P>

<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN>DOCTYPE html<SPAN class="operator token">><\/SPAN>
<SPAN class="operator token"><<\/SPAN>html<SPAN class="operator token">><\/SPAN>
&nbsp; <SPAN class="operator token"><<\/SPAN>head<SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>meta charset<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"utf-8"<\/SPAN><SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>meta name<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"viewport"<\/SPAN> content<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"<\/SPAN><SPAN class="operator token">><\/SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>title<SPAN class="operator token">><\/SPAN>MapViewの使い方 - 2Dマップの作成 - 4.2<SPAN class="operator token"><<\/SPAN><SPAN class="operator token">\/<\/SPAN>title<SPAN class="operator token">><\/SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN><SPAN class="operator token">!<\/SPAN>-- スタイルシートの読み込み --<SPAN class="operator token">><\/SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><<\/SPAN>link rel<SPAN class="operator token">=<\/SPAN><SPAN class="string token">"stylesheet"<\/SPAN> 

href<SPAN class="operator token">=<\/SPAN><SPAN class="string token"><SPAN>"<\/><A class="jive-link-external-small" href="https:\/\/community.esri.com\/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.2%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank">https:\/\/js.arcgis.com\/4.2\/dijit/themes/claro/claro.css<\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/>"</A></Span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Map,
       MapView
     ) { //TOP of REQUIRE

       // マップを作成する
       var map = new Map({
           basemap: "streets"
       });

       // 2Dビューを作成する
       var view = new MapView({
           container: "viewDiv",
           map: map,
           zoom: 4,
           center: [15, 65]
       });

     }); // BOTTOM of REQUIRE
   <</span>/script>

  <</span>/head>
  <</span>body class="claro">

   <</span>div id="viewDiv"><</span>/div>

  <</span>/body>
<</span>/html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</ span >< span >< < EMOJI_23 > > </ span >< span >< < EMOJI_24 > > </ span >< span >< < EMOJI_25 > > </ span >< span >< < EMOJI_26 > > </ span >< span >< < EMOJI_27 > > </ span >< span >< < EMOJI_28 > > </ span >< span >< < EMOJI_29 > > </ span >< span >< < EMOJI_30 > > </ span >< span >< < EMOJI_31 > > </ span >< span >< < EMOJI_32 > > </ span >< span >< < EMOJI_33 > > </ span >< span >< < EMOJI_34 > > </ span >< span >< < EMOJI_35 > > </ span >< span >< < EMOJI_36 > > </ span >< span >< < EMOJI_37 > > </ span >< span >< < EMOJI_38 > > </ span >< span >< < EMOJI_39 > > </ span >< span >< < EMOJI_40 > > </ span >< span >< < EMOJI_41 > > </ span >< span >< < EMOJI_42 > > </ span >< span >< < EMOJI_43 > > </ span >< span >< < EMOJI_44 > > </ span >< span >< < EMOJI_45 > > </ span >< span >< < EMOJI_46 > > </ span >< span >< < EMOJI_47 > > </ span >< span >< < EMOJI_48 > > </ span >< span >< < EMOJI_49 > > </ span >< span >< < EMOJI_50 > > </ span >< span >< < EMOJI_51 > > </ span >< span >< < EMOJI_52 > > </ span >< span >< < EMOJI_53 > > </ span >< span >< < EMOJI_54 > > </ span >< span >< < EMOJI_55 > > </ span >< span >< < EMOJI_56 > > </ span >< span >< < EMOJI_57 > > </ span >< span >< < EMOJI_58 > > </ span >< span >< < EMOJI_59 > >>

<link rel = "stylesheet" href = "& https://js.arcgis.com/4.3/esri/css/main.css</A>">

JavaScript APIを使用してWebマッピングアプリケーションを構築するために必要な2つのリソースのうちの最初のものです。<main.css>
 

<strong>参考文献:</strong>

• >ガイド > <a href = "https://developers.arcgis.com/javascript/latest/guide/get-api/index.html" rel = "nofollow noopener noreferrer" target = " _blank " >APIを取得する</a>
</ul>
 
&,  
  body&,
  #viewDiv <{>
    height&:> <script src="https://js.arcgis.com/4.3/"></script>JavaScript APIを使用してWebマッピングアプリケーションを構築するために必要な2つのリソースのうちの2番目。この行はJavaScript APIを読み込みます。参考文献:
• ガイド > APIを取得する
<script> require( [...], function(...){...} );</script>require文はアプリケーションで使用されるJavaScript APIモジュールを読み込みます。require文は3つの部分で構成されています:
• アプリケーションで使用されるモジュールの配列。モジュールは文字列として参照され、それぞれの文字列がモジュールのパスと名前を提供します。
• パラメータがモジュールのリストに対応するエイリアスのリストである匿名関数。
• アプリケーションコード。これはJavaScript APIコードです。
各モジュールが読み込まれると、実行され、その結果のオブジェクトが匿名関数のパラメータリストで指定されたエイリアスに割り当てられます。順序が重要です。モジュールとエイリアスは同じ順序でなければならず、そうでないとアプリケーションは異常な動作をします。以下の例では、「esri/Map」モジュールが読み込まれ、実行され、「Map」というエイリアスに割り当てられ、このエイリアスは匿名関数のコードブロック内でマップのインスタンスを作成するために使用されます。（Sandboxでコードを開く）<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/domReady!"</SPAN>
&nbsp; <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp; Map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; MapView
&nbsp; <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// REQUIREのトップ</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="comment token">/*
&nbsp;&nbsp;&nbsp;&nbsp; *
&nbsp;&nbsp;&nbsp;&nbsp; * アプリケーションコード
&nbsp;&nbsp;&nbsp;&nbsp; *
&nbsp;&nbsp;&nbsp;&nbsp; */</SPAN>

&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// REQUIREのボトム</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</Span<span>>‍</Spanspan>>‍</Spanspan>>‍</Spanspan></span>ヒント: 閉じ中括弧-閉じ丸括弧 ( }); ) をマークするコメントを追加してください。コードブロックの最後に複数の閉じ中括弧-閉じ丸括弧ペアがあることは珍しくありません。どれがどれか分からなくなったり、数が少なすぎたり多すぎたりすることは一般的なコーディングエラーであり、コメントを追加することで簡単に解決できます。参考文献:Dojo Toolkit > チュートリアル > Hello Dojo!Dojo Toolkit > チュートリアル > Modern Dojo"dojo/domReady!"domReadyはローダープラグイン（感嘆符で示される）です。その目的は、ドキュメントオブジェクトモデルがメモリ上に構築されるまでrequire文の匿名関数の実行をブロックすることです。参考文献:
• Dojo Toolkit > ドキュメント > dojo/domReady!