一、认识ArcGIS API for JavaScript
ArcGIS API for JavaScript是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。
通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。
二、部署ArcGIS API for JavaScript的开发环境
一般可以去官网下载离线资源,通过iis或者tomcat在本地进行离线部署,先比与访问在线资源的方式,速度上得到了提示,我这里先暂时跳过这个步骤,后续在部署本地环境
三、第一个hello world 案例
先通过一个最简单的hello world 来认识下ArcGIS API for JS
ESRI提供了在线的ArcGIS API for JavaScript,我们可以直接引入即可,无须下载按照。
1、引入文件css和js
<!--esri 提供的样式表,主要用于ESRI童工的小部件与组件(例如地图、信息框等)-->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<!--Dojo提供的样式表,Dojo提供了4组样式,分别是claro、tundra、soria、nihilo每种是一组定义用户界面的字体、颜色与大小等设置 -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css">
<!--引入ArcGIS API for JavaScript-->
<script src="http://js.arcgis.com/3.9/"></script>
dojo小部件的显示情况:
https://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
2、新增一个地图div容器
在下增加一个
元素,用于显示地图。
<div id="mapDiv"></div>
同时还可以通过控制地图div元素来达到控制地图展示效果
<!-- 地图铺满整个浏览器窗口 -->
<style>
html,body,#mapDiv
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
3、加载地图模块
<!-- 加载地图模块并确保DOM已经引用-->
<script>
require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],
function(Map,ArcGISTiledMapServiceLayer){
//以下是创建地图与加入地图的代码
//使用Map类(加载子esri/map模块)来创建一个新的地图
var map = new Map("mapDiv");
//指定一个地图服务的URL
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
//根据地图服务的URL创建一个地图切片图层
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});
//将创建好的地图切片图层加入到地图中
map.addLayer(agoLayer);
});
</script>
require:Dojo提供的全局require函数,用于加载
ArcGIS API for JS 资源。require函数具有两个参数,第一个参数是依赖项,第二个参数是回调函数。
其中第一个参数分为两类,一类是依赖类,一类是插件,dojo/domReady!这类后面具有"!"符号的表示是插件。
esri/map:用于地图、几何对象、图像与符号。
esri/tasks/locator:用于地理编码。
完成代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HELLO WORLD</title>
<!--esri 提供的样式表-->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<!--Dojo提供的样式表 -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css">
<!-- 地图铺满整个浏览器窗口 -->
<style>
html,body,#mapDiv
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
<!--引入ArcGIS API for JavaScript-->
<script src="http://js.arcgis.com/3.9/"></script>
</head>
<body >
<div id="mapDiv"></div>
</body>
<!-- 加载地图模块并确保DOM已经引用-->
<script>
require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],
function(Map,ArcGISTiledMapServiceLayer){
//以下是创建地图与加入地图的代码
//使用Map类(加载子esri/map模块)来创建一个新的地图
var map = new Map("mapDiv");
//指定一个地图服务的URL
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
//根据地图服务的URL创建一个地图切片图层
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL,{displayLevels:[0,1,2,3,4,5,6,7]});
//将创建好的地图切片图层加入到地图中
map.addLayer(agoLayer);
});
</script>
</html>