1.Map

ol/ol/map.js

1.1构造函数

ol.Map = function(options) { ol.Object.call(this);//@extends {ol.Object} var optionsInternal = ol.Map.createOptionsInternal(options); }

常量对象共享地图设置，并且将常量对象共享出去，作为公用变量

goog.provide('ol.MapProperty'); ol.MapProperty = { LAYERGROUP: 'layergroup', SIZE: 'size', TARGET: 'target', VIEW: 'view' };

createOptionsInternal函数对map中的配置对象进行处理。

//分别处理layer、layerGroup、target、view、renderer、controls、interactions、overlays var layerGroup = (options.layers instanceof ol.layer.Group) ? options.layers : new ol.layer.Group({layers: options.layers}); values[ol.MapProperty.LAYERGROUP] = layerGroup; values[ol.MapProperty.TARGET] = options.target; values[ol.MapProperty.VIEW] = options.view !== undefined ? options.view : new ol.View(); //...... return { controls: controls, interactions: interactions, keyboardEventTarget: keyboardEventTarget, logos: logos, overlays: overlays, rendererConstructor: rendererConstructor, values: values };

运用实例-初始化：

var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.ScaleLine(), //比例尺 ]), layers: [bglayer, vector], //添加两个图层 target: 'map', //div#id='map' view: view, interaction:interaction });

1.2 方法 事件

方法 事件列表：

addControl addInteraction addLayer addOverlay beforeRender changed dispatchEvent forEachFeatureAtPixel forEachLayerAtPixel get getControls getCoordinateFromPixel getEventCoordinate getEventPixel getInteractions getKeys getLayerGroup getLayers getOverlayById getOverlays getPixelFromCoordinate getProperties getRevision getSize getTarget getTargetElement getView getViewport hasFeatureAtPixel on once removeControl removeInteraction removeLayer removeOverlay render renderSync set setLayerGroup setProperties setSize setTarget setView un unByKey unset updateSize

实现方式举几个例子：

ol.Map.prototype.addControl = function(control) { var controls = this.getControls(); goog.asserts.assert(controls !== undefined, 'controls should be defined'); controls.push(control); }; ol.Map.prototype.addInteraction = function(interaction) { var interactions = this.getInteractions(); goog.asserts.assert(interactions !== undefined, 'interactions should be defined'); interactions.push(interaction); };

controls控件,控件添加到map上，对控件设置两个监听事件，增加、删除。

this.controls_ = optionsInternal.controls; this.controls_.forEach( function(control) { control.setMap(this); }, this); ol.events.listen(this.controls_, ol.CollectionEventType.ADD, function(event) { event.element.setMap(this); }, this); ol.events.listen(this.controls_, ol.CollectionEventType.REMOVE, function(event) { event.element.setMap(null); }, this);

2.View

ol/ol/view.js

2.1构造函数

ol.View = function(opt_options) { ol.Object.call(this); var options = opt_options || {}; this.projection_ = ol.proj.createProjection(options.projection, 'EPSG:3857'); //... ... }

运用实例：

var map = new ol.Map({ target: 'map', view: new ol.View({ projection: 'EPSG:4326', //WGS 84 center: [0, 0], zoom: 2, maxResolution: 0.703125 }), }); goog.provide('ol.View'); goog.provide('ol.ViewHint'); goog.provide('ol.ViewProperty');

提供不只是一个构造函数，还有两个常量对象，其中一个常量对象包含三个常量如下所示：

ol.ViewProperty = { CENTER: 'center', RESOLUTION: 'resolution', ROTATION: 'rotation' };

其实，我们在对象属性中写出来的，如center,作用等同于用下面介绍的方法setCenter,其本质是写入常量中，共享出去作为公用。

2.2方法 事件

举例；

ol.View.prototype.setCenter = function(center) { this.set(ol.ViewProperty.CENTER, center); };