OpenLayers2 源码解析（3）Map

OpenLayer.Map是ol的核心，基本上所有的操作都是围绕map的（与ol3略有不同，ol3有view的概念，并且ol3组件分为交互interactions和控件controls），能操作基本都能在map对象中找到。

Z_INDEX_BASE: {
        BaseLayer: 100,
        Overlay: 325,
        Feature: 725,
        Popup: 750,
        Control: 1000
    },

可以看到map这个div上的覆盖着什么：图层、叠加层、要素、弹出层、控件
初始化地图

var map = new OpenLayers.Map({
     div: "map_id",
     projection: "EPSG:3857",
     maxExtent: [-18924313.432222, -15538711.094146, 18924313.432222, 15538711.094146],
     restrictedExtent: [-13358338.893333, -9608371.5085962, 13358338.893333, 9608371.5085962],
     center: [-12356463.476333, 5621521.4854095]
     });

从源码map“构造函数“initialize中可以看到

initialize: function (div, options) ；
//那到底options中可以传什么值呢？
        this.options = OpenLayers.Util.extend({}, options);
        OpenLayers.Util.extend(this, options);

可以看到，只要是map的属性，都可以传进去覆盖默认值（当然，必须传入的值就是div了）

继续看，发现css主题也是硬编码到js中的

this.theme = OpenLayers._getScriptLocation() +  'theme/default/style.css'
OpenLayers.Element.addClass(this.div, 'olMap');
this.viewPortDiv.className = "olMapViewport";

所以说，有些css在不改源码的基础上还是不能改的

再往下看就是一些dom的操作

然后就注意到一些比较难懂的东西：“事件”（后续再单独解释）

this.events = new OpenLayers.Events(
            this, this.viewPortDiv, null, this.fallThrough, 
            {includeXY: true}
        );
if(this.eventListeners instanceof Object) {
            this.events.on(this.eventListeners);
        }

接下来就是control

if (this.controls == null) { // default controls
            this.controls = [];
           。。。。。
            }
        }

        for(var i=0, len=this.controls.length; i<len; i++) {
            this.addControlToMap(this.controls[i]);
        }

新建map对象的时候会默认添加一些control
OpenLayers.Control.Navigation()、OpenLayers.Control.Zoom、OpenLayers.Control.ArgParser、OpenLayers.Control.Attribution
当然这是没有配置control的情况下加载的（可以再options中初始化加载自己的control）

if (this.panMethod) {
            this.panTween = new OpenLayers.Tween(this.panMethod);
        }
        if (this.zoomMethod && this.applyTransform.transform) {
            this.zoomTween = new OpenLayers.Tween(this.zoomMethod);
        }

ol2同时还定义了默认的pan、zoom过度动画效果

进入代码区

var map = new OpenLayers.Map( 'map');

打开浏览器调试模式，就会发现，map dom结构已经创建
这里写图片描述
div css 基本结构已经出来，所以新建map对象时，没有什么参数（除了map div）是必须的；其他的都是一些默认的参数，比如坐标系EPSG:4326、controls，但是目前还没有layer图层，所以不算一个地图

OpenLayers2 源码解析（3）Map

猜你喜欢