javascript 一、API 的基础

一、API 的基础

您可能正在阅读这本书，因为您希望使用 ArcGIS JavaScript API 将空间功能集成到您的网络应用中，并使其更加令人惊叹，或者您可能希望很快成为网络地图数据科学家。不管是什么，我们都支持你。但是你不认为我们在进行实际项目之前需要一些基础工作吗？这一章就是关于这一点的——为本书后面使用的概念打下坚实的基础。这一章的内容设计多样，涵盖了以下主题的大量内容:

使用 API 编写您的第一个映射应用
复习坐标几何、范围和空间参考系统
介绍 dojo 和 AMD 编码模式
了解 ArcGIS Server 和 REST 应用编程接口
建立开发环境

设置开发环境

这本书是一本举例的书，我们将会用我们将要开发的应用来解释这些概念。因此，在本章开始时，让开发环境启动并运行是非常重要的。以下部分中提到的大多数环境只是我们的偏好，可能并不是实现本书中提供的代码示例所必需的。所有代码示例都是针对在基于 Windows 的操作系统和名为括号的集成开发环境 ( IDE ) 中运行的。如果您对操作系统和集成开发环境有不同的选择，我们欢迎您在您最熟悉的环境中开发。

浏览器、网络服务器和 IDE

要开发、部署和执行任何网络应用，我们需要以下组件:

网络浏览器
Web 服务器
集成开发环境

网页浏览器

我们在整本书中都使用了谷歌 Chrome，因为它提供了一些很棒的开发工具和 HTML 检查工具。我们也认为 Mozilla 是一个很好的开发浏览器。

网络服务器

本书中开发的应用是使用 IIS Express 托管的。IIS Express 是一个轻量级的网络服务器，主要用于托管。NET 网络应用。尽管本书中的所有项目都是使用纯 HTML、CSS 和 JavaScript 开发的，但我们将使用 Esri。NET 资源代理来访问 ArcGIS online 安全内容并避免跨域问题。

读者可以通过安装网络平台安装程序或直接从微软下载页面安装 IIS Express，如以下步骤所示:

要使用网络平台安装程序安装 IIS Express，请访问https://www.microsoft.com/web/downloads/platform.aspx下载网络平台安装程序。
Once downloaded, search for IIS Express in the search text. The search results will display the IIS Express application. Click on the Add button against the IIS Express application name, and then click on the Install button at the bottom of the page as shown in the following screenshot:
从网络平台安装程序安装 IIS Express 确保我们可以根据直接下载链接获得 IIS Express 的最新版本，而我们可能无法提供最新版本的链接。写这本书的时候，最新的 IIS 快递直接下载链接是在https://www.microsoft.com/en-us/download/details.aspx?找到的 id=34679 。
安装 IIS 后，您可以在Program Files文件夹内的IIS Express文件夹中找到可执行文件。默认位置通常是C:\Program Files\IIS Express。
我们将在每个项目中提供一个可执行批处理(.bat)文件，帮助启动网络服务器并在指定端口托管项目。
你可以在我们为这本书开发的每个项目的可执行文件中找到下面一行代码:

js "C:\Program Files\IIS Express\iisexpress.exe" /path:<app location> /port:9098
前一行将在端口9098托管应用。因此，要访问该应用，您只需使用网址— http://localhost:9098/。

这里

开发 JavaScript 代码的 IDE 选择范围很广，有经验的开发人员已经知道他们需要使用什么。我们在整本书中都使用了括号，这是我们首选的集成开发环境。

设置 ArcGIS 开发者帐户

对于书中的一些练习，您将需要一个 ArcGIS Developer 帐户。这也是您探索 ESRI 为开发人员提供的各种功能的机会。要设置开发者帐户，只需在https://developers.arcgis.com/en/sign-up/免费注册即可。

你好，地图–启动代码

如果你和我们一样，你会很可能想马上给你的第一张地图编码。这就是了。尝试将这些代码行添加到括号集成开发环境中的一个新的 HTML 文件中。也可以从代码库中下载名为B04959_01_CODE01,的 HTML 源代码，双击 HTML 文件运行。

Hello, Map – the jump-start code

在观察前面几行代码时，您可能已经观察到了这两件事:

我们不需要任何许可、认证或密钥来运行这段代码。换句话说，API 是免费的。你只需要使用 CDN 链接。
We will be seeing this beautiful cartographic map in our browser as shown in the following screenshot:
We encourage you to zoom or pan to location you want to see your map. If you haven't figured how to zoom/pan the map, we'll deal with it right away:

左键拖动或按任意箭头键会导致平移，并且细节级别不会改变。

移动 +左键拖动、鼠标滚动、双击或点击地图上的 + 或 - 按钮会导致缩放和显示的细节级别发生变化。

注

还有其他方法可以实现缩放/平移功能。这里提到的只是初步了解。

理解跳转代码

让我们试着理解刚才看到的代码。这段代码中有三个概念我们想解释一下。第一个是关于我们用来下载 ArcGIS JavaScript API (v 3.15)及其相关样式表的 API 或 内容交付网络 ( CDN )的参考链接。第二个概念试图向您介绍所采用的编码模式，它被称为异步模块化定义 ( AMD )模式。这是 dojo 的最新版本(v1.10)使用的。下一个概念是关于当您运行代码时在浏览器中看到的内容——地图和我们提供给它的参数。

API 引用链接

首先是第一件事。我们需要引用 API 来开发一个基于 ArcGIS JavaScript API 的应用。Esri 是拥有该 API 的组织，但该 API 是免费的，可供公众使用。截至 2016 年 3 月，API 的最新版本是 3.15，相应的 dojo toolkit 版本是 1.10。

以下库可能是您使用 ArcGIS JavaScript API 功能以及许多 dojo 工具包(如core dojo、dijit、dgrid等)时唯一需要参考的库:

<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

<script src="http://js.arcgis.com/3.15/"></script>

请参考此链接，了解 ArcGIS JavaScript API 的完整文档—https://developers.arcgis.com/javascript/jsapi/。

当您访问前面的网址时，您将看到一个提供完整的 API 文档的网页，其中有多个选项卡，如 API 参考、指南、示例代码、论坛和主页。

类型

下载示例代码

你可以从你在http://www.packtpub.com的账户下载这本书的示例代码文件。如果您在其他地方购买了这本书，您可以访问http://www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。

您可以按照以下步骤下载代码文件:

使用您的电子邮件地址和密码登录或注册我们的网站。
将鼠标指针悬停在顶部的 SUPPORT 选项卡上。
点击代码下载&勘误表。
在搜索框中输入图书名称。
选择要下载代码文件的书籍。
从您购买这本书的下拉菜单中选择。
点击代码下载。

您也可以通过点击图书网页上的“代码文件”按钮来下载代码文件。可以通过在搜索框中输入图书名称来访问此页面。请注意，您需要登录您的 Packt 帐户。

下载文件后，请确保使用最新版本的解压缩文件夹:

视窗系统的 WinRAR / 7-Zip
zipeg/izp/un ARX for MAC
适用于 Linux 的 7-Zip / PeaZip

API 引用列出了 API 下所有可用的模块，作为每个模块可用的详细信息、属性、方法和事件。左窗格将大多数模块分组，以便于参考。例如，名为 esri/layers 的分组有多个继承自它的模块。下面的截图给出了继承自ESRI/图层的不同模块的分组方式:

The API reference link

指南部分提供了重要主题的详细说明，如使用查询任务、使用 ArcGIS Online 小部件以及使用符号和渲染器。以下屏幕截图显示了设置地图范围的详细指南:

The API reference link

示例代码选项卡是另一个有用的部分，有数百个示例应用，用于演示应用编程接口中的不同概念。这些示例代码最棒的部分是它们附带了沙盒工具，您可以通过修改它来玩代码。

论坛选项卡将您重定向到以下网址—https://geonet . ESRI . com/community/developers/web-developers/ArcGIS-API-for-JavaScript。

GeoNet 社区论坛是一个很好的地方来问你的问题，并分享你对像你这样的开发人员提出的问题的解决方案。

由于它与 dojo 框架的紧密集成，需要 dojo 工具包的工作知识，并且可以在http://dojotoolkit.org/reference-guide/1.10/访问它的参考文档。

AMD 的编码模式

如果您已经观察了代码结构，它可能如下所示:

The AMD pattern of coding

如果您不熟悉这种 JavaScript 编码模式，它被称为 AMD 编码模式，用于 JavaScript 的 ArcGIS API 强调使用这种编码模式。在最初的章节中，我们将介绍很多关于这方面的内容，以便熟悉 dojo 和 AMD。从代码结构中，您可能已经理解代码需要某些模块，加载这些模块的函数要求它们的顺序相同。我们案例中的一些模块是 Esri 模块(esri/..)和 dojo 模块(dojo/..)。如果你想知道你是否可以要求自定义模块，答案绝对是肯定的，这将是我们本书练习的主要部分。

ESRI/地图模块

代码中突出显示的一行构成了我们跳转代码的关键:

 var map = new Map("mapDiv", {
 basemap: "national-geographic"
 });

map模块接受两个参数。第一个参数是div容器，它将包含map对象。第二个参数是一个可选对象，它接受许多可用于设置地图属性的属性。

在我们的 jumpstart 代码中，可选对象中的basemap属性将 Esri 提供的名为national-geographic的底图代码之一设置为显示为背景地图。我们恳请您尝试使用 Esri 提供的其他底图，例如:

卫星
深灰色
浅灰色
混合物
地形图

设置初始地图范围

当应用打开时，您可能希望将其缩放到特定的感兴趣区域，而不是首先以世界比例显示地图，然后缩放到您想要查看的区域。为了实现这一点，地图模块提供了一个属性来设置它的初始范围，并且还可以在任何时候以编程方式更改它的范围。

在此之前，让我们看看什么是地图上下文中的范围。

注

范围是包围地图上感兴趣区域的最小边界矩形。

复习一些坐标几何

要理解的范围，掌握坐标几何会有所帮助。出于我们的目的，黄色线段将被称为折线。蓝线代表多边形(在我们的例子中是矩形):

Brushing up some coordinate geometry

现在，试着观察上图和下图的坐标差异:

Brushing up some coordinate geometry

以下是关于前面图表的一些注释:

该点仅由一对坐标表示；图 1 中的(2，2)和图 2 中的(-1，-1)
折线由一系列坐标表示
多边形也由一系列坐标表示，类似于折线

你可能已经发现，除了坐标和轴，两个图形的形状是相同的。这可能意味着两件事:

该图将其 x 位置移动了-3 个单位，其 y 位置移动了-3 个单位
或者这可能意味着原点将其 x 和 y 位置移动了-3 个单位

第二种可能性对我们来说更重要的是理解，因为它意味着图的实际位置没有改变，只有原点或坐标轴改变了位置。因此，参考坐标轴，图表形状(矩形、点和线)的坐标也发生了变化。

注

基于参考坐标系，同一形状可以有不同的坐标。这种坐标系在地理信息系统中被称为空间参考。

小考时间！

让我们测试一下我们的知识。尝试解决以下问题:

Q1。如果原点(矩形的左下角)是(100000，100000)，那么这个点(带有三角形符号)的坐标是多少？

Q2。由于多边形和多段线都是由一系列坐标表示的，那么在给定一系列坐标的情况下，我们如何判断形状是多边形还是多段线呢？

Q3。表示一个矩形需要多少个坐标？

考虑一下，我们很快就会给你答案。

空间参考系统

将数字屏幕上的世界或世界的一部分显示为地图时，就像我们的图形一样，这是一个二维表面，我们需要使用空间参考系统来识别地图上位置的坐标。有许多标准的空间参考系统在使用。我们需要知道的最起码的一点是，每个参考系统都有一个唯一的、被 API 识别的标识号。用于定义空间参考的完整参数(如使用的基准、原点坐标、使用的测量单位等)也可用于识别特定的空间参考系统。

注

识别安全气囊系统的唯一识别码被称为众所周知的识别码 ( wkid )。

列出用于定义空间参考系统的参数的字符串被称为知名文本 ( wkt )。

正如你可能已经预料到的那样，每个空间参考系统都与不同的测量系统相关联，例如英尺、米或十进制度。

例如，4326是全球坐标系的 wkid，称为 WGS 84 。该参考系统的测量单位是十进制度。

102100是另一个测量单位为米的全球坐标系的 wkid。

以下网址列出了在https://developers.arcgis.com/javascript/jshelp/pcs.html和https://developers.arcgis.com/javascript/jshelp/gcs.html的 wkids 和相应的 wkt。

小考成绩

A 1。(100002，100002)—相对于原点，该点在正 x 方向上距离 2 个单位，在正 y 方向上距离 2 个单位。

A 2。除非在几何对象中明确提及，否则坐标序列可以是折线或多边形。但是多边形有一个属性使其不同于折线，即第一个和最后一个坐标必须相同。多段线可以具有相同的第一个和最后一个坐标，但并非所有多段线都符合此标准。

A 3。如果你的答案是 4，那太好了！但如果你的答案是 2，那你太棒了。

没错。由于矩形的垂直属性，仅仅两个坐标就足以定义矩形。这两个坐标可以是任何一对对角相对的坐标，但是为了 API 的缘故，我们将采用左下坐标和右上坐标。左下坐标在 4 个坐标值对中具有最小的 x 和 y 坐标值，右上坐标具有最大的 x 和 y 坐标值:

The quiz results

获取当前地图范围

将地图缩放至您想要设置为地图初始范围的范围。在跳转开始代码中，映射变量是一个全局对象，因为它是在require函数之外声明的:

<script>
    var map; //Global variable
    require([
      "esri/map"
    ],
      function (
        Map
      ) {
        map = new Map("myMap", {
          basemap: "national-geographic"
        });
});
});
</script>

这意味着我们可以在浏览器控制台中访问地图的属性。缩放地图和您想要作为初始地图范围的范围后，使用Ctrl+Shift+I命令(在 Chrome 中)打开开发人员工具。在 JavaScript 浏览器控制台中，尝试访问地图属性:getMaxScale()、getMinZoom()、getMinScale()、getMaxZoom()、getScale()和extent: