OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础
来源:互联网 发布:the ludlows 知乎 编辑:程序博客网 时间:2024/06/05 04:21
因为下面的内容会分模块介绍源码,所以这里为了方便,首先介绍源码的目录结构
在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 parameters uri = uri.indexOf('?') === -1 ? uri + '?' : uri + '&'; return uri + qs;};
- OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础
- OpenLayers 3实践与原理探究4.2-ol3源码分析-Map,View
- OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer
- OpenLayers 3实践与原理探究4.4-ol3源码分析-render
- OpenLayers 3实践与原理探究1-ol2 VS ol3
- OpenLayers 3实践与原理探究2-ol3基础入门案例
- OpenLayers 3实践与原理探究3-ol3一个完整的例子
- OpenLayers 源码分析
- Openlayers 2013 源码分析
- HashMap的底层原理及源码分析
- netty源码分析(十八)Netty底层架构系统总结与应用实践
- 线程池源码解析与原理探究
- LevelDB原理探究与代码分析
- LevelDB原理探究与代码分析
- LevelDB原理探究与代码分析
- LevelDB原理探究与代码分析
- LevelDB原理探究与代码分析
- [转]LevelDB原理探究与代码分析
- Android应用内 代码截屏(获取View快照)和 禁止截屏
- OpenLayers 3实践与原理探究3-ol3一个完整的例子
- axis和xfire以及CXF三种方式实现WebServices分别有什么优缺
- java的特性与原则
- C# Stream 和 byte[] 之间的转换
- OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础
- Android 通过 Intent 传递类对象
- 机器学习(二) - - 假设空间
- 算法面试---01背包问题---动态规划
- OpenLayers 3实践与原理探究4.2-ol3源码分析-Map,View
- 微信简单开发流程
- poj3122 二分
- 最好用的Date工具类
- 微信企业号的五个典型案例分享