2.3. web地图的元素

由于各种原因，构建和使用web地图与使用桌面GIS不同：

  • 在web地图中，您看到的任何信息都必须“通过网络”从服务器发送到浏览器，从而引入延迟。

  • 在web地图中，您可能正在从多个不同的服务器中提取信息。因此，您的map性能受到您正在使用的所有服务器的可用性和速度的限制。

  • 在web地图中，性能可能会受到同时使用服务器的其他用户的影响。

  • 在web地图中，您仅限于客户端应用程序支持的显示技术，客户端应用程序可能是一个基本的web浏览器。

这些考虑有时会让人大吃一惊。例如，如果你过去只使用ArcMap或QGIS，你可能不习惯考虑宽带速度或与其他人共享机器。

到目前为止，对于新的网络地图绘制者来说，最大的挑战是了解地图中显示的数据量，以及如何以亚秒级的速度获取在网络用户屏幕上绘制的所有信息。许多使用过桌面GIS软件包的人习惯于在地图上添加几十（甚至几百）层，并根据需要打开或关闭它们。您强大的桌面计算机可能能够处理此类地图的绘制；但是，如果您尝试将地图直接移动到web上，性能将非常缓慢。服务器需要宝贵的时间来遍历所有这些层、检索数据、绘制数据并将图像发送回客户端。

为了解决这个问题，大多数web地图将层分解成处理方式非常不同的组。其唯一目的是提供地理环境的图层被组合在一起，并作为一个瓦片的基础地图带入地图。相反，主题层（地图的焦点层）作为一个或多个单独的web服务引入，并放置在基础地图的顶部。您还可以决定包含一组交互式元素，如弹出窗口、图表、分析工具等。

让我们仔细看一下这三个东西--基础地图、主题层和交互元素--来了解它们是如何创建和显示的。

2.3.1. 基本地图

基础地图为地图提供地理环境。换言之，这通常不是人们看地图的主要原因，但没有它，你的地图将很难解释。在线使用的最常见的基础地图是矢量路线图和遥感图像。

尽管一个基础地图可能包含许多子层（如道路、湖泊、建筑物等），但这些子层通常融合在一起，形成一组栅格化的瓦片图像，并在网络地图中作为一个单层处理。这些瓦片地图通常由数千或数百万个预先绘制的图像组成，这些图像保存在服务器上，并在人们在地图周围移动时传递给web浏览器。第5课将更深入地解释瓦片地图，并给你一个自己制作地图的机会。

在过去的几年中，服务器在某些应用中已经流行了将基础地图作为向量坐标块，有时称为“矢量瓦片”。将BaseMap显示为矢量而不是栅格化地图，允许在可视化中具有更大的灵活性。例如，当标签保持右侧朝上时，可以旋转地图。如果你在智能手机上查看Google地图应用程序，你可以看到一个矢量地图正在运行。

有时两个瓦片层将一起工作，形成一个基础地图。例如，您可能有一个带有航空图像的瓦片层和一个带有矢量道路覆盖的第二个瓦片层，该矢量道路覆盖被设计为位于图像的顶部。（在Google Maps中，当您选中Labels项时会出现此项）。将这两个tileset分开会占用更少的磁盘空间，并且更容易更新图像。

2.3.2. 专题层

主题层（也称为业务层或操作层）位于基础图的顶部。他们是人们来参观你地图的原因。如果放在基础地图上，它们可能不是每个人都感兴趣，但是当放在你关注的web地图上时，它们是感兴趣的主要层。如果你的地图名为“费城农贸市场”，那么农贸市场就是你的主题层。如果你的地图标题是“北美鸟类的迁徙模式”，那么迁徙模式就是你的主题层。

与基础地图一样，专题图层有时也显示为瓦片；但是，由于某些数据的性质迅速变化，这可能并不总是可能的。例如，如果需要显示警车的实时位置，则不能依赖预先绘制的瓦片，必须使用其他方法绘制数据。有各种web服务，例如WMS（您将在第4课中了解到），它们旨在以这种方式动态绘制地图。你可以把这些用于你的主题层。另一个选项是查询服务器上的所有数据，并使用浏览器绘制这些数据。这种方法非常适合于诸如弹出窗口之类的交互元素，并在第6课中进行了描述。

专题层与基础地图层一起工作，形成一个有效的网络地图。有趣的是，主题层并不总是第一层。在2009年的一篇博客文章（不再在线）中，Esri制图师Charlie Frye描述了一种“地图三明治”方法，其中一个主题层（可以是瓦片也可以不是瓦片）放置在两个瓦片的基础地图层之间，这两个层提供地理背景。底层具有地形特征，顶层具有标志和边界。这是“面包”，中间的主题层是“肉”，ArcMap和ArcGIS联机中的Esri“浅灰色Canvas”底图使用了这种技术。自由／开源软件技术肯定也允许这种方法。

您的地图可能包含多个主题层，允许用户打开和关闭。要实现这一点，可以使用具有多个子层的单个web服务，也可以使用每个子层都包含单个层的多个web服务。但是，为了保持应用程序的可用性和相对快速的性能，您应该避免在web地图中包含许多主题层。

试试这个

  1. 打开您在上一课中使用的浏览器的Web开发人员工具，然后打开网络标签； 然后在计算机的网络浏览器上访问 必应地图 。

  2. 在basemaps（右上角的下拉菜单）之间来回移动和切换，并注意表中显示的不同web请求URL。当你与网站互动时，这些信息会很快出现。

  3. 单击表示请求的行，然后单击Response选项卡以查看从请求返回的内容。如果看到图像，则表示请求作为响应发送回瓦片地图图像。其他时候，您可能会看到JSON和/或其他文本。

  4. 现在打开交通主题层。

Bing如何显示这些层？他们为什么采取这种做法？在本课结束的时候，你会很好的理解不同的选项，以及它们的优缺点。请继续，并将Bing的方法与网站上的方法进行比较HERE WeGo （可以在右下角访问层）。你注意到他们的方法有什么不同吗？

2.3.3. 交互元素

网络地图通常配备有交互式元素，可以帮助您了解地图中的图层。这些可以是当您单击某个功能时出现的信息弹出窗口，在页面的单独部分中绘制的图表和图形，调整地图中显示的数据时间片的滑块，等等。有些web地图允许您实时编辑地理信息系统数据，或向服务器提交地理处理作业并查看屏幕上绘制的响应。其他允许您键入一系列的停止和查看驾驶方向之间的每个。

这些元素使地图生动起来。制作一个有效的网络地图的关键是要包含对你的受众最有用的交互元素，而不是让他们无法选择或者使任务过于复杂。即使是一点点的内务管理，比如在弹出窗口中包含用户友好的字段别名，也可以大大提高地图的可接近性和实用性。

交互元素是web地图中最需要自定义编程的部分。您可以自由添加的交互性数量可能与您知道如何进行的JavaScript编程数量密切相关。诸如OpenLayers和Leaflet之类的开放式Web 制图APIs提供了一些方便的方法来执行某些最常见的事情，例如打开弹出窗口。

在本课程的后面，您将检查一些web地图并讨论它们提供的交互元素。当您开始使用web 制图 api将所有层组合到一个Web 制图时，您还将在第6课中重新讨论此主题。

2.3.4. 识别web地图元素的一些实践

让我们来练习识别这些元素。我将带您浏览几个简单的web地图，指出基本地图、主题层和交互元素。然后，在本周的作业中，你将有机会自己尝试使用两个你选择的网络地图。

2.3.4.1. 得克萨斯州水库水位

我们要看的第一张地图是Texas Reservoir Levels ，发表在《德克萨斯论坛报》上。这是一个简单但有用的地图，其范围与您在本课程中将要创建的内容类似。花点时间打开这张地图并检查一下。

  • 基本地图是由Mapbox.com托管的瓦片地图，Mapbox.com是一个基于云的地图托管服务，它为此提供了各种基本地图。不引人注目的浅灰色允许任何主题层上升到视觉层次的顶部。基本地图包含道路、州、城市和其他一些在放大时显示的要素类型。然而，它不包含任何模糊类型的特征，这些特征会从主题层中夺走观众的兴趣。

  • The thematic layer consists of the circles showing reservoir levels. These are drawn by the web browser. When the map first loads, the geographic locations of the reservoirs are retrieved from a GeoJSON file .

  • 此地图的交互元素由位于地图右上角的信息窗口组成，当您将鼠标悬停在某个要素上时，该窗口将更改内容。当您将交互元素添加到web地图时，通常会添加“监听”特定事件的代码，例如单击、轻敲或悬停在某个功能上。

2.3.4.2. 设想开发工具包-交互式收入地图

接下来，打开 ` Envisioning Development Toolkit-互动收入地图<http://envisioningdevelopment.net/map/>的纽约市。地图是用Flash制作的，您必须使用安装并启用了Flash插件的浏览器才能看到它，否则您只会得到一个空页面（取决于浏览器的配置，您可能需要在加载页面时授予启用Flash的权限）。由于地图是用Flash实现的，我们对幕后发生的事情的可见性稍差一些。然而，地图的基本元素很容易识别。

  • 底图再次使用了非结构性的黑白设计。平移到足够的位置，您会注意到它是使用瓦片带到web地图中的。

  • 主题层是纽约社区的矢量轮廓。背后是美国人口普查的一些收入数据，这些数据已经汇总到了社区边界。这一层也被设计成有点不伦不类，因为地图作者真的想让你看看代表不同收入水平人口的彩色块。

  • 交互元素使这个地图变得活跃起来。将鼠标悬停在某个邻域上会引起一个微妙的亮显，邀请您单击以获取更多信息。单击时，图形会自动调整以更新填充计数（这就是Flash动画的用武之地）。悬停时的工具提示和右上角的信息窗口提供了其他信息。

2.3.4.3. 北方平原保护网互动网络地图

要结束此练习课程，请查看Northern Plains Conservation Network Interactive Web Map 。通过打开和关闭地图的许多层来感受地图。该地图似乎是使用Google Maps API的元素以JavaScript创建的。

  • 底图被是瓦片地图。它是来自Google Maps API的“地形”层。这取决于你决定这是有用的（这张地图确实与地形有某种联系，因为它是一张北部平原的地图）还是令人分心的（这张地图比我们之前看到的两张基础地图更加丰富多彩）。

  • 即使不是全部，大部分的主题层也似乎是瓦片的。当您考虑到这些层中的大多数可能不会定期更改时，这是有意义的；因此它们可以提交到tiles并比动态绘制的地图更快地引入应用程序。

这些图块是从CartoDB中提取的，CartoDB是一个基于云的地图创作和托管服务。有时使用其他人的在线服务来设计和托管您的磁贴是最简单的。在第5课中，您将感受到设计和托管您自己的磁贴所需的努力（如果您想避免托管费用，可以决定这样做）。

这张地图的主题层数量众多，种类繁多，因此要确定地图的目的和受众有些困难。

  • 交互元素包括切换图层、调整图层透明度、搜索位置和截屏的功能。必须使用图例来解释数据区域。似乎有一个查询数据的按钮，但我无法立即找出如何使用它。

2.3.4.4. 其他地图

如果你想继续练习的话，这里还有一些其他的地图。虽然这些地图中有一些元素非常好，但我推荐它们是因为它们的多样性，而不是因为它们在任何特定领域的卓越性。

从这个简短的练习中，您可以开始看到可以用来组合web地图的各种方法。希望您可以查看一个web地图，并立即开始查看这些图层是如何被分解为基本地图图层和专题图层的。每当您看到web地图时，您还应该考虑存在的交互元素，并决定它们是否可用和适用。