OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础
因为下面的内容会分模块介绍源码，所以这里为了方便，首先介绍源码的目录结构
在OpenLayers 3官网的下载页面下载我们在开发工程中需要的文件(如：v3.17.1.zip)，注意如果需要编译源代码，需要下载包含编译功能的文件包：https://github.com/openlayers/ol3/releases 下载指定release版本的源码，注意是Source code (zip)或者Source code (tar.gz)。
- apidoc是ol3的api文档，打开ol.html就可以在浏览器中离线使用，当然也可以在官网中查看api；
- build是ol3编译过的文件，工程开发中可以直接使用，下部分的案例是基于离线的源码的；
- closure-library是google的closure库文件夹；
- css里面只有ol.css一个文件，是定义ol3的全局样式，项目开发中需要引入；
- doc提供给我们一些的案例，打开quickstart.html即可看到快速开始的案例；
- examples是比较丰富的例子，和官网中的examples一样；
- ol就是我们要分析的源码文件夹；
- ol.ext是ol3所要使用的js库。
ol/ol文件夹下是我们分析的源码，分析基本思路：文件夹下的文件是公用的部分(A部分)，文件夹是分部分写的(B部分)。
0.底层基础
0.1 ol.js
第一行就可以看出，ol.js提供全局的第一命名空间ol
goog.provide('ol');唯一的一个方法是：继承
ol.inherits = function(childCtor, parentCtor) {childCtor.prototype = Object.create(parentCtor.prototype);childCtor.prototype.constructor = childCtor;
};0.2 object.js
goog.provide('ol.Object');
goog.provide('ol.ObjectEvent');
goog.provide('ol.ObjectEventType');goog.require('ol.Observable');
goog.require('ol.events');
goog.require('ol.events.Event');
goog.require('ol.object');ol命名空间下所有的基本对象，比如map对象，feature矢量地图对象，都应该建立在ol.Object基础上。如：
map.js
ol.Object.call(this);
ol.inherits(ol.Map, ol.Object);feature.js
ol.Object.call(this);
ol.inherits(ol.Feature, ol.Object);通过这行代码：
ol.inherits(ol.Object, ol.Observable);我们发现ol.Object继承ol.Observable
Observable.js
ol.inherits(ol.Observable, ol.events.EventTarget);我们发现ol.Observable继承ol.EventTarget；
这样，我们可以知道继承ol.Object后也就继承了基础事件ol.events。
0.3 events.js
ol3的基础事件
goog.provide('ol.events');
goog.provide('ol.events.EventType');
goog.provide('ol.events.KeyCode');goog.require('ol.object');提供的所有基础事件
ol.events.EventType = {CHANGE: 'change',CLICK: 'click',DBLCLICK: 'dblclick',DRAGENTER: 'dragenter',DRAGOVER: 'dragover',DROP: 'drop',ERROR: 'error',KEYDOWN: 'keydown',KEYPRESS: 'keypress',LOAD: 'load',MOUSEDOWN: 'mousedown',MOUSEMOVE: 'mousemove',MOUSEOUT: 'mouseout',MOUSEUP: 'mouseup',MOUSEWHEEL: 'mousewheel',MSPOINTERDOWN: 'mspointerdown',RESIZE: 'resize',TOUCHSTART: 'touchstart',TOUCHMOVE: 'touchmove',TOUCHEND: 'touchend',WHEEL: 'wheel'
};我们分析一下提供的几个方法
ol.events.bindListener_ = function(listenerObj) {};
ol.events.listen = function(target, type, listener, opt_this, opt_once) {};
ol.events.unlisten = function(target, type, listener, opt_this) {};
ol.events.unlistenAll = function(target) {};其中方法名末尾带有”_”为私有方法，不带的为提供出去的共有方法。
0.4 math.js
提供基础的数学运算方法，角度转化弧度函数如：
ol.math.toRadians = function(angleInDegrees) {return angleInDegrees * Math.PI / 180;
};0.5 animation.js
提供bounce、pan、rotate、zoom四种方法
0.6 collection.js
对ol命名空间下的对象集合的操作。
goog.provide('ol.Collection');
goog.provide('ol.CollectionEvent');
goog.provide('ol.CollectionEventType');goog.require('ol.events.Event');
goog.require('ol.Object');ol.CollectionEventType = {ADD: 'add'REMOVE: 'remove'
};继承
ol.inherits(ol.CollectionEvent, ol.events.Event);
ol.inherits(ol.Collection, ol.Object);方法举例：
ol.Collection.prototype.remove = function(elem) {var arr = this.array_;var i, ii;for (i = 0, ii = arr.length; i < ii; ++i) {if (arr[i] === elem) {return this.removeAt(i);}}return undefined;
};0.7 uri.js
通过url加载地图，其中params包含请求地图的宽、高、分辨率、地图范围
ol.uri.appendParams = function(uri, params) {var qs = Object.keys(params).map(function(k) {return k + '=' + encodeURIComponent(params[k]);}).join('&');// remove any trailing ? or &uri = uri.replace(/[?&]$/, '');// append ? or & depending on whether uri has existing parametersuri = uri.indexOf('?') === -1 ? uri + '?' : uri + '&';return uri + qs;
};OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础相关推荐
- OpenLayers 3实践与原理探究1-ol2 VS ol3
本文的重点在OpenLayers 3,对于OpenLayers 2简单比较说明. 下文中OpenLayers 2简称OL2,OpenLayers 3简称OL3 1.OL 2 VS OL 3简单源码和实 ...
- laravel $request 多维数组取值_Laravel 运行原理分析与源码分析,底层看这篇足矣
精选文章内容 一.运行原理概述 laravel的入口文件 index.php 1.引入自动加载 autoload.php 2.创建应用实例,并同时完成了: 基本绑定($this.容器类Containe ...
- copyonwritearraylist原理_Java集合干货——CopyOnWriteArrayList源码分析
前言 CopyOnWriteArrayList是一个线程安全集合,原理简单说就是:在保证线程安全的前提下,牺牲掉写操作的效率来保证读操作的高效.所谓CopyOnWrite就是通过复制的方式来完成对数据 ...
- 系统学习深度学习（四） --CNN原理，推导及实现源码分析
之前看机器学习中,多层感知器部分,提到可以在设计多层感知器时,对NN的结构设计优化,例如结构化设计和权重共享,当时还没了解深度学习,现在看到CNN,原来CNN就是这方面的一个代表.CNN由纽约大学的Y ...
- OpenLayers 3实践与原理探究3-ol3一个完整的例子
[注]所有代码挂在我的github上,本例对应demo2 接着我们看一个比较长的例子,例子实现的是可以绘制图形,可以根据自己的设置打印地图 我们先看显示效果是: 由于ol3的api现在更新变化挺大的, ...
- spring boot actuator工作原理之http服务暴露源码分析
spring boot actuator的官方文档地址:https://docs.spring.io/spring-boot/docs/current/reference/html/productio ...
- LIRe图像检索：CEDD算法原理与源码分析
本文节选自论文<Android手机上图像分类技术的研究>,并结合我对LIRe中CEDD源码进行分析.解读和研究. 颜色和边缘方向性描述符(Color and EdgeDirectivity ...
- 【2021软件创新实验室暑假集训】SpringMVC框架（设计原理、简单使用、源码探究）
系列文章目录 20级 Java篇 [2021软件创新实验室暑假集训]计算机的起源与大致原理 [2021软件创新实验室暑假集训]Java基础(一) [2021软件创新实验室暑假集训]Java基础(二) ...
- CopyOnWriteArrayList实现原理及源码分析
点击上方"方志朋",选择"置顶或者星标" 你的关注意义重大! CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操 ...
最新文章
- 互联网性能与容量评估的方法论和典型案例
- php内核介绍及扩展开发指南,4.5. 发布扩展信息
- 最不像地球的45个地方，你都见过几个？
- [C++11]返回值类型后置
- spss分析qpcr数据_谁说菜鸟不会数据分析--SPSS篇
- 【Linux】Shell 时间运算以及时间差计算方法！
- Bean的生命周期简单过程
- Bus Hound 的使用方法
- 极速办公（word）如何绘制流程图
- JAVA中数字转大写字母_java实现数字转大写
- Redis单机版和集群搭建部署
- 肇庆学院计算机论文选题,肇庆学院本科毕业论文（设计）写作与印制规范
- win10文件夹加密_专业的文件隐藏软件——文件夹隐藏精灵PC软件
- 举个栗子~Tableau 技巧（208）：使用“显示/隐藏”按钮，快速切换图表
- 计算机怎么打出$符号,细说电脑上怎么打出特殊符号
- 【BZOJ2152】聪聪可可 树分治
- uniapp使用微信小程序自定义组件
- 使用wangEditor富文本编辑器遇到的问题总结
- vue+Element中append-to-body的使用
- ElasticSearch控制should查询的精度（匹配个数）