7.2. 在客户端绘制矢量层的好处和挑战

到目前为止，您的web地图已经显示了从服务器获得的图像：通过预先绘制的瓦片或动态绘制的WMS地图。另一种方法是向客户端发送一些包含特征的坐标和属性的文本，然后允许客户端绘制图层。如果使用得当，这种方法可以提高web地图的速度和交互性。

你可能会问，“像web浏览器这样的客户如何知道如何绘制GIS数据？”尽管web浏览器对地理信息系统一无所知，但它们确实能够绘制矢量图形，这只是将屏幕坐标与符号连接起来的简单过程。Web 制图API可以读取GeoJSON文件或KML文件中提供的一系列坐标，给出一些示例，并将这些坐标转换为要由浏览器绘制的屏幕坐标。

7.2.1. 在客户机上绘制矢量的优点

速度和交互性是在客户端而非服务器上绘制矢量功能的两个主要优点。一旦您的Web浏览器从服务器读取了矢量数据，Web Map的用户就可以以闪电般的快速方式与数据进行交互。假设我有一张美国的网络地图，上面显示了所有NFL橄榄球队。底图来自OpenStreetMap瓦片图层。橄榄球队来自一个GeoJSON文件。地图加载后，我的网络浏览器将读取团队的所有GeoJSON。这包括所有地理坐标和每个团队的属性信息。现在，我可以单击任何团队并查看其信息，而无需再次向服务器提出请求。与上一课中的农贸市场混搭形成对比，后者在您每次单击市场时都需要WMS GetFeatureInfo查询到服务器（以及相关的等待时间）。

假设每当用户悬停在地图符号上时，我想高亮显示它，从而提供一个视觉提示，让人可以单击该符号。web浏览器可以快速更改符号样式，使此效果发挥作用。相比之下，如果每次悬停事件都需要往返服务器，那么我的应用程序（可能还有我的服务器）可能很容易陷入停滞状态。

7.2.2. 在客户机上绘制矢量的挑战

并非所有用例都适合在客户端绘制矢量。如果一次要显示数百个要素，或者是一些具有许多顶点的复杂多边形，那么最好让服务器绘制地图并将其发送给您。如果传递过多的矢量图形以至于无法一次绘制，则浏览器可能会陷入压力。发送所有复杂的图形还会导致更多的网络流量，因为所有坐标都必须由客户端下载。

为了保持性能的清晰，最好尽可能地概括在客户机上绘制的图层，至少是最小的地图比例。例如，在全国范围内显示美国时，您不应该使用包含缅因州每个沿海小岛的文件。当用户放大超过特定比例时，可以切换到加载更详细的文件。

对于浏览器绘制的图形，标记也可能是一个挑战。尽管web浏览器可以在给定的坐标系下在屏幕上绘制文本，但它们没有GeoServer和TileMill使用的标签放置算法。你的标签可能会互相重叠。最好允许用户通过交互发现标签，当有人单击某个功能时，在弹出窗口或HTML DIV中显示标签。

最后，web浏览器提供的符号选择是相对基本的。您始终可以指示浏览器绘制图形，例如SVG文件，但是您将无法获得一些复杂的行和填充，这些行和填充在TileMill或ArcGIS等程序中可用。当然，如果您的客户机碰巧是一个桌面应用程序，如QGIS，您不必太担心可用的符号选择。

7.2.3. 如何在客户机上绘制矢量

Web 制图API通常提供用于通过浏览器绘制矢量层的类。但是，每个API的名称不同。对于一些简单的独立向量，您通常会看到一个“标记”类。对于更复杂的图层，您可能会看到诸如FeatureGroup（Leaflet）或FeatureLayer（Esri）之类的内容。为此，OpenLayers具有Layer.Markers类和Layer.Vector类。

QGIS等桌面程序可以查看KML、GeoJSON、GML（如第8课所述）和各种其他基于文本的矢量数据格式。

7.2.4. 从服务器检索数据的方法

定义向量层时，需要指定客户端从服务器检索数据时所采用的方法。请记住，您的客户机不是从服务器请求地图图像，但它确实需要检索矢量的坐标和任何相关的属性信息。一些流行的方法包括：

  • 在加载层时检索所有数据。在 Leaflet 中，这是默认行为。它需要一个初始的性能命中，但是它通过确保应用程序永远不必返回服务器来发出另一个请求，从而使应用程序做出响应。这种方法不适合于非常大量的数据。

  • 仅检索当前地图视图中的数据。当地图视图更改时，发出新请求。尽管OpenLayers通过其“ bbox”加载策略<http://dev.openlayers.org/examples/strategy-bbox.html> __提供了这种方法，但我不知道在Leaflet中可以使用此功能 框（如果您不知道，请纠正我）。当数据集中有太多数据要一次下载时，它会很好地工作，但是如果人们快速缩放和平移地图，它可能会使您的地图显得笨拙。有时，会合并逻辑以保留已请求的功能（例如，在小地图平底锅的情况下，新地图视图包括以前下载的某些功能）。

  • 基于筛选或查询条件，仅从数据集中检索一些矢量特征。创建GeoJSON层时， Leaflet 提供了一个过滤器选项。这可以缩小请求的数据范围，允许您在不下载整个数据集的情况下获得第一种方法（检索所有数据）的效果。

  • 检索大小一致的块中的向量，或如您在第5课中所学的“向量瓦片”。只有当服务器管理员预先生成了一组磁贴时，这才是可能的。Various plugins 可通过 Leaflet 消费矢量瓦片。OpenLayers版本3及更高版本具有VectorTile 为此设计的层类。

您可能会看到上述方法的其他变化，包括以固定的间隔重新加载层以表示不断变化的现象，例如舰队的位置。