《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/doc...

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()
    })
})

你可能感兴趣的:(webgis)