地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）

Visual Studio 智能提示配置：将以下 JavaScript 文件引入项目中
arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12_v38.js

1、重要的 API 类

地图类 Map

Map 是承载图层的容器，主要用于呈现地图服务、影像服务，此外还可以展示 WMS 服务等，一个图层只有被添加到 Map 中，才能被显示出来。

var myMap = new esri.Map("Div");

图层类型

图层是承载服务的载体（GraphicsLayer 除外），ArcGIS for Server 将 GIS 资源作为服务发布出来，要想在浏览器端看到这些服务，就必须将这些服务和图层关联起来，不同的服务对应不同的图层类型,下表列出了这些服务和 ArcGIS API for JavaScript 中图层的对应关系。

图层和服务的对应关系

图层	服务
ArcGISDynamicMapServiceLayer	ArcGIS for Server 发布的 2D 动态地图服务
ArcGISTiledMapServiceLayer	ArcGIS for Server 发布的 2D 缓存地图服务
ArcGISImageServiceLayer	ArcGIS for Server 发布的影像地图服务
GraphicsLayer	客户端图层不对应 ArcGIS for Server 发布的服务
FeatureLayer	ArcGIS for Server 发布的要素服务或者地图服务中的图层
WMSLayer	调用 OGC（Open Geospatial Consortium）矢量地图服务
WMTSLayer	OGC（Open Geospatial Consortium）地图切片服务
KMLLayer	Keyhole Markup Language 描述和保存地理信息文件
VETiledLayer	微软的 Bing 地图服务
GeoRssLayer	支持 GeoRss 服务

地图和图层的关系

地图是有多个图层组成的，因此关系包含与被包含的关系：

var myMap = new esri.Map("arcgisDiv");
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
myMap.addLayer(myTiledMapServiceLayer);

Geometry

几何对象用于表示对象的显示型式，在 ArcGIS API for JavaScript 中 Geometry 大体上可以分为下面几类：点、多点、线、矩形、多边和 ScreenPoint。其中 ScreenPoint 对象是最新版本增加的，是以像素的方式表示的点，而点、多点、线、矩形、多边形都是继承自Geometry。

Geometry 对象结构

Geometry 类型名

Geometry：抽象类，定义几何体的图形
MapPoint：点对象
MultiPoint：多点对象
Polyline：多义线对象，由路径（Path）组合而成
Envelope：矩形对象，长宽方向分别平行于 X、Y 轴
Polygon：多边形对象，由环（Ring）组合而成
ScreenPoint：用像素来表示点的 X,Y 坐标，相对于屏幕的左上角

Symbol

Symbol 定义了如何在 GraphicLayer 上显示点，线，面和文本，符号定义了几何对象的所有非地理特征方面的外观，包括图形的颜色，边框线宽度，透明度等等。ArcGIS API for JavaScript 包含了很多符号类，每个类都允许你使用唯一的方式制定一种符号。每种符号都特定于一种类型（点、线，面和文本）。

几何类型和对应的符号

点：SimpleMarkerSymbol，PictureMarkerSymbol
线：SimpleLineSymbol，CartographicLineSymbol
面：SimpleFillSymbol，PictureFillSymbol
文本：TextSymbol，Font

符号集成关系结构图

Graphic

Geometry 定义了对象的形状，Symbol 定义了图形是如何显示的，Graphic 可以包含一些属性信息，并且在 Javascript 中还可以使用 infoTemplate（一个 InfoTemplate 包含标题和内容模板字符串，该内容模板字符串用于将 Graphic 的属性转换成 HTML 的表达式）定义如何对属性信息进行显示，最终的 Graphic 则是被添加到 GraphicsLayer 中，GraphicsLayer 允许对 Graphics 进行事件监听，对于 Graphic 的描述可以用一个数学表达式来表示：

Graphic = Geometry + Attribute + Symbol + infoTemplate

Render（专题渲染）

渲染器定义了一种或多种符号以应用于一个 GraphicsLayer。每个 Graphic 的符号所使用的符号取决于该 Graphic 的属性值。渲染器指定了属性值与符号之间的对应关系。

FeatureSet

FeatureSet 是要素类的轻量级表示，相当于地理数据库中的一个要素类，是 Feature（要素）的集合， FeatureSet 中的每个 Feature 可能包含 Geometry、属性、符号、和一个 InfoTemplate。如果 FeatureSet 不包含 Geometry,只包含属性，那么 FeatureSet 可以看作一个表,其中每个 Feature 是一个行对象。FeatureSet 是我们在利用 ArcGIS API for Javacript 和 ArcGIS for Server 进行数据通讯的一个非常重要的对象，当使用查询，地理处理和路径分析的时候，FeatureSet 常常作为这些分析的功能的输入和输出参数。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My fisrt ArcGis Map</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css"/><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");var myMap;function init(){myMap = new esri.Map("map1");var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");myMap.addLayer(layer1);myMap.setZoom(4);}dojo.addOnLoad(init);</script>
</head>
<body><div id="map1" style=" width:900px; height:800px"></div>
</body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title></title><link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css"><style>html, body, #map {height: 100%; width: 100%; margin: 0; padding: 0; }#controls {background: #fff;box-shadow: 0 6px 6px -6px #999;color: #444;font-family: sans-serif;height: auto;left: 1em;padding: 1em;position: absolute;top: 1em;width: auto;z-index: 40;}#controls div {padding: 0 0 1em 0;}</style><script src="//js.arcgis.com/3.13/"></script><script>var map;require(["esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol","esri/graphic", "esri/layers/GraphicsLayer","dojo/dom", "dojo/dom-attr", "dojo/domReady!"], function (Map, Circle, SimpleFillSymbol,Graphic, GraphicsLayer,dom, domAttr) {map = new Map("map", {basemap: "streets",center: [-120.741, 56.39],slider: false,zoom: 6});var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");var gl = new GraphicsLayer({ id: "circles" });var geodesic = dom.byId("geodesic");map.addLayer(gl);map.on("click", function (e) {var radius = map.extent.getWidth() / 10;var circle = new Circle({center: e.mapPoint,geodesic: domAttr.get(geodesic, "checked"),radius: radius});var graphic = new Graphic(circle, symbol);gl.add(graphic);});});</script></head><body><div id="map"></div><div id="controls"><div>Click the map.</div><input type="checkbox" id="geodesic"><label for="geodesic">Geodesic</label></div></body>
</html>

2、地图操作

Map 参数详解

esri.Map(divId, options)

构造方法在创建一个 map 对象必须传入一个 div 元素作为其容器，此外这个构造方法还包括一系列可选的参数用来描述地图的相关行为，下面为常用的可选参数：

Extent：如果设置了该选项，一旦这个选项的投影被设置，那么所有的图层都在定义的投影中绘制
Logo：是否显示 esri 的 logo
wrapAround180：是否连续移动地图，即通过日期变更线，好似对地图进行横向旋转 360 度
lods：设置地图的初始比例级别
maxScale：设置地图的最大可视比例尺
sliderStyle：设置 slider 的样式，值为 large 或者 small

Map 主要属性

autoResize：如果浏览器窗口或 ContentPane 填充的地图控件的小部件的大小调整了，地图是否自动调整大小
attribution：地图属性
fadeOnZoom：在地图进行缩放时，是否启用淡入淡出的效果
extent：地图外包矩形的范围，即四个角点坐标范围
force3DTransforms：是否启用 CSS3 转换
infoWindow：在地图上显示消息框
isClickRecenter：按住 Shift 键，在地图上单击鼠标左键，是否将该点设为地图中心
isDoubleClickZoom：双击鼠标左键，是否进行放大地图操作
isPan：设置地图是否可以用鼠标移动
spatialReference：获取地图的空间参考信息
isKeyboardNavigation：是否用键盘上的“+”和“-”导航地图
isRubberBandZoom：是否启用橡皮筋缩放模式
isScrollWheelZoom：是否允许滚轮进行缩放操作
isShiftDoubleClickZoom：按住 Shift 键，在地图上双击鼠标左键，是否将该点设为地图中心的同时进行缩放操作
geographicExtent：地图的地理坐标范围（只支持 Web 墨卡托）
layerIds：地图已加载的图层 ID 列表
loaded：地图控件是否已加载完成
graphics：获取地图的 GraphicsLayer
position：地图左上角坐标
root：容纳图层、消息框等的容器的 DOM 节点
showAttribution：是否允许显示地图属性
snappingManager：捕捉管理器
isZoomSlider：设置或者获取地图的放大滑块状态（true 和 false）
layerIds：获取地图的图层的 ID（数组）
navigationMode：设置或者获取地图的导航模式
timeExtent：地图的时间范围

Map 主要方法

toScreen/toMap：地图不屏幕之间的坐标转换
setScale：设置地图到指定的比例尺
setZoom：放缩到指定的层级
setLevel：放缩到指定的层级
setExtend：设置地图显示范围，常用于进行地图的平移操作
disablePan：禁止使用鼠标平移地图
removeAllLayers：移除所有图层
removeAllLayers：移除所有图层
addLayer：添加图层
getBasemap：获取底图
getLayer：根据 id 获取图层
getLayersVisibleAtScaleRange：获取某一比例尺下的可见图层（图层数组）
getScale：获取当前的比例尺
hidePanArrows：隐藏移动时候的鼠标箭头
hideZoomSlider：隐藏放大滑块
panRight：向右平移
panUp：向北平移
removeAllLayers：移除所有图层
removeLayer：移除指定图层
reorderLayer：改变图层的顺序
reposition：复位地图，该方法在地图的 DIV 被复位的时候要用到
setTimeExtent：设置地图的时间范围
setTimeSlider：设置和地图关联的时间滑块
setZoom：设置放大级别
showPanArrows：显示平移箭头
showZoomSlider：显示放大滑块

Map 主要事件

onExtentChange：地图范围改变事件
onBasemapChange：地图的底图发生变化
onLoad：当第一个图层或者底图被添加到 Map 中的时候发生
onClick：在地图上发生单击的时候发生
onLayerAdd：当图层添加的时候发生
onLayersAddResult：当所有图层都添加结束后发生，使用 map.addLayers 方法之后
onLayersRemoved：当所有图层都移除后发生
onLoad：当第一个图层或者底图加载成功后发生
onMouseDown：当鼠标在地图上单击的时候发生
onMouseMove：当鼠标在地图上移动的时候发生（在这个事件中经常用来获取 X,Y 坐标）
onMouseOut：当鼠标移出地图的时候发生

<!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" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");var myMap;function init() {//  myMap = new esri.Map("map1",{logo:true});myMap = new esri.Map("arcgisDiv");var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/sd/MapServer");myMap.addLayer(myTiledMapServiceLayer);myMap.setZoom(4);var div1 = dojo.byId("div1");var div2 = dojo.byId("div2");dojo.connect(myMap, "onMouseMove", function (e) {var mp = e.mapPoint;var sp = e.screenPoint;div1.innerHTML = mp.x + "/" + sp.x;div2.innerHTML = mp.y + "/" + sp.y;});}dojo.addOnLoad(init)</script>
</head>
<body><div id="arcgisDiv" style=" width:900px; height:500px"></div><div id="div1"></div><div id="div2"></div>
</body>
</html>

3、地图常用工具

放大

dojo.require("esri.toolbars.navigation")
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN)

缩小

navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT)

左移

myMap.panLeft()

右移

myMap.panRight()

上移

myMap.panUp()

下移

myMap.panDown()

全屏

navToolbar.zoomToFullExtent()

拖动

navToolbar.activate(esri.toolbars.Navigation.PAN)

鹰眼

function OverviewMap() { var over = { map: Map, attachTo: "bottom-right", color: "#D84E13", expandFactor:2, baseLayer:new esri.layers.ArcGISTiledMapServiceLayer(MapServer) };var MapViewer = new esri.dijit.OverviewMap(over, dojo.byId("OverViewDiv")); MapViewer.startup();
}

示例代码：

<!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" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");dojo.require("esri.dijit.OverviewMap");dojo.require("esri.toolbars.navigation");var myMap, navToolbar;function init() {myMap = new esri.Map("map1", { logo: true });navToolbar = new esri.toolbars.Navigation(myMap);var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");myMap.addLayer(layer1);myMap.setZoom(4);var div1 = dojo.byId("div1");var div2 = dojo.byId("div2");var button1 = dojo.byId("Button1");var button2 = dojo.byId("Button2");var button3 = dojo.byId("Button3");var button4 = dojo.byId("Button4");var button5 = dojo.byId("Button5");var button6 = dojo.byId("Button6");var button7 = dojo.byId("Button7");var button8 = dojo.byId("Button8");var button9 = dojo.byId("Button9");dojo.connect(myMap, "onMouseMove", function (e) {var mp = e.mapPoint;var sp = e.screenPoint;div1.innerHTML = mp.x + "/" + sp.x;div2.innerHTML = mp.y + "/" + sp.y;});dojo.connect(button1, "click", function (evt) {navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);});dojo.connect(button2, "click", function (evt) {navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);});dojo.connect(button3, "click", function (evt) {myMap.panUp();});dojo.connect(button4, "click", function (evt) {myMap.panDown();});dojo.connect(button5, "click", function (evt) {myMap.panLeft();});dojo.connect(button6, "click", function (evt) {myMap.panRight();});dojo.connect(button7, "click", function (evt) {navToolbar.zoomToFullExtent();});dojo.connect(button8, "click", function (evt) {navToolbar.activate(esri.toolbars.Navigation.PAN);});                dojo.connect(button9, "click", function (evt) {var  overviewMap = new esri.dijit.OverviewMap({map: myMap,visible: true});overviewMap.startup();});}dojo.addOnLoad(init);</script>
</head>
<body><div id="map1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0"></div><div id="div1"></div><div id="div2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div><table style="width: 100%;"><tr><td><input id="Button1" type="button" value="放大" /><input id="Button2" type="button" value="缩小" /><input id="Button3" type="button" value="上移" /><input id="Button4" type="button" value="下移" /><input id="Button5" type="button" value="左移" /><input id="Button6" type="button" value="右移" /><input id="Button7" type="button" value="全屏" /><input id="Button8" type="button" value="拖动" /><input id="Button9" type="button" value="鹰眼" /></td><td>&nbsp;</td><td>&nbsp;</td></tr></table></div>
</body>
</html>

4、图层控制

<!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" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");var myMap, layer1;function init() {myMap = new esri.Map("map1", { logo: true });layer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");dojo.connect(layer1, "onLoad", function (layers) {var html = "";// 获取图层信息var infos = layers.layerInfos;// alert(infos.length);for (var i = 0; i < infos.length; i++) {var info = infos[i];html = html + "<div><input id='" + info.id + "' name='layerList' class='listCss' type='checkbox' value='checkbox' οnclick='setLayerVisibility()' " + (info.defaultVisibility ? "checked" : "") + " />" + info.name + "</div>"}dojo.byId("toc").innerHTML = html;});myMap.addLayer(layer1);myMap.setZoom(4);}function setLayerVisibility() {// 用dojo.query获取css为listCss的元素数组// 用dojo.query获取css为listCss的元素数组var inputs = dojo.query(".listCss");visible = [];// 对checkbox数组进行变量把选中的id添加到visiblefor (var i = 0; i < inputs.length; i++) {if (inputs[i].checked) {visible.push(inputs[i].id);} else {visible.push(-1);}}// 设置可视图层layer1.setVisibleLayers(visible);}dojo.addOnLoad(init)</script>
</head>
<body><table><tr><td style=" width:800px;height:400px"><div id="map1"data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center'"style="padding: 0"></div><div id="div1"></div><div id="div2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>               </td><td><div id="toc"></div></td></tr></table>
</body>
</html>

5、常用控件

Scalebar（标尺工具）

Scalebar 用于在地图上或者一个指定的 HTML 节点中显示地图的比例尺信息

Bookmark（书签）

书签控件用于管理用户创建的地图书签提供新建书签、定位到书签和删除书签的功能

InfoWindow

InfoWindow 控件是一个带有小尾巴的窗口，小尾巴指向一个位置或感兴趣的要素，其本质上就是一个 HTML 弹出框，InfoWindow 经常包括 Graphic 的属性信息。如果 Graphic 定义了InfoTemplate，则点击 Graphic 显示 InfoTemplate 所定义的，每个地图仅有一个 InfoWindow，无构造函数
构造方法：通过 Map.infoWindow 获取或设置

Navigation（导航）

构造方法：

esri.toolbars.Navigation(map)

创建导航对象，传入一个 map 对象作为参数，无可选参数

Draw（绘图）

在地图上进行绘图操作，主要是借助于 Toolbar 上的 Draw（绘图）工具，绘图工具支持几何对象的创建

new Draw(map, options?)

Legend（图例）

Legend 控件用于动态显示全部或者部分图层的标签和符号信息

new Legend(params, srcNodeRef)

示例代码：

<!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" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");dojo.require("esri.dijit.Scalebar");dojo.require("esri.dijit.Bookmarks");dojo.require("esri.dijit.BookmarkItem");var myMap,Books;function init() {myMap = new esri.Map("map1");var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");myMap.addLayer(imageryPrime);var portlandLandBase = new esri.layers.ArcGISDynamicMapServiceLayer("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");// 设置要显示的图层portlandLandBase.setVisibleLayers([2, 1, 0]);// 设置图层透明度portlandLandBase.setOpacity(0.8);myMap.addLayer(portlandLandBase);var div1 = dojo.byId("div1");var div2 = dojo.byId("div2");dojo.connect(myMap, "onMouseMove", function (e) {var mp = e.mapPoint;var sp = e.screenPoint;div1.innerHTML = mp.x + "/" + sp.x;div2.innerHTML = mp.y + "/" + sp.y;});var scalebar = new esri.dijit.Scalebar({map: myMap,// "dual" displays both miles and kilmometers// "english" is the default, which displays miles// use "metric" for kilometersscalebarUnit: "dual"}, dojo.byId("scalebardiv"));Books = new esri.dijit.Bookmarks({map: myMap,editable: "true"}, dojo.byId("bookmarks"));dojo.connect(button1, "click", addBook);}function addBook() {var bookextent = myMap.extent;var bookmarkItem = new esri.dijit.BookmarkItem({"extent": bookextent,"name": "北京"});Books.addBookmark(bookmarkItem);}        dojo.addOnLoad(init)</script>
</head>
<body><div id="scalebardiv"></div><div id="map1" style=" width:900px; height:500px"></div><div id="div1"></div><div id="div2"></div><table><tr><td><div id="bookmarks"></div></td><td></td><td><button id="button1">添加标签</button></td></tr></table>
</body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Formatter Function</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><style>html, body { height: 100%; width: 100%; margin: 0; padding: 0; }</style><script>// infotemplate formatting functions need to be in the global scope to workvar map, compare, compare2;require(["esri/map","esri/InfoTemplate","esri/layers/FeatureLayer","esri/renderers/SimpleRenderer","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","dojo/dom","dojo/number","dojo/on","dojo/parser","esri/Color","dijit/layout/BorderContainer","dijit/layout/ContentPane","dojox/layout/ExpandoPane","dojo/domReady!"],function (Map, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,SimpleLineSymbol, dom, number, on, parser, Color,BorderContainer,ContentPane,ExpandoPane) {parser.parse();map = new esri.Map("mapDiv");var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");map.addLayer(imageryPrime);var infoTemplate = new InfoTemplate();infoTemplate.setTitle("Population in ${NAME}");infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +"<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +"<b>2000: </b>${POP2000:NumberFormat}<br/>" +"<b>2000 density: </b>${POP00_SQMI:NumberFormat}");var counties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {mode: FeatureLayer.MODE_SNAPSHOT,infoTemplate: infoTemplate,outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]});counties.setDefinitionExpression("STATE_NAME = 'Michigan'");// apply a renderervar symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255, 255, 255, 0.35]), 1),new Color([109, 146, 155, 0.35]));counties.setRenderer(new SimpleRenderer(symbol));map.addLayer(counties);            });</script></head><body class="soria"><div data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"><div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div></div></body></html>

<!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" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");dojo.require("esri.toolbars.navigation");                                        // 引入导航组件dojo.require("esri.toolbars.draw");dojo.require("dijit.registry");var myMap;function init() {myMap = new esri.Map("map1", { logo: true });var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");myMap.addLayer(layer1);myMap.setZoom(4);myMap.disableKeyboardNavigation();var div1 = dojo.byId("div1");var div2 = dojo.byId("div2");dojo.connect(myMap, "onMouseMove", function (e) {var mp = e.mapPoint;var sp = e.screenPoint;div1.innerHTML = mp.x + "/" + sp.x;div2.innerHTML = mp.y + "/" + sp.y;});var navToolbar = new esri.toolbars.Navigation(myMap);                       // 导航对象var zoomprev = dojo.byId("zoomprev");var zoomnext = dojo.byId("zoomnext");dojo.connect(zoomprev, "click", function (ex) {navToolbar.zoomToPrevExtent();})dojo.connect(zoomnext, "click", function (ex) {navToolbar.zoomToNextExtent();})                        }dojo.addOnLoad(init)</script>
</head>
<body><div id="map1" style=" width:900px; height:500px"></div><div id="div1"></div><div id="div2"></div><div id="div3"><button id="zoomprev">上一视图</button><button id="zoomnext">下一视图</button></div>
</body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,user-scalable=no"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>地图绘图控件</title>    <link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="http://localhost:3616/arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><style>html, body, #mainWindow {font-family: sans-serif; height: 100%; width: 100%; }html, body {margin: 0; padding: 0;}#header {height: 80px; overflow: auto;padding: 0.5em;}</style><script>var map, toolbar, symbol, geomTask;require(["esri/map","esri/toolbars/draw","esri/graphic","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","dojo/parser", "dijit/registry","dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"], function (Map, Draw, Graphic,SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,parser, registry,BorderContainer,ContentPane,Button,WidgetSet) {parser.parse();map = new Map("map", {basemap: "streets",center: [-15.469, 36.428],zoom: 3});map.on("load", createToolbar);                                  //地图加载创建绘图工具对象// 遍历所有dijit,连接onClick事件// 为按钮来激活绘图工具registry.forEach(function (d) {// D是引用的dijit// 可能是一个布局容器或一个按钮if (d.declaredClass === "dijit.form.Button") {             // 判断是不是按钮d.on("click", activateTool);}});function activateTool() {var tool = this.label.toUpperCase().replace(" ", "_");        // 转换为大写// alert(tool);toolbar.activate(Draw[tool]);                                // 执行绘图map.hideZoomSlider();}function createToolbar(themap) {toolbar = new Draw(map);toolbar.on("draw-end", addToMap);}function addToMap(evt) {var symbol;toolbar.deactivate();                                      // 使对象无效map.showZoomSlider();                                       // 地图放大缩小标尺显示switch (evt.geometry.type) {case "point":case "multipoint":symbol = new SimpleMarkerSymbol();break;case "polyline":symbol = new SimpleLineSymbol();break;default:symbol = new SimpleFillSymbol();break;}var graphic = new Graphic(evt.geometry, symbol);map.graphics.add(graphic);}});</script></head><body class="nihilo"><div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"><div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"><span>Draw:<br /></span><button data-dojo-type="dijit/form/Button">Point</button><button data-dojo-type="dijit/form/Button">Multi Point</button><button data-dojo-type="dijit/form/Button">Line</button><button data-dojo-type="dijit/form/Button">Polyline</button><button data-dojo-type="dijit/form/Button">Polygon</button><button data-dojo-type="dijit/form/Button">Freehand Polyline</button><button data-dojo-type="dijit/form/Button">Freehand Polygon</button><!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol--><button data-dojo-type="dijit/form/Button">Arrow</button><button data-dojo-type="dijit/form/Button">Triangle</button><button data-dojo-type="dijit/form/Button">Circle</button><button data-dojo-type="dijit/form/Button">Ellipse</button></div><div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div></div></body>
</html>

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>图例</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><style>html, body {height: 97%;width: 98%;margin: 1%;}#rightPane {width: 20%;}#legendPane {border: solid #97DCF2 1px;}</style><script>var map;require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend","dojo/_base/array", "dojo/parser","dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/layout/AccordionContainer", "dojo/domReady!"], function (Map, FeatureLayer, Legend,arrayUtils, parser,BorderContainer,ContentPane,AccordionContainer) {parser.parse();map = new Map("map", {basemap: "topo",center: [-96.53, 38.374],zoom: 13});var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {mode: FeatureLayer.MODE_ONDEMAND,outFields: ["*"]});var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {mode: FeatureLayer.MODE_ONDEMAND,outFields: ["*"]});// 添加图例map.on("layers-add-result", function (evt) {// 回调函数适用于arr和返回一个数组的每个元素的结果,arrayUtils.map DOJO遍历集合，返回数组var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {return { layer: layer.layer, title: layer.layer.name };});if (layerInfo.length > 0) {var legendDijit = new Legend({map: map,layerInfos: layerInfo}, "legendDiv");legendDijit.startup();}});map.addLayers([waterbodies, rivers]);});</script>
</head><body class="claro"><!--[if IE 7]><style>html, body {margin: 0;}</style><![endif]--><div id="content"data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'headline', gutters:true"style="width: 100%; height: 100%; margin: 0;"><div id="rightPane"data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'right'"><div data-dojo-type="dijit/layout/AccordionContainer"><div data-dojo-type="dijit/layout/ContentPane" id="legendPane"data-dojo-props="title:'Legend', selected:true"><div id="legendDiv"></div></div><div data-dojo-type="dijit/layout/ContentPane"data-dojo-props="title:'Pane 2'">This pane could contain tools or additional content</div></div></div><div id="map"data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center'"style="overflow:hidden;"></div></div>
</body></html>

6、IdentifyTask 数据查询

IdentifyTask 是在某个地图服务中进行空间查询，IdentifyTask 以 IdentifyParameters 对象作为参数，能查询同一个地图服务的一个或者多个图层， IdentifyTask 仅仅用于空间信息查询。

IdentifyTask 构造函数

构造函数：

new IdentifyTask(url, options?)

url：服务地址
options?：可选参数
gdbVersion：指定要显示geodatabase版本
Geodatabase是一种采用标准关系数据库技术来表现地理信息的数据模型

IdentifyTask 方法

execute(identifyParameters, callback?, errback?)

发送一个请求到ArcGIS，基于 IdentifyParameters identifyParameters中指定的参数
execute 参数说明：
identifyParameters：指定的标准用来识别特性。空间信息化标准
callback：函数调用方法时完成，回调函数
errback：错误返回函数

IdentifyTask 属性

url：URL的ArcGIS Server REST资源代表了地图服务。

IdentifyTask 事件

complete：完成时间，当完成后执行
error：发生错误的时候执行

IdentifyParameters

IdentifyTask的参数对象，指定一些参数，来设置查询的标准特性

IdentifyParameters常量

LAYER_OPTION_ALL：识别所有的图层，包含隐藏图层
LAYER_OPTION_TOP：只有最顶层可见层标识
LAYER_OPTION_VISIBLE：所有显示图层

IdentifyParameters 属性

DynamicLayerInfos：动态图层信息数组用来改变层排序或重新定义映射
Geometry：在确定用于选择的几何特性
Height：当前正在查看地图的像素高度
LayerDefinitions：一系列层定义表达式,允许你过滤个别层的特性
LayerIds：层执行确认操作
LayerOption：指定哪写层可以使用
LayerTimeOptions：对象数组,允许您定义时间选项指定的层
MapExtent：程度或当前正在查看地图的边界框
MaxAllowableOffset：返回的最大允许抵消用于泛化几何图形识别操作
ReturnGeometry：是否返回几何对象
SpatialReference：输入和输出的空间引用几何图形以及 mapExtent
TimeExtent：指定时间范围内使用的识别任务
Tolerance：从指定的几何距离屏幕像素内的执行标识
Width：当前正在查看地图的宽度（以像素为单位）

示例代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Identify Sample</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><style>html, body {height: 98%;width: 98%;margin: 0;padding: 5px;}</style><script>var map, bldgResults, parcelResults, symbol;require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/tasks/IdentifyTask","esri/tasks/IdentifyParameters","dojo/on","dojo/parser","esri/Color","dijit/registry","dijit/form/Button","dijit/layout/ContentPane","dijit/layout/TabContainer","dojo/domReady!"],function (Map, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,IdentifyTask, IdentifyParameters, on, parser, Color, registry,Button,ContentPane,TabContainer) {parser.parse();var identifyTask, identifyParams;map = new Map("mapDiv", {basemap: "streets",center: [-83.275, 42.573],zoom: 18});map.on("load", initFunctionality);var landBaseLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer", {opacity: 0.2});map.infoWindow.on("show", function () {registry.byId("tabs").resize();});map.addLayer(landBaseLayer);// 初始化查询对象，样式对象function initFunctionality() {map.on("click", doIdentify);identifyTask = new IdentifyTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");identifyParams = new IdentifyParameters();identifyParams.tolerance = 3;                                          // 指定范围identifyParams.returnGeometry = true;                                   // 是否返回集合对象identifyParams.layerIds = [0, 2];                                       // 确实操作那个些层identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;                                   // 指定使用哪个层在使用识别identifyParams.width = map.width;                                   // 当前正在查看地图的像素高度identifyParams.height = map.height;                                    // 当前正在查看地图的像素宽度map.infoWindow.resize(415, 200);map.infoWindow.setContent(registry.byId("tabs").domNode);map.infoWindow.setTitle("Identify Results");symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255, 0, 0]), 2),new Color([255, 255, 0, 0.25]));}// 地图单击事件function doIdentify(event) {map.graphics.clear();identifyParams.geometry = event.mapPoint;                             // 查询的集合信息identifyParams.mapExtent = map.extent;                               // 地图范围identifyTask.execute(identifyParams, function (idResults) {addToMap(idResults, event);});}// 加载地图信息function addToMap(idResults, event) {bldgResults = { displayFieldName: null, features: [] };             // 建筑物结果集对象parcelResults = { displayFieldName: null, features: [] };               // 包裹结果集对象for (var i = 0, il = idResults.length; i < il; i++) {                  // 遍历返回的结果集var idResult = idResults[i];                                        // 获取对象if (idResult.layerId === 0) {                                     // 获取图层0的内容if (!bldgResults.displayFieldName) { bldgResults.displayFieldName = idResult.displayFieldName; }bldgResults.features.push(idResult.feature);}else if (idResult.layerId === 2) {                              // 获取图层2的内容if (!parcelResults.displayFieldName) { parcelResults.displayFieldName = idResult.displayFieldName; }parcelResults.features.push(idResult.feature);}}registry.byId("bldgTab").set("content", buildingResultTabContent(bldgResults));registry.byId("parcelTab").set("content", parcelResultTabContent(parcelResults));map.infoWindow.show(event.screenPoint,map.getInfoWindowAnchor(event.screenPoint));                      // getInfoWindowAnchor点的锚}function buildingResultTabContent(results) {                              // 模板化建筑物结果集var template = "";var features = results.features;template += "<i>Total features returned: " + features.length + "</i>";template += "<table border='1'>";template += "<tr><th>ID</th><th>Address</th></tr>";var parcelId;var fullSiteAddress;for (var i = 0, il = features.length; i < il; i++) {parcelId = features[i].attributes['PARCELID'];fullSiteAddress = features[i].attributes['Full Site Address'];template += "<tr>";template += "<td>" + parcelId + " <a href='#' οnclick='showFeature(bldgResults.features[" + i + "]); return false;'>(show)</a></td>";template += "<td>" + fullSiteAddress + "</td>";template += "</tr>";}template += "</table>";return template;}function parcelResultTabContent(results) {                               // 模板化包裹结果集var template = "";var features = results.features;template = "<i>Total features returned: " + features.length + "</i>";template += "<table border='1'>";template += "<tr><th>ID</th><th>Year Built</th><th>School District</th><th>Description</th></tr>";var parcelIdNumber;var residentialYearBuilt;var schoolDistrictDescription;var propertyDescription;for (var i = 0, il = features.length; i < il; i++) {parcelIdNumber = features[i].attributes['Parcel Identification Number'];residentialYearBuilt = features[i].attributes['Residential Year Built'];schoolDistrictDescription = features[i].attributes['School District Description'];propertyDescription = features[i].attributes['Property Description'];template += "<tr>";template += "<td>" + parcelIdNumber + " <a href='#' οnclick='showFeature(parcelResults.features[" + i + "]); return false;'>(show)</a></td>";template += "<td>" + residentialYearBuilt + "</td>";template += "<td>" + schoolDistrictDescription + "</td>";template += "<td>" + propertyDescription + "</td>";template += "</tr>";}template += "</table>";return template;}});function showFeature(feature) {                                                    // 设定样式，添加featuremap.graphics.clear();feature.setSymbol(symbol);map.graphics.add(feature);}</script></head><body class="claro">Click the map to identify building and tax information.<div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div><!-- info window tabs --><div id="tabs" dojoType="dijit/layout/TabContainer" style="width:385px; height:150px;"><div id="bldgTab" dojoType="dijit/layout/ContentPane" title="Buildings"></div><div id="parcelTab" dojoType="dijit/layout/ContentPane" title="Tax Parcels"></div></div></body>
</html>

7、QueryTask 数据查询

QueryTask

QueryTask 是一个进行空间和属性查询的功能类，可以在某个地图服务的某个子图层内进行查询
QueryTask 执行需要两个先决条件：一个是需要查询的图层 URL、一个是进行查询的过滤条件。QueryTask 以 Query 为执行参数，空间查询和属性查询的设置都是在 Query 对象上进行，QueryTask 的过滤条件除了属性过滤，同时还支持空间过滤
构造函数：

new QueryTask(url, options?)

url：要查询服务的路径

QueryTask 主要方法

execute(parameters, callback?, errback?)：执行查询一个图层
executeForCount(query, callback?, errback?)：查询统计，返回数量

Query

Query是QueryTask 查询参数对象

Query 主要属性

Distance：输入的缓冲区范围
Geometry：用于查询几何范围
objectIds：想要查询的图层编号
orderByFields：排序字段
outFields：返回字段
returnGeometry：是否返回几何对象
Where：查询条件
Text：where使用Like
multipatchOption：参数支持查询功能服务的数据源featureclass

IdentifyTask 与 QueryTask 区别

IdentifyTask：一般用于点查询
QueryTask：用于各种查询

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>QueryTask with geometry, results as an InfoWindow</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");dojo.require("esri.tasks.query");var map, queryTask, query;var symbol, infoTemplate;function init() {// create mapmap = new esri.Map("mapDiv");var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");map.addLayer(layer);dojo.connect(map, "onClick", executeQueryTask);               // 地图单击事件// 查询信息queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");query = new esri.tasks.Query();query.returnGeometry = true;query.outFields = ["STATE_NAME", "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips: ${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.5]));}function executeQueryTask(evt) {query.geometry = evt.mapPoint;                             // 根据点击地图的坐标            queryTask.execute(query, showResults);}function showResults(featureSet) {map.graphics.clear();dojo.forEach(featureSet.features, function (feature) {var graphic = feature;graphic.setSymbol(symbol);graphic.setInfoTemplate(infoTemplate);map.graphics.add(graphic);});}dojo.ready(init);</script></head><body class="claro">Click on a State to get more info.  When State is highlighted, click State again to get infoWindow.<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div></body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Multiple Graphics Layers</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><script>dojo.require("esri.map");dojo.require("esri.tasks.query");var map;function init() {map = new esri.Map("map", {basemap: "streets",center: [-98.215, 38.382],zoom: 7,slider: false});dojo.connect(map, "onLoad", doQueries);}function doQueries(map) {            var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");var countyQuery = new esri.tasks.Query();countyQuery.outFields = ["*"];countyQuery.returnGeometry = true;countyQuery.outSpatialReference = map.spatialReference;countyQuery.where = "STATE_NAME = 'Kansas'";countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");var cityQuery = new esri.tasks.Query();cityQuery.outFields = ["*"];cityQuery.returnGeometry = true;cityQuery.outSpatialReference = map.spatialReference;cityQuery.where = "STATE_NAME = 'Kansas'";// cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);cityQueryTask.executeForCount(cityQuery, function (count) {dojo.byId("info").innerHTML = count + " features matched the input query";}, function (error) {dojo.byId("info").innerHTML = error + " features matched the input query";});           }function addCountyFeatureSetToMap(featureSet) {// 定义样式var symbol = new esri.symbol.SimpleFillSymbol();symbol.setColor(new dojo.Color([150, 150, 150, 0.5]));// 设置信息模板var countyLayer = new esri.layers.GraphicsLayer();countyLayer.setInfoTemplate(new esri.InfoTemplate("${NAME}", "${*}"));map.addLayer(countyLayer);// 在地图上遍历，显示查询的内容dojo.forEach(featureSet.features, function (feature) {countyLayer.add(feature.setSymbol(symbol));//在地图上显示元素});}function addCityFeatureSetToMap(featureSet) {var symbol = new esri.symbol.SimpleMarkerSymbol();symbol.setColor(new dojo.Color([0, 0, 255]));var cityLayer = new esri.layers.GraphicsLayer();cityLayer.setInfoTemplate(new esri.InfoTemplate("${CITY_NAME}", "${*}"));map.addLayer(cityLayer);map.reorderLayer(cityLayer, 1);dojo.forEach(featureSet.features, function (feature) {cityLayer.add(feature.setSymbol(symbol));});}dojo.ready(init);</script></head><body><div id="map" class="claro" style="width:800px; height:400px; border:1px solid #000;"></div><div id="info"></div><div id="info2"></div></body>
</html>

8、FindTask 数据查询

FindTask 是在某个地图服务中进行属性查询的功能类，FindTask 以 FindParameters 对象作为参数，能查询同一个地图服务的一个或者多个图层，并且可以在多个字段中进行查询，FindTask 仅仅用于属性信息的查询，在 FindTask 执行结束后，可以从其返回结果中获取查询的对象，所在图层和字段。
构造函数：

new esri.tasks.FindTask(url,options?)

FindTask 属性

url：服务地址

FindTask 方法

execute(findParameters,callback?,errback?)

findParameters

FindTask的查询参数
构造函数：

new esri.tasks.FindParameters()

findParameters 属性

Contains：搜索匹配的文本信息
dynamicLayerInfos：改变图层排序的数组
layerDefinitions：层定义表达式，过滤层的属性，如：年龄>20
layerIds：层编号数组
maxAllowableOffset：对查找操作返回的几何图形进行，最大泛化操作
outSpatialReference：输出几何图形的空间参考
returnGeometry：是否返回几何图形
searchFields：你要搜索返回显示的字段
searchText：你要搜索的文本，针对于searchFields

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><title>Display Find Task results in Dojo DataGrid</title><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/dojo/dijit/themes/claro/claro.css" /><script type="text/javascript" src="http://localhost:3616/arcgisjs/init.js"></script><script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script><link rel="stylesheet" type="text/css" href="http://localhost:3616/arcgisjs/js/esri/css/esri.css" /><style>html, body { height: 100%; width: 100%; margin: 0; padding: 0; }</style><script>require(["esri/map","esri/tasks/FindTask","esri/tasks/FindParameters","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/Color","dojo/on","dojo/dom","dijit/registry","dojo/_base/array","dojo/_base/connect","dojox/grid/DataGrid","dojo/data/ItemFileReadStore","dijit/form/Button","dojo/parser","dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"], function (Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser,BorderContainer,ContentPane) {var findTask, findParams;var map, center, zoom;var grid, store;parser.parse();registry.byId("search").on("click", doFind);center = [-83.266, 42.568];zoom = 11;map = new esri.Map("map", {basemap: "streets",center: center,zoom: zoom});// Create Find Task using the URL of the map service to searchfindTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");map.on("load", function () {// Create the find parametersfindParams = new FindParameters();findParams.returnGeometry = true;findParams.layerIds = [0];findParams.searchFields = ["OWNERNME1", "OWNERNME2"];findParams.outSpatialReference = map.spatialReference;               });function doFind() {             findParams.searchText = dom.byId("ownerName").value;                    // 获取查询的内容findTask.execute(findParams, showResults);                                // 执行查询}function showResults(results) {map.graphics.clear();var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),new Color([98, 194, 204, 0.5]));// 创建一个数组var items = arrayUtils.map(results, function (result) {var graphic = result.feature;graphic.setSymbol(symbol);map.graphics.add(graphic);return result.feature.attributes;                                   // 所有信息字段的列表});// 创建数据对象var data = {identifier: "PARCELID",                                              // 关键字段label: "PARCELID",                                                     // 显示字段items: items                                                     // 绑定};// 数据存储对象store = new ItemFileReadStore({data: data});var grid = registry.byId("grid");grid.setStore(store);grid.on("rowclick", onRowClickHandler);// 地图居中map.centerAndZoom(center, zoom);}// 单击信息定位function onRowClickHandler(evt) {var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;            // 获取这一行的变化var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {                      // 过滤return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);                   // ===不只是数值相等,数据类型也要相同});if (selectedTaxLot.length) {map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);        // 定位到信息}}});</script></head><body class="claro"><div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;"><div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">Owner name: <input type="text" id="ownerName" size="60" value="Katz" />      <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       </button></div><div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div><div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;"><table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"><thead><tr><th field="PARCELID">Parcel ID</th><th field="OWNERNME1" >Owner 1</th><th field="OWNERNME2">Owner 2</th><th field="RESYRBLT ">Year Built</th><th field="SITEADDRESS" width="100%">Address</th></tr></thead></table></div></div></body>
</html>