ArcGIS JavaScript API 示例教程大全：地图应用开发

版权申诉

12 浏览量更新于2024-06-22 收藏 734KB PDF 举报

GIS JavaScript API学习教程大全本学习教程大全的主要内容是关于ArcGIS JavaScript API的使用方法和示例代码，旨在帮助开发者快速学习和掌握GIS JavaScript API的各种功能。 GIS JavaScript API是ESRI公司开发的一款基于JavaScript的GIS开发平台，提供了强大的GIS功能，可以帮助开发者快速构建GIS应用程序。通过学习本教程大全，开发者可以学习如何使用ArcGIS JavaScript API来创建交互式的GIS应用程序。下面是本学习教程大全的主要知识点： 1. GIS JavaScript API概述 GIS JavaScript API是一款基于JavaScript的GIS开发平台，提供了强大的GIS功能，可以帮助开发者快速构建GIS应用程序。通过使用ArcGIS JavaScript API，开发者可以创建交互式的GIS应用程序，例如在线地图、空间分析、数据可视化等。 2. 使用ArcGIS JavaScript API创建地图使用ArcGIS JavaScript API可以创建交互式的地图，例如加入一个地图、在地图上添加图层、在地图上添加标注等。开发者可以通过学习本教程大全，学习如何使用ArcGIS JavaScript API创建交互式的地图。 3. ArcGISServer地图服务 ArcGISServer地图服务是一种缓存的服务，提供了预先渲染的切片，能够提高地图的加载速度。开发者可以使用ArcGISServer地图服务来创建交互式的地图，例如加入一个地图、在地图上添加图层等。 4. 使用ServicesDirectory找到地图服务的URL 开发者可以使用ServicesDirectory来找到地图服务的URL，例如http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer等。 5. 加入一个地图示例代码开发者可以通过学习本教程大全，学习如何使用ArcGIS JavaScript API加入一个地图，例如使用ap.addLayer(tiledMapServiceLayer)等。 6. 创建交互式GIS应用程序通过学习本教程大全，开发者可以学习如何使用ArcGIS JavaScript API创建交互式的GIS应用程序，例如在线地图、空间分析、数据可视化等。 7. GIS JavaScript API的应用场景 GIS JavaScript API可以应用于各种场景，例如在线地图、空间分析、数据可视化、灾害应急等。本学习教程大全旨在帮助开发者快速学习和掌握GIS JavaScript API的各种功能，提供了详细的示例代码和技术指导，能够帮助开发者快速构建交互式的GIS应用程序。

例

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

注

行

代码限制了显示图层为州和县。

namicMapServiceLayer.setVisibleLayers([5,4,3]);

个

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

县

人口超过 25000。

面

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

r layerDefs = [];

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

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

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

namicMapServiceLayer.setLayerDefinitions(layerDefs);

于

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

意

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

码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Create Map with Custom ArcGISDynamicMapServiceLayer Layer Definitions</title>

ref="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

function init() {

var startExtent = new esri.geometry.Extent(-103, 36.8, -94, 40.2, new esri.SpatialReference({wkid:4326}) );

var map = new esri.Map("map", {extent:startExtent});

var tiledMapServiceLayer = n

esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");

map.addLayer(tiledMapServiceLayer);

//Use the ImageParameters to set map service layer definitions and map service visible layers before adding to the client map.

var imageParameters = new esri.layers.ImageParameters();

//layer.setLayerDefinitions takes an array. The index of the array corresponds to the layer id.

//In the sample below I add an element in the array at 3,4, and 5.

//Those array elements correspond to the layer id within the remote ArcGISDynamicMapServiceLayer

var layerDefs = [];

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

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

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

imageParameters.layerDefinitions = layerDefs;

//I want layers 5,4, and 3 to be visible

imageParameters.visibleLayers = [5,4,3];

imageParameters.transparent = true;

//construct ArcGISDynamicMapServiceLayer with imageParameters from above

var dynamicMapServiceLayer = n

esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI

Census

USA/MapSer

r", {"imageParameters":imageParameters});

map.addLayer(dynamicMapServiceLayer);

}

dojo.addOnLoad(init);

</script>

</head>

</body>

</html>

15 动态创建图层列表

描

述

例

循环地图服务里的所有图层并增加每个图层到一个带 checkbox 的列表，checkbox 能设置图层的显示或隐藏。动态创建列表的优势是所有的图层都会包含在列表中，即使服务器管理员删

除

增

加了图层。如果不想包含所有图层，仅仅要一个子集，见示例 Explicitly create layer list。

意

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

数

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

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

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

码

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Dynamically Create Map Service Layer List</title>

ref="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

var layer, map, visible = [];

function init() {

map = new esri.Map("map");

layer = n

esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI

StatesCitiesRivers

/MapServer");

if (layer.loaded) {

buildLayerList(layer);

}

else {

dojo.connect(layer, "onLoad", buildLayerList);

}

function buildLayerList(layer) {

var infos = layer.layerInfos, info;

var items = [];

for (var i=0, il=infos.length; i<il; i++) {

info = infos[i];

if (info.defaultVisibility) {

visible.push(info.id);

}

items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id +

onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

}

dojo.byId("layer_list").innerHTML = items.join();

layer.setVisibleLayers(visible);

map.addLayer(layer);

}

function updateLayerVisibility() {

var inputs = dojo.query(".list_item"), input;

visible = [];

for (var i=0, il=inputs.length; i<il; i++) {

if (inputs[i].checked) {

visible.push(inputs[i].id);

}

layer.setVisibleLayers(visible);

}

dojo.addOnLoad(init);

</script>

</head>

<body>

This sample loads an ArcGISDynamicMapServiceLayer.<br />

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

<br />

Layer List : <span id="layer_list"></span><br />

<br />

</body>

</html>

16 明确地创建图层列表

描

述

例

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

数

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

cGISDynamicMapServiceLayer.setVisibleLayers()更新相应图层可见性。

果

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

码

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Explicitly Create Map Service Layer List</title>

ref="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

var layer, map, visible = [];

function init() {

map = new esri.Map("map");

//Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.

var imageParameters = new esri.layers.ImageParameters();

imageParameters.visibleLayers = [0,1,2];

layer = n

esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI

StatesCitiesRivers

/MapServer", {"imageParameters":imageParameters});

map.addLayer(layer);

}

function updateLayerVisibility() {

var inputs = dojo.query(".list_item"), input;

//in this application layer 2 is always on.

visible = [2];

for (var i=0, il=inputs.length; i<il; i++) {

if (inputs[i].checked) {

visible.push(inputs[i].id);

}

layer.setVisibleLayers(visible);

}

dojo.addOnLoad(init);

</script>

</head>

<body>

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

<br />

Layer List : <span id="layer_list"><input type='checkbox' class='list_item' checked='checked' id='0' value

onclick='updateLayerVisibility();'/>Cities  

<input type='checkbox' class='list_item' checked='checked' id='1' value=1 onclick='updateLayerVisibility();'/>Rivers  

</span><br />

<br />

</body>

</html>

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。注意设置在

cGISTiledMapServiceLayer 中的 displayLevels[]如何转为图层的 tileInfo.lods。随后，他们被联接为一个自定义的地图的一组 LODs(customLods[])。

大

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

存

片

方案。

码

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Fused Levels</title>

ref="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

dojo.require("esri.layers.agstiled");

var customLods = [];

var loadCount = 0;

function init() {

//ESRI imagery from ArcGIS Online

esriImageryLayer = new esri.layers.ArcGISTiledMapServiceLayer

("http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer",

{displayLevels:[0,1,2,3,4,5,6,7,8,9,10,11]}); //Levels at which this layer will be visible

if (esriImageryLayer.loaded) {

addLods(esriImageryLayer);

} else {

dojo.connect(esriImageryLayer, "onLoad", addLods);

}

//Content Sharing Program imagery from ArcGIS Online

cspImageryLayer = new esri.layers.ArcGISTiledMapServiceLayer

("http://services.arcgisonline.com/ArcGIS/rest/services/CSP_Imagery_World_2D/MapServer",

{displayLevels:[12,13,14,15,16,17]}); //Levels at which this layer will be visible

if (cspImageryLayer.loaded) {

addLods(cspImageryLayer);

} else {

dojo.connect(cspImageryLayer, "onLoad", addLods);

}

//Fill array with levels of detail

function addLods(lyr) {

customLods = customLods.concat(lyr.tileInfo.lods);

loadCount++;

if (loadCount === 2) {

initMap();

}

//Create the map and use the custom levels of detail

function initMap() {

var map = new esri.Map("map", {

lods: customLods,

extent: new esri.geometry.Extent(-82.05, 34.87, -80.05, 34.99, new esri.SpatialReference({wkid:4326}))

});

dojo.connect(map,"onExtentChange", changeScale);

map.addLayer(esriImageryLayer);

map.addLayer(cspImageryLayer);

}

//Report which layer is being shown

function changeScale(extent, delta, outLevelChange, outLod) {

dojo.byId("scale").innerHTML = "LOD Level: <i>" + outLod.level;

if (outLod.level < 12){

dojo.byId("visibleLayer").innerHTML = "Layer: <i>ESRI_Imagery_World_2D</i>";

}

else{

dojo.byId("visibleLayer").innerHTML = "Layer: <i>CSP_Imagery_World_2D</i>";

}

dojo.addOnLoad(init);

</script>

</head>

<body>

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

</body>

</html>

剩余138页未读，继续阅读

梅里雪山GIS

粉丝: 2w+
资源: 499

ArcGIS JavaScript API 示例教程大全：地图应用开发

ArcGIS JavaScript API示例教程：3.x与4.x版本对比

Silverlight API教程：紧跟GIS与RIA技术潮流

构建Web GIS应用：ArcGIS JavaScript API深度定制

学习教程大全：Gis javaScript API：2022年.pdf

学习教程大全：GIS for Silverlight：2023年.pdf

学习教程大全：gis符号化：2023年.pdf

学习教程大全：gis Python：2023年.pdf

学习教程大全：gis利用C#切图实现：2023年.pdf

学习教程大全：gis python 脚本大全：2022年.pdf

学习教程大全：gis python 脚本：2022年.pdf

最新资源