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工作原理的更多相关文章

  1. 菜鸟学Struts2——Struts工作原理

    在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...

  2. 【夯实Nginx基础】Nginx工作原理和优化、漏洞

    本文地址 原文地址 本文提纲: 1.  Nginx的模块与工作原理    2.  Nginx的进程模型    3 . NginxFastCGI运行原理        3.1 什么是 FastCGI   ...

  3. HashMap的工作原理

    HashMap的工作原理   HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...

  4. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件(三)

    RAC 工作原理和相关组件(三) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...

  5. ThreadLocal 工作原理、部分源码分析

    1.大概去哪里看 ThreadLocal 其根本实现方法,是在Thread里面,有一个ThreadLocal.ThreadLocalMap属性 ThreadLocal.ThreadLocalMap t ...

  6. Servlet的生命周期及工作原理

    Servlet生命周期分为三个阶段: 1,初始化阶段  调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...

  7. 代码管理工具 --- git的学习笔记二《git的工作原理》

    通过几个问题来学习代码管理工具之git 一.git是什么?为什么要用它?使用它的好处?它与svn的区别,在Mac上,比较好用的git图形界面客户端有 git 是分布式的代码管理工具,使用它是因为,它便 ...

  8. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  9. 浏览器内部工作原理--作者:Tali Garsiel

    本篇内容为转载,主要用于个人学习使用,作者:Tali Garsiel 一.介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到 ...

随机推荐

  1. OpenGL光照和颜色

    OpenGL光照和颜色 转自:http://www.cnblogs.com/kekec/archive/2011/08/16/2140789.html OpenGL场景中模型颜色的产生,大致为如下的流 ...

  2. Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3318/UITableView.m:10772

    Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...

  3. swift 2.x学习笔记(三)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0. ...

  4. 使用安卓手机上的shh软件ConnectBot管理您的Linux服务器

    ConnectBot是一款在Android手机上通过命令行方式连接管理类Unix系统的软件(类Unix系统包含:FreeBSD.OpenBSD.NetBSD.Solaris.Mac.AIX.GUN/L ...

  5. canvas中的rotate的使用方法

    今天在绘制一个足球滚动的时候,想使用rotate方法,之前看到这个方法的时候,并没有引起任何重视,无非就是和CSS3里的rotate一样的用么... 遗憾的是,事实并非如此,由于代码在公司,我也就不去 ...

  6. mac安装tensorflow报错

    问题:mac安装tensorflow过程中,爆出oserror:permission denied 解决方案:关闭mac的sip,然后sudo安装 关闭sip的方法:重启mac,按住command+R ...

  7. html css 样式继承的问题

    body 设置css中可以继承的属性:letter-spacing.word-spacing.white-space.line-height.color.font等 但有时,body的样式,不能在有的 ...

  8. [转载] 自定义百度网盘分享密码 (Javascript)

    压缩版 javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).protot ...

  9. 算法系列(1):Google方程式

    有一个字符组成的等式:WWWDOT – GOOGLE = DOTCOM,每个字符代表一个0-9之间的数字,WWWDOT.GOOGLE和DOTCOM都是合法的数字,不能以0开头.请找出一组字符和数字的对 ...

  10. 20145220&20145209&20145309信息安全系统设计基础实验报告(3)

    20145220&20145209&20145309信息安全系统设计基础实验报告(3) 实验报告链接: http://www.cnblogs.com/zym0728/p/6132243 ...