ArcGis-javaScript最全的中文API

ArcGis-for-javaScript最全中文API

1.示例概述

这些示例展示了如何使用ArcGIS JavaScript API的各种功能。每个示例页包含一个在线的演示，示例里做了什么的描述和源代码。查看视频展示如何拷贝示例代码并在机器上运行。

这些示例使用一颗星，两颗星或三颗星对相关复杂度进行了分类。如果刚刚学习ArcGIS JavaScript API，从一颗星示例开始可以更好的理解示例。在很多情况下，可以扩展或合并示例来为自己的应用创建一个起始点。查看视频来学习如何创建起始点。

示例使用的服务来自ESRI示例服务器(sampleserver1 和 sampleserver2)和 ArcGIS Online。能够在自己的测试应用中使用来自ESRI示例服务器上的服务来学习API。也可以在自己的应用中使用ArgGIS Online图层。使用条款见ArcGIS Online的首页。

2.地图

2.1加入一个地图

描述

这个示例显示ArcGIS Server的一个地图。ArcGIS Server地图是缓存的，意味着它有服务器管理员建来提升性能的一组预先渲染的切片。由于这个原因地图通过 ArcGISTiledMapServiceLayer表示。

如果地图服务没有一个可用的缓存，使用 ArcGISDynamicMapServiceLayer。如果不知道地图服务是否有缓存可用，使用 Services Directory寻找。

注意切片地图服务图层的构造函数包含服务的URL(/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer)，使用Services Directory找到自己的地图服务的URL。

这行加入ArcGIS Server地图

er(tiledMapServiceLayer);

代码

Creates a map and adds an ArcGISTiledMapServiceLayer.

Map navigation using mouse:

• Drag to pan
• SHIFT + Click to recenter
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• Use Arrow keys to pan
• + key to zoom in a level

tiledMapServiceLayer = new

TiledMapServiceLayer("/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");

• - key to zoom out a level
• Double Click to Center and Zoom in

2.2加入地图并显示当前地图范围

描述

这个示例使用 property属性接收地图范围的左下角和右上角坐标 "书签"。

使用下列行创建地图:

var map = new ("map");

上面行中"Map"出现了三次。第一次(var map)是对象的名称，第二次 ()是类的名称,第三次("map")是将包含地图的DIV的名称。

这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个 cachedArcGIS Server地图服务，但是也可以使用 ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。

注意切片地图服务层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services

Directory找到地图服务的URL。

下行代码为地图的showExtent事件增加了一个事件监听器：

t(map, "onExtentChange", showExtent);

这意味着如果地图的范围被修改，回调函数showExtent将被调用。showExtent函数构建一个包含地图的两个角的坐标的字符串。

Lower left corner = (, )

Upper right corner = (, )

这两个角是需要知道用于地图的边界框的。showExtent函数的最后一行通过增加完整的字符串到'info' DIV在页面上显示坐标:

("info").innerHTML = s;

代码

tiledMapServiceLayer = new

TiledMapServiceLayer("/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

Creates a map and adds an ArcGISTiledMapServiceLayer. On map onExtentChanged event you should see the extent printed below the map.

Map navigation using mouse:

• Drag to pan
• SHIFT + Click to recenter
• SHIFT + Drag to zoom in
• SHIFT + CTRL + Drag to zoom out
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• Use Arrow keys to pan
• + key to zoom in a level
• - key to zoom out a level
• Double Click to Center and Zoom in

2.3加入地图并显示x,y坐标

描述

这个示例报告了用户在地图上悬停和拖拽鼠标的鼠标指针坐标。通过事件监听器来更新鼠标移到的x和y坐标。

下行代码创建了地图：

var map = new ("map");

上面行中"Map"出现了三次。第一次(var map)是对象的名称，第二次 ()是类的名称,第三次("map")是将包含地图的DIV的名称。

这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个 cachedArcGIS Server地图服务，但是也可以使用 ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。

注意切片地图服务层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services

Directory找到地图服务的URL。

这两行代码增加了事件监听器到地图。一个监听器为了 onMouseMove，另外一个为了 onMouseDrag，但是他们都是调用函数showCoordinates:

t(map, "onMouseMove", showCoordinates);

t(map, "onMouseDrag", showCoordinates);

这些事件都传递地图点坐标到showCoordinates函数。下列代码是函数如何获得坐标并写到"info"标签：

var mp = nt;

("info").innerHTML = mp.x + ", " + mp.y;

代码

2.4加入动态地图

描述

这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图。这样的地图没有切片的 cache并被调用一个动态地图服务图层。 ArcGISDynamicMapServiceLayer表示ArcGIS

JavaScript API动态地图服务。

动态地图服务执行效率比切片地图服务慢。如果不能创建一个切片的缓存，只能使用动态地图服务。如果数据修改比更新缓存要快，可能不能创建一个缓存，或者需要实时数据的显示。

下行代码创建了地图：

var map = new ("map");

上面行中"Map"出现了三次。第一次(var map)是对象的名称，第二次 ()是类的名称,第三次("map")是将包含地图的DIV的名称。

注意动态地图服务图层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer).

可以使用Services Directory找到地图服务的URL。

注意图层使用setOpacity方法设置半透明的。 然后用地图的addLayer方法增加图层到地图。

city(0.5);

er(dynamicMapServiceLayer);

代码

Creates a map and adds an ArcGISDynamicMapServiceLayer.

Map navigation using mouse:

• Drag to pan
• SHIFT + Click to recenter
• SHIFT + Drag to zoom in
• SHIFT + CTRL + Drag to zoom out
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• Use Arrow keys to pan
• + key to zoom in a level
• - key to zoom out a level
• Double Click to Center and Zoom in

2.5加入两个动态地图

描述

这个示例表现如何加两个动态地图到一个地图。动态服务按用户缩放或平移服务器每次绘制的地图， ArcGISDynamicMapServiceLayer表示ArcGIS JavaScript API动态地图服务。不像切片地图服务，动态地图服务没有一个预先渲染的图片切片的 cache。由于这个原因，动态地图服务比切片地图服务慢，但是对显示常常修改的和实时的数据是很有用的。

图层顺序由 er方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中，USA人口普查的国家图层被放置在堪萨斯州石油和天然气图层上方。

注意图层使用setOpacity方法设置半透明的。

city(0.5);

代码

Creates a map and adds an ArcGISDynamicMapServiceLayer.

Map navigation using mouse:

• Drag to pan
• SHIFT + Click to recenter
• SHIFT + Drag to zoom in
• SHIFT + CTRL + Drag to zoom out
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• Use Arrow keys to pan
• + key to zoom in a level
• - key to zoom out a level
• Double Click to Center and Zoom in

2.6合并切片和动态图层

描述

这个示例加入一个通过 ArcGISTiledMapServiceLayer表示的 cachedArcGIS Server地图服务，和一个通过 ArcGISDynamicMapServiceLayer表示的非缓存服务到同一个地图。

图层顺序由 er方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。 在这个示例中，动态图层被在切片图层的上面。动态图层放置在切片图层上方是常用的方案，因为基础地图数据通常适合用ArcGIS Server的地图缓存而覆盖图经常需要修改和实时更新，因此不适合用缓存。

注意顶层图使用 setOpacity方法设置为半透明:

city(0.5);

代码

tiledMapServiceLayer = new

TiledMapServiceLayer("/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");

dynamicMapServiceLayer = new

DynamicMapServiceLayer("/ArcGIS/rest/services/Demographics/ESRI_Population_World/Ma

Creates a map and adds an ArcGISTiledMapServiceLayer and an ArcGISDynamicMapServiceLayer.

Map navigation using mouse:

• Drag to pan
• SHIFT + Click to recenter
• SHIFT + Drag to zoom in
• SHIFT + CTRL + Drag to zoom out
• Mouse Scroll Forward to zoom in
• Mouse Scroll Backward to zoom out
• Use Arrow keys to pan
• + key to zoom in a level
• - key to zoom out a level
• Double Click to Center and Zoom in

2.7合并两个ArcGIS Online服务

描述

这个示例创建一个地图并 ArcGIS Online增加连个图层到地图。ArcGIS Online是由ESRI体提供的一组切片地图服务，可以用来通过高质量的地图和数据增强应用。这个示例增加影像和运输层来创建一个基础地图。可以将示例作为开始点并在上面增加自己的图层。

由于ArcGIS Online图层是 cached的，因此通过 ArcGISTiledMapServiceLayer表示。 图层顺序由 er方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中，运输图层被放置在影像图层上面。

注意顶层图层通过使用 setOpacity方法被设置为轻微透明:

city(0.85);

代码

2.8显示一个信息窗口

描述

这个示例展示了在用户单击地图时如何在 InfoWindow中显示信息。信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本，字符，图片和任何通过HTML表示的事物。这个例子在信息窗口中显示地图和鼠标单击的屏幕坐标。

注意一旦地图被创建，信息窗口属性立即可用。例如，这行代码明确地设置信息窗口的大小：

(195, 75);

能够选择显示信息窗口的操作类型。在本例中，地图单击显示信息窗口。为onClick事件增加监听器:

t(map, "onClick", addPoint);

每当地图被单击，上面的代码行调用addPoint函数。该函数用setTitle 和 setContent方法来指定显示在窗口中的内容。注意传入addPoint函数的evt参数包含地图和屏幕坐标。这是很重要的因为信息窗口需要在屏幕坐标上定位。因此用来显示信息窗口的代码行传递Point：

(Point);

代码

2.9显示加载图标

描述

这个示例展示了如何能用一个动画图片显示地图正在加载。在这个示例中，图片是一个小的动画GIF。当地图第一次加载或用户缩放和平移地图时显示图片。当所有图层加载完成图片消失。

这个示例是通过events驱动的。地图的onLoad, onZoomStart和onPanStart事件加载图片显示。图层的onUpdate事件删除图标。

图片路径在HTML body里面引用。可以使用命名空间方法和来开关图片的可见性。该例使用一个计数器变量layersLoaded在隐藏图片前确认所有图层被加载。图片隐藏以后，计数器设回0.

本例的所有逻辑在init函数里，除了全局变量。

代码

"/TR/html4/">

2.10设置可见的比例

描述

ArcGIS JavaScript API的1.2版本加入更多地图如何缓存，切片和地图服务的控制。本例展示了如何限制地图能够接收切片的比例等级。如果不想用户过分的放大或缩小，即使切片存在这些极端的比例，这个方法是有用处的。

本例使用ArcGIS Online上的一个影像图层。这个服务有16等级可以使用，但是应用被设置为仅仅使用相近的8个等级。因为应用系统重点是一个国家公园，用户不需要放大太多。

在本例中，细节的等级通过lods[]数组配置，lods[]数组包含每个级别的索引数信息，分辨率和比例。如何轻松地接收所有的信息呢？最好的方式是转到服务的Services Directory页面，然后添加?f=pjson到URL。下面是一个示例:

/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer?f=pjson

能够从这里拷贝需要的详情等级。一旦配置了数组，能够在构造函数里设置地图的lods。仅仅能在创建地图的时间设置详情等级。

代码

"/TR/html4/">

2.11设置自定义范围和空间参考

描述

这个示例展示了在创建地图时如果定义一个自定义的范围和空间参考。

在 ArcGIS JavaScript API的1.0和1.1版本，任何要使用的地图服务图层都需要和地图的空间参考一致。1.2版本开始，可以使用和地图不同的空间参考的动态地图服务。虽然这提供了图层使用上的更多的弹性，但是投影会影响性能。

地图中的缓存(tiled)图层必须仍和地图的空间参考保持一致。

注意考范围通过空间参被指定为地图单位（在本例中，是米）。

代码

2.12显示地图属性

描述

本例展示了如哦读取地图和图层的属性和返回信息给用户。本例中的四个按钮允许用户接收地图属性。每个按钮调用不同的函数。

•

•

•

Get All Map Layers - 这个按钮调用getMapLayers函数，循环地图里的每个图层并在报警框中报告 layer ID，visibility和 opacity信息

Get SR - 这个按钮调用getSR函数，在报警框中报告地图的空间参考的WKID。

Get Scales for portlandParcels - 这个按钮调用函数getScales，在地图服务图层的portlandParcels切片中报告关于每个比例级别。该函数使用

fo属性，这个属性能显示 map cache里有多少个比例级别，级别是什么比例的，每个比例的分辨率是什么。

•

Get Map Width Height - 这个按钮调用函数getMapWidthHeight，在报警框里报告地图的width和 height，单位是像素。

代码

Simple example illustrating working with map and layer properties

2.13用第二个服务的范围设置地图范围

描述

本例展示了如何设置地图的范围为地图其中一个图层的范围。本例有两个图层：ArcGIS Online上的世界地图图层 ArcGISTiledMapServiceLayer和堪萨斯州的要素的图层ArcGISDynamicMapServiceLayer。本例展示了如何设置地图总是以堪萨斯州范围开始。

代码包含两个事件监听器，一个是为了每个图层。这些监听器帮助记录多少图层被加载。当图层计数是2，createMapAddLayers函数被调用。这个函数创建一个地图，设置地图范围是myService2（堪萨斯州服务）的范围：

myMap = new ("mapDiv", { extent:tent });

地图被创建以后，图层被增加。注意加载图层和增加图层不是一回事。在本例中，地图被创建前图层加载，地图创建以后图层被加到地图里。

直到所有图层被加载前要避免访问地图属性。如果代码中没有包含事件监听器，有可能在myService2完全加载前地图就会尝试去设置它的范围，这回引起意想不到的结果。

代码

This map shows two services:

• An ArcGIS Online tiled service that has a world extent.
• A second dynamic service with an extent of the State of Kansas. This is the extent used when the maps are first displayed.

Note that if you want to combine to tiled services in the same map, they must have the same tile configuration.

2.14使用图层定义显示地图

描述

本例展示如何使用图层定义来限制显示在地图上的图层信息。为了了解本例做了什么，看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的。检查地图中的图层列表。现在注意这行代码限制了显示图层为州和县。

ibleLayers([5,4,3]);

这个数据覆盖了美国，那么为什么当运行示例时仅仅Kansas周被显示？这是因为图层定义，通过SQL表达式限制数据在地图上的显示。本例中，图层定义限制了州为Kansas并且Kansas中的区县人口超过25000。

下面的代码增加图层定义到数组，然后使用 erDefinitions()方法应用这些定义。注意在数组中，定义的索引和地图中图层的索引匹配:

var layerDefs = [];

layerDefs[5] = "STATE_NAME='Kansas'";

layerDefs[4] = "STATE_NAME='Kansas' and POP2007>25000";

layerDefs[3] = "STATE_NAME='Kansas' and POP2007>25000";

erDefinitions(layerDefs);

关于建立SQL表达式的帮助资源，见ArcGIS Desktop帮助里的About building an SQL expression 。

注意不能在 ArcGISTiledMapServiceLayers上设置图层定义。这些图层使用预先渲染的图片切片的缓存。虽然切片地图服务更快，但是被限制在切片上查看地图图片。

代码

2.15动态创建图层列表

描述

本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表，checkbox能设置图层的显示或隐藏。动态创建列表的优势是所有的图层都会包含在列表中，即使服务器管理员删除或增加了图层。如果不想包含所有图层，仅仅要一个子集，见示例 Explicitly create layer list。

注意本例在建立图层列表以前检查图层是否被完全加载。

函数buildLayerList()循环访问每个图层并作为一个HTML checkbox加入列表。该函数建立了一个图层列表。默认每个图层的可见行被保存在列表中。

每当某人选择或不选checkbox，函数updateLayerVisibility()被调用。 函数循环访问列表中的每个图层，记录哪些图层是可见的数组，然后调用

ibleLayers()方法。地图服务里的地图数组可以通过这个方法被设置。

代码

This sample loads an ArcGISDynamicMapServiceLayer.

It determines the layers in the map service and presents them as checkboxes that can be used to toggle their visibility.

Layer List :

2.16明确地创建图层列表

描述

本例展示了如何确切地创建一个地图服务里的图层列表。这个列表由HTML checkboxe组成，可用用于开关图层的可见性。

函数updateLayerVisibility()包含开关图层的逻辑。函数循环访问列表里的每个图层，依赖checkbox状态图层是否应该可见，并且使用

ibleLayers()更新相应图层可见性。

如果需要创建地图服务里的所有图层的图层列表，见示例动态地创建图层列表.

代码

This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.

Layer List :

onclick='updateLayerVisibility();'/>Cities  

Rivers  

2.17放大时切换图层

描述

本例展示了如何在地图里指出显示的缓存或切片的细节等级（LODs）。当打开示例地图，可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像。这个应用程序配置这个影像仅LOD 0 - 11是可见的，即使在源缓存中存在其他的等级。直接放大最终会切换到来自ArcGIS Online CSP_Imagery_World_2D图层的详细的user-contributed影像。该应用程序配置了user-contributed影像仅仅在LODs 12 -17是可见的。

本例为地图创建了一组LODs，这组LODs合并了在多个缓存服务中的LODs。在ArcGIS JavaScript API 1.2版本以前，仅仅能是使用增加的第一个服务的LODs。 注意设置在ArcGISTiledMapServiceLayer中的displayLevels[]如何转为图层的。随后，他们被联接为一个自定义的地图的一组LODs(customLods[])。

放大时可以显示自己的一组数据，而缩小时显示ArcGIS Online或一些其他数据。要执行这个图层转换的类型，匹配的缓存切片方案是必需的。在本例中的两个服务使用ArcGIS Online的缓存切片方案。

代码

"/TR/html4/">

Zoom in to the city below to switch to user-contributed imagery from ESRI's content sharing program

2.18显示多个ArcGIS Online服务

描述

本例展示了如何使用按钮在地图里的两个不同的图层间切换。所有地图里的图层恰巧是来自ArcGIS Online的 ArcGISTiledMapServiceLayers。按钮是Dojo dijit按钮，不过也可以使用HTML按钮，radio按钮等调用相同的函数。

当应用运行时，发生下面的事情：

1

2

3

init函数被调用，创建一个地图并且通过er方法直接加入影像图层。函数也填充了图层名字的数组，但是没有创建除影像图层之外的任何图层。

用户单击按钮，调用changeMap函数。一个包含与按钮一致的图层ID的单个项目数组作为输入参数被传递给changeMap函数。

changeMap直接调用hideImageTiledLayers函数，传给hideImageTiledLayers函数同样的包含和被点击的按钮一致的图层ID的单个项目的数组。hideImageTiledLayers函数循环访问地图里的每个图层，和传入函数的图层ID不匹配的图层ID的图层被隐藏。

4

5

6

函数 当hideImageTiledLayers函数完成，changeMap函数循环访问图层数组里的每个图层，并调用函数initLayer。 记住数组仅仅包含一个图层，和被单击的按一致的图层

initLayer函数创建图层，然后增加图层到地图里。

changeMap函数显示图层(使图层可见)。

代码

3.地图配置

3.1增加一个调试控制台

描述

该示例展示了在应用中如何包含一个Dojo调试控制台。可以写信息到控制台来记录发生的事件和应用运行时设置的属性。当调试Internet Explorer浏览器的错误时这是极为有帮助的。（对Firefox，

Firebug提供了比Dojo调试控制台更强的调试能力。）

可以通过设置djConfig里面的isDebug属性为true来加入Dojo调试。必须在引用ArcGIS JavaScript API之前设置这个选项：

本例在地图加载，地图图层被增加和地图范围修改时写了一个信息。当图层被增加时，一个事件监听器用方法往控制台写了一个信息:

t(map, "onLayerAdd", function() { ("Layer added"); })

注意也可以通过toJson方法发送一组属性给控制台。这行代码便利地在控制台上写了所有范围的属性:

t(map, "onExtentChange", function(extent) { ("Extent changed : " + (())); });

代码

Add dojo console window

3.2定制导航箭头

描述

本例展示了如何为平移地图包括自定义的按钮。地图被放置在一个宽3列和高3行的HTML表格的固定宽度中心单元。表格里剩余的单元放置标签为8个主要方向的缩写的按钮。每个按钮调用地图上不同的平移函数。例如，"NW"按钮调用 erLeft。

NW

在自己的应用里，可以选择任意按钮的格式。甚至可以选择使用图片或者其他控件代替按钮。

代码

This application shows how to create custom navigation buttons.

3.3定制平移动画

描述

本例展示了当用户点击平移按钮时如何定制地图的动画。panDuration和panRate是Dojo动画属性，可以分别确定动画的duration和帧刷新的 rate。这些属性的单位都是毫秒，panDuration默认为值是250，panRate默认值是25。

在本例中可以调整这些属性来为数据和应用获得更好的样子。例如，如果地图需要一个很长的时间来加载，可以增大panDuration的值以便等待平面地图加载时看的空屏幕时间较少。相反地，如果地图加载很快，可以降低panDuration给地图更快的感觉。

代码

Configure map zoom pan animation

3.4增加标注到滑动器

描述

ArcGISTiledMapServiceLayer，这意味着图层有一个在明确的比例的预先渲染的地图切片的 cache。能够从 tileInfo属性获得图层的的缓存比例数组。这是本例中标注如何被得到。在下面的代码中，记得"lods"是"levels of detail"。

var lods = ;

for (var i=0, il=; i

labels[i] = lods[i].scale;

}

构建这个比例等级的数组后，通过esriConfig中的将比例等级数组应用为标注很容易的。

Label = {

...

labels: labels,

...

};

代码

layer = new

TiledMapServiceLayer("/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");

3.5增加没有刻度的滑动器

描述

本例展示了如果删除缩放等级滑动器的刻度线。通过设置esriConfig里的sliderLabel为null来实现：

Label = null;

代码

3.6改变滑动器方向

描述

默认情况下，缩放等级滑动器是垂直方向的。可以通过设置滑动器的高度属性为null来使滑动器改为水平方向。

= { right:"10px", bottom:"10px", width:"200px", height:null };

代码

Configure map slider's orientation

3.7改变滑动器大小

描述

如本例所示，能够通过设置esriConfig上的属性来改变缩放等级滑动器的大小。 这里高度被设置为100像素。 宽度为null表示滑动器将是垂直方向的。

= { right:"10px", top:"10px", width:null, height:"100px" };

代码

Configure map slider's position and size

3.8定制缩放动画

描述

本例展示了当用户放大或缩小地图时如何定义地图的动画。zoomDuration和zoomRate是Dojo动画属性，他们确定了动画的duration和帧刷新的rate 。这些属性单位是毫秒，zoomDuration默认值是250，zoomRate默认值是25。

在本例中，可以通过调整这些属性为数据和应用获得更好的样子。例如，如果地图需要很长的时间加载，可以增加zoomDuration以便用户在等待加载缩放地图时看到空的或扭曲的屏幕时间较短。反之，如果地图加载很快，可以降低zoomDuration值来给地图更快的感觉。

代码

Configure map zoom animation

3.9定制缩放框

描述

本例展示了单击并拖拽鼠标期间按下Shift键时如何改变显示的缩放框的默认符号。能够定义任意填充符号作esriConfig里面的zoomSymbol。如同这个代码行所示：

mbol =

{"color":[255,255,255,127],"outline":{"color":[255,0,0,255],"width":1.5,"style":"esriSLSDash"},"style":"esriSFSSolid"};

代码

Configure map zoom rectangle symbol

4.图层

4.1创建WMS图层类型的图层

描述

本例使用一个WMS端点创建了一个简单的动态图层。首先，代码声明一个新的类atesRiversUSAWMSLayer，该类继承cMapServiceLayer。

e("atesRiversUSAWMSLayer", DynamicMapServiceLayer, {

...

});

接下来定义了类的构造函数。图层的初始化和完整的范围和空间参考都被定义在构造函数中。代码也设置了图层的loaded属性为true并调用onLoad函数。

constructor: function() {

lExtent = tent = new (...);

lReference = new lReference(...);

= true;

(this);

},

最后，getImageUrl方法被执行。getImageUrl方法返回被加到地图的图片的URL。URL使用带范围，宽和高的参数的函数生成。callback函数被调用别且URL作为单一参数被传回。

getImageUrl: function(extent, width, height, callback) {

...

callback("..." + ToQuery(params));

}

为了使用这个图层，代码创建一个地图并且增加一个来自ArcGIS Online的切片图层，然后在上面放置新建的WMS图层。

function init() {

var map = new ("map");

er(new TiledMapServiceLayer("..."));

er(new atesRiversUSAWMSLayer());

}

代码

"/TR/html4/">

+

4.2创建定制的切片图层类型的图层

描述

本例展示了如何创建一个定制图层，该图层访问来自WEB服务器的地图切片。这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务。尽管本例使用的是一个ArcGIS Server 9.3服务，这仅仅是为了示范。当从9.3和更高版本时，最好使用ArcGISTileMapServiceLayer。

首先，代码声明一个继承apServiceLayer的定制的图层ndTiledMapServiceLayer。

e("ndTiledMapServiceLayer", apServiceLayer, {

...

});

接下来定义一个图层的构造函数。除空间参考和范围外，构造函数还定义了tileInfo对象。fo包含关于缓存切片大小和比例的信息。对于ArcGIS Server服务，切片信息可以在服务的缓存目录里的缓存配置文件()找到，也能通过服务目录检索这个信息。对于不是ArcGIS Server切片的Web地图，需要从服务器管理员或发布切片的单位组织获得切片的大小，比例等等信息。

constructor: function() {

lReference = new lReference(...);

lExtent = (tent = new (...));

...

fo = new fo(...);

...

(this);

}

最后getTileUrl方法被执行，按等级，方和列参数生成一个切片的URL。本例中，行数和列数需要转换为十六进制的并补0来获得正确的URL。定制图层的URL语法取决于访问的切片缓存的结构。

getTileUrl: function(level, row, col) {

return "..." +

"L" + (level, 2, '0') + "/" +

"R" + (ng(16), 8, '0') + "/" +

"C" + (ng(16), 8, '0') + "." +

"png";

}

这个函数增加了图层到地图。

function init() {

var map = new ("map");

er(new ndTiledMapServiceLayer());

}

代码

"/TR/html4/">

5.图形

5.1增加图形到地图

描述

本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体。ArcGIS JavaScript API包含工具栏。

工具栏不是一个在页面上自动地可见的用户界面组件。相反，工具栏是一个助手类，可以用来让用户在地图上描绘几何体。它保存为描绘每个几何体类型而写的代码。仅仅激活需要描绘的几何体类型。本例中，每个html按钮激活一个不同的几何体类型。这是Point按钮的代码：

Point

当用户点击这个按钮，工具栏激活点几何体。允许人们从一个下拉列表，一组radio按钮或一些其他组件中选择几何体的类型。

本例中，工具栏的"onDrawEnd"事件确保完成描绘一个要素后，要素可以在地图上看到：:

t(tb, "onDrawEnd", addGraphic);

addGraphic函数为几何体类型设置适当的符号。本例中，符号从下拉列表中提供。每个列表的项目都是在一行上的符号的定义，像这样：

LineSymbol(_SOLID, new ([255,0,0]), 1), new

([0,255,0,0.25]))">Square

阅读API Reference for symbols 来学习更多的关于定义不同符号。

代码

Point

Multipoint

Extent

Polyline

Freehand Polyline

Polygon

Freehand Polygon

Line

Deactivate

--- Select Symbol ---

--- Simple Marker Symbols ---

Default

new ([255,0,0]),

10,

1),

50,

25,

20,

1),

30,

3),

30,

3),

new

new

new

new

new

new

new

new

new

new

LineSymbol(_SOLID,

([0,255,0,0.25]))">Square

value="new

value="new

value="new

MarkerSymbol(_CROSS,

MarkerSymbol(_X,

MarkerSymbol(_DIAMOND,

new ([0,0,0]),

LineSymbol(_DASH, new ([0,0,0]), 2))">Cross, dash outline

LineSymbol(_DOT, new ([0,0,255]), 2))">X, dot outline

LineSymbol(_SOLID,

([255,255,0,0.5]))">Diamond

new ([0,0,0]), LineSymbol(_SOLID,

([255,255,0,0.5])).setAngle(15)">Diamond, 15 angle

new ([0,0,0]), LineSymbol(_SOLID,

--- Picture Marker Symbols ---

No Default

Simple Globe

Simple Globe,

25x25, 315 angle

--- Simple Line Symbols ---

Default

None

Dash

Dot

Dash

Dot

--- Cartographic Line Symbols ---

Default

10)">Solid

_ROUND, _ROUND)">Solid, round cap, round join

_SQUARE, _BEVEL)">Solid, square cap, bevel join

_ROUND, _MITER, 5)">Solid, round cap, miter (5) join

--- Simple Fill Symbols ---

Default

new ([255,0,0]), 2),

new

new

new

2), new

new

new

new

new

new

new

LineSymbol(_DASHDOT,

([255,255,0,0.25]))">None

new ([255,0,0]), LineSymbol(_DASHDOT,

([255,255,0,0.5]))">Solid

new ([255,0,0]), 2), LineSymbol(_DASHDOT,

([255,255,0,0.25]))">Horizontal

new ([255,0,0]), 2), LineSymbol(_DASHDOT,

([255,255,0,0.25]))">Forward diagonal

new ([255,0,0]), 2), LineSymbol(_DASHDOT,

([255,255,0,0.25]))">Diagonal cross

--- Picture Fill Symbols ---

No Default

([255,255,0,0.5])).setAngle(15).setOffset(0,5)">Diamond, 15 angle, 5 offset in Y

value="new eMarkerSymbol('/graphics/', 51,

25).setAngle(315).setOffset(10,0)">Simple Globe, 25x25, 315 angle, 10 offsetx

value="new

value="new

value="new

value="new

eFillSymbol('images/',

eFillSymbol('images/',

eFillSymbol('images/',

eFillSymbol('images/',

new

new

new

new

LineSymbol(_SOLID, new ('#000'), 1), 42, 42)">Sand

LineSymbol(_SOLID, new ('#000'), 1), 42, 42)">Mangrove

LineSymbol(_SOLID, new ('#000'), 1), 42, 42)">Swamp

LineSymbol(_SOLID, new ('#000'), 1), 42, 42)">Ordered 10% Stiple

Zoom Slider :

5.2选择一个范围内的点

描述

本例展示了如何使用图形显示查询结果，如何使用draw toolbar在地图上选择图形和如何修改图形符号为“高亮”。

在地图上画一个矩形区域，加亮矩形范围内的城市。这个应用统计高亮的城市个数并列出城市名称。能够画另外一个矩形来改变高亮的城市集合。

初始的在地图上见到的城市集和是应用加载时生成的查询结果。查询找到ESRI_StatesCitiesRivers_USA地图服务的Cities layer的Washington州的所有城市。城市被加到地图的GraphicsLayer。

draw toolbar帮助用户在地图上画矩形。工具栏不是一个用户界面控件；工具栏仅仅是为了显示矩形和捕获范围保存JavaScript代码的帮助类。 创建功能栏，激活绘制的类型，提供一个绘制完成时做些事情的事件监听器。在本例中，所以这些都在initToolbar函数中实现:

function initToolbar(map) {

var tb = new (map);

t(tb, "onDrawEnd", findPointsInExtent);

te();

}

当画矩形结束时回调函数findPointsInExtent被调用。这个函数循环访问地图里每个城市 graphic并确定它是否在绘制工具栏返回的范围内。如果在范围内，代码修改城市的图形为加亮符号并且增加城市信息到结果数组。结果数组被用于创建地图下面看到的城市名称列表。

注意InfoTemplate利用html在一个表格行中放置每个结果。 ()方法连结结果数组中的所有的元素为一个字符串。这个字符串被放置在

代码

Draw an Extent on the map to find all points within this extent

# of points in extent = 0

5.3使用多个图形图层

描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的。

从蓝色的城市点分隔灰色的区县多边形使图形易于管理。例如，如果仅仅想要删除城市，仅需删除有这个城市点的图形图层。如果城市和区县在同一个图形图层里，就不得不写一些额外的代码来探测城市图层并且删除它们。

注意如果单击一个重叠的图形区域（本例中是一个城市），仅仅上层的图形响应单击事件。

代码

"/TR/html4/">

cityQueryTask = new

ask("/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");

6.渲染

6.1使用唯一值渲染：Use a unique value renderer

描述

本例使用唯一值渲染器来作为美国的符号。每个州有一个字符串属性"SUB_REGION"表示它的国家的地区。ue()方法被用来重复地为每个区域定义一个颜色。

代码

"/TR/html4/">

6.2使用分级渲染

描述

本例使用一个分级渲染通过人口密度用符号表示Kansas。代码明确地增加类并为每一个定义颜色。使用ak()方法定义类，参数是在类中包含的最大值和最小值以及类使用的符号。

注意"Infinity"用于表示最后的中断没有上限。

代码

"/TR/html4/">

queryTask = new

ask("/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

6.3计算相等间隔分级

描述

本例展示了如何配置分级渲染使用一个相等间隔分类。在这个分类类型中，断点被设置为相等的距离。

可以手工添加相等距离的断点；然而，如果数据被修改了，那些断点就会是不合理的。本例自动地计算断点，因此相同的代码可以用于不同的数据集。

在本例中，断点用相同颜色的逐渐增大的圆符号。如果想要应用某种颜色渐变到断点，需要手工重定义一个颜色数组，然后在循环中给断点加入颜色。

代码

"/TR/html4/">

7 查询任务

7.1查询没有地图的数据

描述

本例展示了用户能够从没有显示服务的地图服务查询数据。大部分地图服务包含属性信息的数据集，数据集能够被查询并显示在一个简单的列或表格里。 本例按提供的州名称查询USA人口普查数据，然后显示关于州的属性信息列表。

代码创建了一个QueryTask和一个用做任务输入的 Query。注意QueryTask的构造函数需要地图服务里的图层的URL(/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5)。 在URL结尾的数字5是地图目录里的州图层的索引号。要找到你自己的地图服务的URL及它们的图层索引，使用Services Directory。

注意Geometry被设置为false因为结果不需要被显示在地图上。outFields确定州图层中的那些字段被查到。

当单击“Get Details”按钮，execute函数被调用。查询任务在被查询的图层的主要显示字段里搜索，在这个图层里面是STATE_NAME字段。这就是为什么被设置在文本框里输入的州名。如果想要输入任意SQL where子句，可以使用代替。

查询指定的所有属性能作为参数传递给QueryTask，当查询完成时连同函数一起被调用。

e(query,showResults);

查询结果作为FeatureSet被传递给showResults函数。函数循环访问所有结果的属性并使用html为查询结果构建一个列表。然后这个HTML被写到"info" div中。

代码

US state name :

7.2用图表显示查询结果

描述

本例展示了如何使用查询任务结果用去Google Chart API构建一个图表。当运行本例，点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表。

函数init创建了一个Map，一个 QueryTask和一个Query。注意QueryTask的构造函数需要地图服务里一个图层的URL

(/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3)。 URL末尾的数字3是地图目录里郡县图层的索引号。 要找到你自己的地图服务的URL及它们的图层索引，使用Services Directory

Query对象包含查询的条件，例如查询什么几何体，是否返回几何体以便它能够显示在地图上，以及哪些字段被查询。

当某人单击地图时，下面的时间监听器会察觉：

t(map, "onClick", doQuery);

上面监听器中的doQuery函数捕获地图单击的位置并将单击位置设置为ry。 这个点相交的郡县将被查询。下列代码行运行查询任务：

e(query);

当查询任务完成，另一个事件激发，调用getChart函数:

t(queryTask, "onComplete", getChart);

getChart读取最初以 FeatureSet返回的查询结果。函数解析人口统计总数，为每个人口统计组计算百分比，构建Google Chart API的URL并发送请求。这个函数也用红色的虚线轮廓象征查询的要素并在图表被创建后显示信息窗口。

代码

USA County Demographics

7.3显示多个查询结果

描述

本例展示了在重叠的多边形处理查询的一种方式。单击一个石油和天然气的字段来查看地图上的高亮显示。如果仅仅点击一个要素，能够在单击一次来查看包含一些属性的InfoWindow。如果偶然单击到重叠的要素，将看到到一个要素列表，为下一次单击显示哪个要素的信息提供帮助。

注意本例使用一个InfoTemplate来定义信息窗口的文本格式。能够通过使用语法为${attributeName}包含某一属性的实际值。例如：${PROD_GAS}。

下面的代码根据用户单击要素的个数确定处理方式：

e(query, function(fset) {

if ( === 1) {

showFeature(es[0],evt);

} else if ( !== 0) {

showFeatureSet(fset,evt);

}

});

如果用户单击一个要素，函数showFeature被调用。这个函数使用图形的 SimpleFillSymbol来强调这个要素。默认情况下信息窗口不会显示，直到用户再次单击这个加亮的要素，信息窗口才会显示。

如果用户点击重叠的要素，函数showFeatureSet被调用。这个函数循环访问每个要素并将要素名称和一个超链接加入信息窗口。用户能够使用这个要素超链接的列表选择要素。然后用户能够通过单击加亮的要素显示信息窗口。

注意查询任务的结果始终是一个FeatureSet。在本例中，结果集中唯一一个项目被传递给showFeature函数，而全部的结果集被传递给showFeatureSet函数。

代码

Click on a Petroleum Field to get more info. When field is highlighted, click field again to get infoWindow.

7.4查询，立刻打开信息窗口

描述

本例展示了当一个要素被查询时如何立刻打开一个InfoWindow。信息窗口能被用来将要素的属性格式化成用户易读的格式。

本例中，地图和查询任务都使用ESRI sample server上的服务KGS_OilGasFields_Kansas。地图也使用了来自ArcGIS Online的ESRI_Imagery_World_2D图层。 注意地图和查询任务不是必须要使用相同的服务。 例如，仅仅想保持来自ArcGIS Online的背景影像并在地图单击后显示要素。

单击地图后，下面的事件监听器调用函数executeQueryTask:

t(map, "onClick", executeQueryTask);

查询任务根据用户单击的对象（不是多边形，唯一多边形或多个重叠的多边形）提供不同地运行:

e(query, function(fset) {

if ( === 1) {

showFeature(es[0],evt);

} else if ( !== 0) {

showFeatureSet(fset,evt);

}

});

如果仅仅一个要素被单击，函数showFeature被调用。该函数格式化信息窗口，使用显示要素的图形，并使用方法立刻显示信息窗口。这覆盖了图形第二次单击显示信息窗口的默认行为。

如果多个要素被单击，函数showFeatureSet被调用。该函数循环访问每个要素并将要素名称和超链接加到信息窗口中。用户能够使用这个要素超链接的列表选择要素。如果用户单击一个高亮的要素，图形的默认行为是显示一个信息窗口。

注意查询任务的结果始终是一个FeatureSet。在本例中，结果集中唯一一个项目被传递给showFeature函数，而全部的结果集被传递给showFeatureSet函数。

代码

Click on a petrolueum field to get more info. If mulitple fields are selected then you can select the field to display.

本文标签： 地图 图层 服务 使用