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>

三、参考连接

https://developers.arcgis.com/javascript/jshelp/intro_firstmap_amd.html

https://developers.arcgis.com/javascript/jshelp/intro_firstmap.html