《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()})
})
《Web GIS原理与应用开发》读书笔记(7)相关推荐
- 读书笔记:《德鲁克管理思想精要》- 2
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 4
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 6
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 7
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 5
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 1
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 3
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 读书笔记:《德鲁克管理思想精要》- 8 汇总
<德鲁克管理思想精要> 美 . 彼复 . 德鲁克 著 李维安 王世权 刘金岩 译 <The Essential Drucker>The Best of Six ...
- 图书推荐:德鲁克管理思想精要(珍藏版)
本书是德鲁克历年作品的精简摘编版本,目的是为了解决"德鲁克的书这么多",到底应该从哪里看起的问题.可以作为中等快餐作品来阅读. 本书分为三个部分:管理篇,个人篇,社会篇.本人是从& ...
- 彼得-德鲁克管理思想分享与理解
l l <彼得认为:>企业的目的不在自身,而必须存在于企业本身之外,必须存在于社会之中,这就是造就客户 <朝晖理解:>企业是社会经济活动的一个点,一个环节.作为企业的领导者必须 ...
最新文章
- python初学篇笔记_Python学习笔记(基础篇)
- C# 调用 Delphi Dll链接库方法及示例
- css的三个特性 背景透明设置
- Android投屏(屏幕共享)设计需要考虑的关键因素
- spring mvc 传中文 到controller层乱码的 解决方法
- plusready html5,封装一个简单实用的 plusready 方法
- linux 触摸屏在dev的那个目录下,各硬件设备在Linux中的文件名
- 在URL中使用另一个url作为参数时会被``截断的问题
- 拖拽之路(原生之初一):自定义QListWidget实现美观的拖拽样式
- ubuntu 安装 virt-manager 虚拟机
- Lync 小技巧-14-为用户启用统一的联系人存储库-Lync-无联系人
- html 酷狗音乐教程,仿酷狗html5手机音乐播放器主要部分代码_html5教程技巧
- 计算机培训作息时间安排,985学霸作息时间表“走红”,网友:越努力,越幸运...
- 一种表格数据比对的方法
- 微软中国招聘职位描述(英文)
- 4个漂亮的wordpress企业主题
- svchost.exe 占用网络资源
- python日本 老龄化分析_即将读研,求问前辈有什么研究生安利的软件 APP 或者阅读文献用的等一系列提高效率的东西吗!?...
- 写笔记插件_梁宝川:这11条anki插件的使用常识分享给你
- 【愚公系列】2021年12月 Redis数据库-主从的搭建