ArcGIS JavaScript API 示例与地图服务详解

版权申诉

arcgis

javascript

5星 · 超过95%的资源 127 浏览量更新于2024-07-02 4 收藏 729KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"ArcGis-for-javaScript最全中文API.pdf 是一份详细的文档，涵盖了ArcGIS JavaScript API的多个方面，旨在帮助用户理解和使用这个API来开发GIS应用。这份API文档包含丰富的示例，通过在线演示、功能描述和源代码，展示了如何利用API的各种功能。示例按照复杂程度分为一星、二星和三星，适合不同程度的学习者。示例中的服务来源于ESRI的样本服务器（sampleserver1和sampleserver2）以及ArcGIS Online，允许用户在自己的应用中实践和学习API。地图是ArcGIS JavaScript API的核心部分。在文档中，`2. 地图`章节介绍了如何添加地图到应用中。特别是`2.1 加入一个地图`的部分，讲解了如何加载ArcGISServer上的缓存地图。缓存地图由预渲染的切片组成，以提高性能，它们通常通过`ArcGISTiledMapServiceLayer`来展示。如果地图服务未缓存，可以使用`ArcGISDynamicMapServiceLayer`。如果不确定服务是否缓存，可以通过`ServicesDirectory`工具来查找。以下是一个简单的代码示例，展示如何将ArcGISServer的地图服务添加到地图中： ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7"/> <title>CreateMap</title>  <script src="http://js.arcgis.com/4.x/"></script> <script> require([ "esri/map", "esri/layers/TiledMapServiceLayer", "dojo/domReady!" ], function(Map, TiledMapServiceLayer) { var tiledMapServiceLayer = new TiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"); var map = new Map("mapDiv", { basemap: "gray", center: [-98.57, 39.09], // 长度经度，纬度高度 zoom: 4 }); map.addLayer(tiledMapServiceLayer); // 添加地图服务层到地图 }); </script> </head> <body> <div id="mapDiv" style="width: 100%; height: 500px;"></div> </body> </html> ``` 在这个例子中，我们首先引入了ArcGIS JavaScript API，并使用`require`加载了必要的模块。然后创建了一个新的`TiledMapServiceLayer`实例，指定了地图服务的URL。接着，我们创建了一个`Map`对象，设置了基本地图、中心位置和缩放级别。最后，将地图服务层添加到地图实例中，完成地图的加载。通过这种方式，开发者可以轻松地在Web应用中集成ArcGIS地图服务，构建交互式的GIS应用程序。这个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 示例与地图服务详解

ArcGis-for-javaScript最全中文API.docx

ArcGis-javaScript最全的中文API.docx

ArcGis-for-javaScript最全中文API

arcgis-for-javascript最全中文api.pdf

ArcGIS API for JavaScript 中文教程

arcgis for javascript api 4.x 下载

arcgis api for javascript vue

arcgis api for javascript 3.17版本函数库下载

ArcGIS API for JavaScript出现中文乱码怎么办

arcgis api for javascript下载

arcgis api for javascript 4.17下载

terraformer-arcgis-parser

ArcGIS API for JavaScript

arcgis api for javascript安装

arcgis API for JS

arcgis api for javascript proxy 代理配置 .net

arcgis api for javascript书籍

vue arcgis api for javascript

arcgis api for javascript 引用

arcgis api for javascript 4.x

会员权益专享

最新资源