openlayers应用原理
1、数据组织
OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源。因此,Layer与Source是密切相关的对应关系,缺一不可。Layer可看做渲染地图的层容器,具体的数据需要通过Source设置。
地图数据根据数据源(Source)可分为Image、Tile、Vector三大类型的数据源类,对应设置到地图图层(Layer)的Image、Tile、Vector三大类别的图层中。
2、数据解析
ol.format.Feature类用于读/写各种格式的数据,封装了多种格式的子类即各类数据解析器,包括XML、Text、JSON类型的各种格式数据解析器
3、数据渲染
先通过URL获取数据,然后用各种格式的解析器解析数据,再用所谓的渲染器在图层中进行渲染,最后结合相应的控件表现出来。渲染功能由渲染器(renderer相关类)实现,通过Map的renderer属性设置渲染类型,然后根据渲染类型(Canvas、DOM、WebGL)与同层类型(Image/Tile/Vector)匹配相应的渲染器将图层数据渲染显示出来。
4、地图表现
Map类是一个地图容器,用target属性与DIV关联。
5、事件机制
地图事件类(ol.MapEvent),包含moveend、postrender等
地图浏览器事件类(ol.MapBrowserEvent),包含singleclick、click、dbclick、pointermove、pointerdrag事件
对象事件类(ol.ObjectEvent),包含change、propertychange事件
选择控件事件类(ol.SelectEvent),包含select事件
绘制控件事件类(ol.interaction.DrawEvent),包含drawstart、drawend事件
修改控件事件类(ol.ModifyEvent),包含modifystart、modifyend事件
集合事件类(ol.CollectionEvent),包含add、remove事件
openlayers应用原理的更多相关文章
- OpenLayers工作原理
1.数据组织 OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源.因此,Layer与Source是密切相关的对应关系,缺一不可.Layer可看做渲染地图的层容 ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- HT for Web整合OpenLayers实现GIS地图应用
HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...
- openlayers 加载瓦片详解 一
在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...
- WebGIS前端瓦片地图显示原理及实现
目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...
- openlayers调用瓦片地图分析
网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图,本文作者使用的是不是常见的互联网瓦片,现将调用过程进行整理与大家分享. 首先,openlayers就不赘述了(官网: ...
- openLayers 3知识回顾
openlayers 知识 前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后 ...
- D3、openlayers的一次尝试
近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...
- openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
随机推荐
- API.day01
第1部分 JDK API 1.1 API(Application Programming Interface,应用接口程序):已经封装好可以直接调用的功能(Java中以类的形式封装) 经常使用的JDK ...
- nnet3配置中的上下文和chunk(块)大小
Nnet3配置中的上下文和块大小 简介 本页讨论了nnet3配置中关于解码和训练的块大小以及左右上下文的某些术语.这将有助于理解一些脚本.目前,从脚本角度来看,没有任何关于nnet3的"概述 ...
- 基于STM32F1的局域网通信模块W5500驱动
目录 说明 W5500 W5500.c 使用方法 说明 需要调整的内容为W5500.h中关于IP地址.端口号.子网掩码.网关等参数 W5500 #ifndef _W5500_H_ #define _W ...
- 学习熟悉箭头函数, 类, 模板字面量, let和const声明
箭头函数:https://blog.csdn.net/qq_30100043/article/details/53396517 类:https://blog.csdn.net/pcaxb/articl ...
- Ansible之Playbook详解、案例
什么是playbook playbooks是一个不同于使用Ansible命令行执行方式的模式,其功能更强大灵活.简单来说,playbook是一个非常简单的配置管理和多主机部署系统,不同于任何已经存在的 ...
- WebService - 基础概念
一.WebService到底是什么 一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用 ...
- sed 使用行号与关键字匹配限定行范围
1.打印匹配数字4 到最后一行 [111 sed]$ cat input [111 sed]$ sed -n '/4/,$p' input
- TIME_WAIT 太多的解决办法
TIME_WAIT 客户端与服务器端建立TCP/IP连接后关闭SOCKET后,服务器端连接的端口状态为TIME_WAIT.主动关闭的一方在发送最后一个 ack 后 就会进入 TIME_WAIT 状态 ...
- webstorm主要快捷键
1. 必备快捷键 Ctrl+/:注释当前行 F11:全屏 Alt+数字:切换打开第N个文件 Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ct ...
- git官网和安装使用教程链接
git官网 https://git-scm.com/download/win git安装教程 https://www.cnblogs.com/wj-1314/p/7993819.html