《Web GIS原理与应用开发》读书笔记（7）

第七章 在客户端绘制矢量数据

以下均掺杂个人理解
书目：Web GIS 原理与应用开发 —— 刘光 曾敬文 曾庆丰 著

HTML5的出现为浏览器提供了一系列全新的功能。Canvas的问世提升了GIS在web端的用户体验。

客户端绘制专题图层：将原始数据发送到客户端，由客户端负责绘制。所有的复杂符号系统和地图绘制功能将转移到客户端，使服务器只需要提供原始的矢量数据和属性数据。这意味着在地图引擎可以更有效地响应，以增强交互性以及提升性能。

7.1 在客户端绘制矢量数据的优势和挑战

浏览器并没有GIS的概念，但其可以绘制矢量图形。绘制矢量数据其实是将屏幕坐标与符号连接的过程。

7.1.1 客户端绘制矢量数据的优势

• Web地图用户与数据的交互非常迅速，不会有任何延迟

  地图上的各类事件可以由浏览器直接处理，无需再向服务器发送请求。

• 增强系统的稳定性

  如果每次鼠标悬停都向服务器发送请求，访问数量过多时，应用程序必然会陷入瘫痪。

7.1.2 客户端绘制矢量数据的挑战

• 如果需要同时绘制成百上千个要素，或者绘制包含大量结点的多边形，服务器仍是最佳选择。

  原因：如果浏览器一次绘制的矢量图形过多，响应速度会变得及其缓慢。

  解决方案：针对每个比例尺（至少是小比例尺），将要在客户端绘制的图层数据尽可能的进行综合（设置数据的显示范围）

• 标注的渲染问题

  原因：浏览器没有强大的标注位置放置算法，结果可能是标注相互叠加。

  解决方案：通过交互发现标注（如点击要素弹出窗口或者在div中显示其信息）

• Web浏览器提供的符号的选择比较基本

7.1.3 客户端如何绘制矢量数据

• 对于一些简单的独立的矢量要素：OpenLayers中的Markers类
• 对于复杂的图层：Leaflet的FeatureGroup类、ESRI的FeatureLayer类、OpenLayers的Vector类

7.1.4 从服务器获取数据的方法

• OpenLayers中的Fixed策略

  • 在图层加载时获取所有的数据。该方法在初始化时性能会有所损失，但是此后再也不需要向服务器发送其他请求，因此确保了应用程序随后的响应速度。

  • 该方法不适合非常大的数据量。

• OpenLayers中的BBOX策略

  • 只获取当前地图视图范围内的数据。当地图视图改变时，再向服务器发送新的请求。
  • 对于数据量大的数据，一次性请求过来不现实，可以采用此方法按需请求。
  • 快速缩放或者平移时，应用程序无法快速反应。

• OpenLayers中的Filter策略

  • 根据过滤或查询条件只从数据集中获取部分要素的矢量数据。该方法能缩小请求数据的范围。
  • 既避免了下载所有的数据，又保留了Fixed策略的高响应效果。

• OpenLayers中的Refresh策略

  • 改进版本。在指定时间间隔内从新获取所有数据。
  • 表达不断变化的数据时非常有效（如航班、汽车位置等）

更多详细信息访问：http://dev.openlayers.org/docs/files/OpenLayers/Strategy-js.html

7.2 使用KML矢量数据

KML可以由要素和栅格元素组成，这些元素包括点、线、面和影像，以及图像、图片、属性和HTML等相关内容。

单个KML文件可以包含不同类型的要素，并可包含影像。

KML中最重要的XML标签是地标（placemark），它定义了一些地理要素、一些符号以及其他一些可显示在弹出窗口中的额外信息。

// 在openlayers中使用KML
const sundials = new OpenLayers.Layer.Vector("KML", {
    projection: map.displayProjection,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "kml地址",
        format: new OpenLayers.Format.KML({
            extractStyle: true,
            extractAttribute: true
        })
    })
})
map.addLayers([wms, sundials])

7.3 使用GeoJSON

GeoJSON的主要特点是基于JavaScript对象表示法，这样就非常方便解析其几何图形与字段。

GeoJSON相比于KML要小很多，加载速度较快。但是不像KML包含样式信息，需要自行编写样式代码。

// 在openlayers中使用GeoJSON
const vector = new OpenLayers.Layer.Vector("GeoJSON", {
    projection: "EPSG:4326",
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "GeoJSON文件地址",
        format: new OpenLayers.Format.GeoJSON()
    })
})