第七章 在客户端绘制矢量数据以下均掺杂集体了解书目: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中应用KMLconst 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 应用GeoJSONGeoJSON的次要特点是基于JavaScript对象表示法,这样就十分不便解析其几何图形与字段。
GeoJSON相比于KML要小很多,加载速度较快。然而不像KML蕴含款式信息,须要自行编写款式代码。
// 在openlayers中应用GeoJSONconst 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() })})