ArcGis-javaScript最全的中文API.docx

ArcGis-for-javaScript最全中文API1.示例概述这些示例展示了如何使用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地图map.addLayer(tiledMapServiceLayer);代码 Create Map dojo.require(esri.map); function init() var map = new esri.Map(map); var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer); map.addLayer(tiledMapServiceLayer); dojo.addOnLoad(init); 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 - key to zoom out a level Double Click to Center and Zoom in 2.2加入地图并显示当前地图范围描述这个示例使用Map.extent property属性接收地图范围的左下角和右上角坐标 书签。使用下列行创建地图:var map = new esri.Map(map);上面行中Map出现了三次。第一次(var map)是对象的名称，第二次 (esri.Map)是类的名称,第三次(map)是将包含地图的DIV的名称。这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个 cachedArcGIS Server地图服务，但是也可以使用 ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。注意切片地图服务层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地图服务的URL。 下行代码为地图的showExtent事件增加了一个事件监听器： dojo.connect(map, onExtentChange, showExtent);这意味着如果地图的范围被修改，回调函数showExtent将被调用。showExtent函数构建一个包含地图的两个角的坐标的字符串。Lower left corner = (extent.xmin, extent.ymin)Upper right corner = (extent.xmax, extent.ymax)这两个角是需要知道用于地图的边界框的。showExtent函数的最后一行通过增加完整的字符串到info DIV在页面上显示坐标:dojo.byId(info).innerHTML = s;代码 Create Map dojo.require(esri.map); function init() var map = new esri.Map(map); var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer); map.addLayer(tiledMapServiceLayer); dojo.connect(map, onExtentChange, showExtent); function showExtent(extent) var s = ; s = XMin: + extent.xmin +   +YMin: + extent.ymin +   +XMax: + extent.xmax +   +YMax: + extent.ymax; dojo.byId(info).innerHTML = s; dojo.addOnLoad(init); 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 esri.Map(map);上面行中Map出现了三次。第一次(var map)是对象的名称，第二次 (esri.Map)是类的名称,第三次(map)是将包含地图的DIV的名称。这个示例加入一个ArcGISTiledMapServiceLayer到底图，表示一个 cachedArcGIS Server地图服务，但是也可以使用 ArcGISDynamicMapServiceLayer。这种方式接收的地图的范围是相同的。注意切片地图服务层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services Directory找到地图服务的URL。这两行代码增加了事件监听器到地图。一个监听器为了 onMouseMove，另外一个为了 onMouseDrag，但是他们都是调用函数showCoordinates: dojo.connect(map, onMouseMove, showCoordinates);dojo.connect(map, onMouseDrag, showCoordinates);这些事件都传递地图点坐标到showCoordinates函数。下列代码是函数如何获得坐标并写到info标签：var mp = evt.mapPoint;dojo.byId(info).innerHTML = mp.x + , + mp.y;代码 Create Map Display Mouse Coordinates dojo.require(esri.map); function init() var map = new esri.Map(map); dojo.connect(map, onLoad, function() /after map loads, connect to listen to mouse move & drag events dojo.connect(map, onMouseMove, showCoordinates); dojo.connect(map, onMouseDrag, showCoordinates); ); var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer); map.addLayer(tiledMapServiceLayer); function showCoordinates(evt) /get mapPoint from event var mp = evt.mapPoint; /display mouse coordinates dojo.byId(info).innerHTML = mp.x + , + mp.y; dojo.addOnLoad(init); 2.4加入动态地图描述这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图。这样的地图没有切片的 cache并被调用一个动态地图服务图层。 ArcGISDynamicMapServiceLayer表示ArcGIS JavaScript API动态地图服务。 动态地图服务执行效率比切片地图服务慢。如果不能创建一个切片的缓存，只能使用动态地图服务。如果数据修改比更新缓存要快，可能不能创建一个缓存，或者需要实时数据的显示。下行代码创建了地图：var map = new esri.Map(map);上面行中Map出现了三次。第一次(var map)是对象的名称，第二次 (esri.Map)是类的名称,第三次(map)是将包含地图的DIV的名称。注意动态地图服务图层的构造函数需要服务的REST端点的URL(/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer). 可以使用Services Directory找到地图服务的URL。注意图层使用setOpacity方法设置半透明的。 然后用地图的addLayer方法增加图层到地图。dynamicMapServiceLayer.setOpacity(0.5);map.addLayer(dynamicMapServiceLayer);代码 Create Map dojo.require(esri.map); function init() var map = new esri.Map(map); var imageParameters = new esri.layers.ImageParameters(); imageParameters.format = png24; /set the image type to PNG24, note default is PNG8. /Takes a URL to a non cached map service. var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer, opacity:0.5, imageParameters:imageParameters); map.addLayer(dynamicMapServiceLayer); dojo.addOnLoad(init); 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。由于这个原因，动态地图服务比切片地图服务慢，但是对显示常常修改的和实时的数据是很有用的。图层顺序由 map.addLayer方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中，USA人口普查的国家图层被放置在堪萨斯州石油和天然气图层上方。 注意图层使用setOpacity方法设置半透明的。dynlayer2.setOpacity(0.5);代码 Create Map dojo.require(esri.map); function init() var map = new esri.Map(map); /Takes a URL to a non cached map service. var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer); map.addLayer(dynamicMapServiceLayer); var dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer,opacity:0.5); map.addLayer(dynlayer2); dojo.addOnLoad(init); 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表示的非缓存服务到同一个地图。 图层顺序由 map.addLayer方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。 在这个示例中，动态图层被在切片图层的上面。动态图层放置在切片图层上方是常用的方案，因为基础地图数据通常适合用ArcGIS Server的地图缓存而覆盖图经常需要修改和实时更新，因此不适合用缓存。注意顶层图使用 setOpacity方法设置为半透明:dynamicMapServiceLayer.setOpacity(0.5);代码 Create Map import /jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css; dojo.require(esri.map); function init() var map = new esri.Map(map); /Takes a URL to a map in a map service. var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer); map.addLayer(tiledMapServiceLayer); /Takes a URL to a non cached map service. var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer, opacity:0.5); map.addLayer(dynamicMapServiceLayer); dojo.addOnLoad(init); 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表示。 图层顺序由 map.addLayer方法调用的顺序决定。第一个被增加的图层被放置在下方。后来的图层放置在上面。在这个示例中，运输图层被放置在影像图层上面。注意顶层图层通过使用 setOpacity方法被设置为轻微透明:dynamicMapServiceLayer.setOpacity(0.85);代码 ArcGIS Online tiled maps. dojo.require(esri.map); function init() var map = new esri.Map(mapDiv); var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer); map.addLayer(imageryPrime); var transportationReference = new esri.layers.ArcGISTiledMapServiceLayer(/ArcGIS/rest/services/Reference/ESRI_BoundariesPlaces_World_2D/MapServer,opacity:0.85); map.addLayer(transportationReference); dojo.addOnLoad(init); Creates a map and adds two ArcGIS Online map service layers via ArcGISTiledMapServiceLayer. 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.8显示一个信息窗口描述这个示例展示了在用户单击地图时如何在 InfoWindow中显示信息。信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本，字符，图片和任何通过HTML表示的事物。这个例子在信息窗口中显示地图和鼠标单击的屏幕坐标。 注意一旦地图被创建，信息窗口属性立即可用。例如，这行代码明确地设置信息窗口的大小：Window.resize(195, 75);能够选择显示信息窗口的操作类型。在本例中，地图单击显示信息窗口。为onClick事件增加监听器:dojo.connect(map, onClick, addPoint);每当地图被单击，上面的代码行调用addPoint函数。该函数用setTitle 和 setContent方法来指定显示在窗口中的内容。注意传入addPoint函数的evt参数包含地图和屏幕坐标。这是很重要的因为信息窗口需要在屏幕坐标上定位。因此用来显示信息窗口的代码行传递evt.screenPoint： Window.show(evt.screenPoint);代码 Non graphic info window