ArcGIS API for JavaScript開發初探——HelloMap

時間 2019-11-12

標籤 arcgis api javascript 開發初探 hellomap 欄目 JavaScript 简体版

原文原文鏈接

一、前言

在開始ArcGIS API for JavaScript開發以前咱們須要瞭解一些基本的知識：javascript

一、開發工具選什麼？css

前端技術的開發工具選擇是一個仁者見仁智者見智的問題，有人喜歡Hbuilder，有人喜歡Sublime Text，notepad++，也有人喜歡直接在寫字板寫代碼。還有不少功能更全面的集成開發環境，全憑我的喜愛，這裏筆者推薦使用Hbuilder，代碼提示很給力，熟悉了快捷鍵後寫代碼也比較效率。html

二、AMD規範前端

本教程展現瞭如何使用ArcGIS API的模塊，其中JavaScript使用異步模塊定義(AMD)。AMD規範代碼和原始代碼之間的主要區別是如何加載模塊(require() vs. dojo.require()) ,以及類的模塊引用(全局變量用於原始代碼,而AMD樣式代碼使用局部變量)。具體區別可參照參考連接中的教程原始英文版本。
java

三、Dojo框架git

ArcGIS API for JavaScript 基於Dojo框架搭建，因此學習 ArcGIS JavaScript API 須要對Dojo框架有必定的瞭解。
github

二、創建第一個應用程序HelloWord

2.1 、建立一個簡單的HTML文檔api

首先咱們先建立一個簡單的Html文檔，具體事例以下圖：瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HelloWord</title>
    </head>
    <body>
    </body>
</html>

2.二、引用的ArcGIS API JavaScriptapp

要開始使用ArcGIS API爲JavaScript工做，添加下面的腳本和連接到<head>標籤中：

<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<script src="http://js.arcgis.com/3.12/"></script>

script標籤加載的ArcGIS API爲JavaScript庫。當新的JavaScript API的版本發佈時，可更到新的版本號以匹配新版本的API。

esri.css樣式表中包含特定於ESRI的部件和組件的樣式。有關這個樣式表的詳細信息，請參閱上的幫助主題所需的CSS。

對於各類不一樣的主題樣式表的URL以下：

http://js.arcgis.com/3.12/dijit/themes/claro/claro.css
http://js.arcgis.com/3.12/dijit/themes/tundra/tundra.css
http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css
http://js.arcgis.com/3.12/dijit/themes/soria/soria.css

2.三、加載模塊

添加<SCRIPT>標籤並從API加載指定的模塊。JavaScript代碼將直接在其內部增長。

<script>
    require(["esri/map"], function(Map) { ... });
</script>

2.四、確保DOM是可用

使用dojo/ domready！確保執行任何代碼以前DOM是可用的。一旦DOM是可用的，則該函數傳遞給 require()將運行。該函數的代碼會建立地圖並添加底圖。

 <script>
    require(["esri/map", "dojo/domReady!"], function(Map) { 
      // code to create the map and add a basemap will go here 
    });
  </script>

2.五、建立地圖

經過加載esri/map模塊的Map類，可用建立一個新的地圖。「mapDiv」字符做爲包含了地圖的div元素的id號被傳給Map。並指定其餘地圖的屬性，如底圖和起始中心點和縮放級別，在地圖初始化的構造函數中。

var map ; 
  require ([ "esri/map" ,  "dojo/domReady!" ], function ( Map )  {  
     map =  new  Map ( "mapDiv" ,  { 
      center :  [- 56.049 ,  38.485 ], 
      zoom :  3 , 
      basemap :  "streets" 
    }); 
  });

其餘底圖選項是："satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"。可經過沙箱修改底圖來替換不一樣的底圖。查看附加的地圖選項來查看地圖類的更多細節。

2.六、定義頁面內容

如今JavaScript已經在某一位置建立了地圖，下一步是添加相關的HTML。此示例中，HTML頁面是很是簡單的：主體標記，它定義了瀏覽器中可見的內容，而且單個div元素將在被建立的地圖主體中。

<body class="claro">
    <div id="mapDiv"></div>
</body>

2.七、頁面設計

在本教程中，地圖須要填充瀏覽器窗口。爲了達到這一效果，須要早頁面<head>標記中添加如下的CSS ：

 <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;    }
  </style>

2.八、完整頁面代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HelloWord</title>
        <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
        <script src="http://js.arcgis.com/3.12/"></script>
        <script>
              var map ; 
              require ([ "esri/map" ,  "dojo/domReady!" ], function ( Map )  {  
                 map =  new  Map ( "mapDiv" ,  { 
                  center :  [- 56.049 ,  38.485 ], 
                  zoom :  3 , 
                  basemap :  "streets" 
                }); 
              });
        </script>
        <style>
            html, body, #mapDiv {
              padding: 0;
              margin: 0;
              height: 100%;    }
        </style>  
    </head>
    <body>
        <div id="mapDiv"></div>
    </body>
</html>