ArcGIS API for JavaScript(1)-简介与基础Web地图搭建(附源码)

1.简介

ArcGIS API for JavaScript (JavaScript API)是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的最新版本是Version 3.17。通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源嵌入到Web应用中。ArcGIS API for JavaScript是基于Dojo框架的,使用了大量的Dojo技术,因此要想熟练掌握API用法,先要对Dojo框架有个深入的了解!Dojo与我们常使用的Jquery都是封装好的JavaScript库,不同点在于Dojo属于重量级开发框架,由框架核心(dojo)、基本控件库(dijit)、扩展包(dojox)组成的,三部分都是由dojo官方提供。而jQuery属于轻量级框架,本身仅包含框架核心。简单来说Dojo更像一个类库,不同功能封装到不同模块形成一个独立的js文件,如果使用该功能再进行引入。

2.API和SDK获取与本地化部署

ArcGIS API for JavaScript 提供在线版API,但是由于网络被墙的原因,访问速度不稳定。所以我们对.API(开发包)和SDK(实例)进行本地化部署。建议进行本地化部署。ArcGIS JavaScript API可以从Esri官网获取,包含API和SDK(SDK含有API的帮助以及示例)。获取API和SDK,需要先注册一个Esri全球账户。这里我将我在网上找了一个各个API版本合集,提供给大家下载。百度网盘下载地址:http://pan.baidu.com/s/1nuj0jix
以IIS本地化部署为例(以arcgisjs3.16为例,3.17版本前两天发布与3.16变化不大)

在API文件夹 arcgis_js_api\library\3.16\install_win.html中有官方的部署文档,过程如下

1.复制 \arcgis_js_api\library 所有文件夹到你的Web server上,例如复制到默认网站下,C:\Inetpub\wwwroot\arcgis_js_api\library
2.本地化配置:

  • 打开C:\Inetpub\wwwroot\arcgis_js_api\library\3.16\3.16\init.js 查找 '[HOSTNAME_AND_PATH_TO_JSAPI]', 替换为"<myserver>/arcgis_js_api/library/3.16/3.16/",例如"127.0.0.1/arcgis_js_api/library/3.16/3.16"
  • 打开C:\Inetpub\wwwroot\arcgis_js_api\library\3.16\3.16\dojo\dojo.js 查找'[HOSTNAME_AND_PATH_TO_JSAPI]', 替换为 "<myserver>/arcgis_js_api/library/3.16/3.16/"例如"127.0.0.1/arcgis_js_api/library/3.16/3.16"

其他部署方案请参考install_win.html中官方的部署文档。

3.ArcGIS JavaScript API——地图初始化

a.需要在页面中引入基础类库和样式

<link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />

<script type="text/javascript" src="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/init.js" ></script>

如果直接使用在线API可将http://127.0.0.1/arcgis_js_api/library/3.16改为https://js.arcgis.com/为了大家测试方便,源码中使用在线API

b.定义地图容器

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

c.引入基础类包,进行地图初始化

正如简介里提到的Dojo是基于模块化的。简单的初始化地图使用到“esri/map”和"dojo/domReady!"在JS脚本中引入

require(["esri/map", "dojo/domReady!"], function(Map) {

//初始化<div id="map" ></div>的map容器
  var map = new Map("map", {
    center: [-118, 34.5],
    zoom: 8,
    basemap: "topo"
  });
});

完整代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>第一个地图应用</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
    <style>
           html, body ,#map{ height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
<script type="text/javascript" src="https://js.arcgis.com//3.16/init.js" ></script>
    <script>
        require(["esri/map", "dojo/domReady!"], function (Map) {
            //初始化<div id="map" ></div>的map容器
            var map = new Map("map", {
                center: [-118, 34.5],
                zoom: 8,
                basemap: "topo"
            });
        });


    </script>
</head>
<body class="claro">
      <div id="map" >
      </div>
  </body>
</html>

 

效果如下图: