共计 1975 个字符，预计需要花费 5 分钟才能阅读完成。
第七章 在客户端绘制矢量数据
以下均掺杂集体了解 书目：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()})
})
