ArcGIS JavaScript API 指南：2022年版

版权申诉

8 浏览量更新于2024-07-02 收藏 729KB PDF 举报

"这是一个关于ArcGIS JavaScript API的全面学习教程，包含多个示例，适用于2022年的开发者。教程详细讲解了如何利用API的各种功能，包括地图的添加和管理，适用于初学者和进阶者。" ArcGIS JavaScript API是Esri提供的一种用于构建交互式地图应用程序的强大的开发工具。它允许开发者在网页中嵌入地图，处理地理数据，并实现各种地图操作。此教程集成了大量的示例，覆盖了从基础到高级的各种功能，旨在帮助开发者熟练掌握API的使用。 1. 示例和复杂度分类教程中的示例根据难度分为一星、二星和三星，适合不同程度的用户。对于初学者，建议从一星示例开始，逐步了解和掌握API的基础功能。这些示例不仅提供了在线演示，还有详细的代码解释，便于理解和实践。通过扩展和组合示例，开发者可以构建自己的应用起点。 2. 地图的加入与类型 - **加入地图服务**：示例中演示了如何添加ArcGISServer的地图服务，这通常使用`ArcGISTiledMapServiceLayer`来实现，因为这类地图是预渲染并缓存的，能提高性能。如果地图服务没有缓存，可以使用`ArcGISDynamicMapServiceLayer`。 - **地图服务的URL**：地图服务的URL是必不可少的，可以通过Esri的ServicesDirectory查找。示例中使用的URL是`http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer`，开发者应根据自己的需求替换为相应的服务地址。 3. 加载地图的代码示例在HTML文档中，通过JavaScript将地图服务层添加到地图实例（`map`）中，基本语法如下： ```javascript var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("地图服务URL"); map.addLayer(tiledMapServiceLayer); ``` 这里的`esri.layers.ArcGISTiledMapServiceLayer`是API中创建缓存地图服务层的对象，而`map.addLayer`方法将服务层添加到地图显示。 4. 服务来源与使用条款示例中使用的地图服务来自ESRI的示例服务器（sampleserver1和sampleserver2）以及ArcGIS Online。在学习过程中，可以利用这些公开服务，但实际应用时需注意ArcGIS Online的使用条款。 5. 学习资源与扩展教程还提供了视频教程，帮助用户更好地理解和运行示例代码，这对于学习API的使用非常有帮助。同时，鼓励开发者实践和实验，以深化对API的理解和应用。通过这个教程，开发者能够深入学习和掌握ArcGIS JavaScript API，从而构建功能丰富的地图应用程序，包括地图的加载、图层管理、地理数据操作以及交互功能的实现等。无论你是地图开发的新手还是经验丰富的开发者，这个教程都能提供有价值的指导。

例

展示如何使用图层定义来限制显示在地图上的图层信息。为了了解本例做了什么，看看用于这个地图的 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>

剩余137页未读，继续阅读

梅里雪山GIS

粉丝: 2w+
资源: 500

ArcGIS JavaScript API 指南：2022年版

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

学习教程大全：gis数据库指南：2022年.pdf

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

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

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

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

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

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

学习教程大全：gis自动化出图：2022年.pdf

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

最新资源