openlayers 3方法继承

   之前Web GIS开发使用的ArcGIS API用起来很系统,但是使用开源Web GIS API已经成主流趋势(你懂的~),最近项目想要从ArcGIS API 转到openlayers API,用起来不是那么的得心应手。举个例子:ArcGIS API可以通过Map.getLayer(layerid)方法根据图层的id得到想要的图层,比较方便也便于后期图层管理,绘图也可以临时添加、删除图层来提高内部效率,而不是将Verctor绘图图层存储为全局变量。

   以ol.layer.Vector为例,打开http://openlayers.org/en/latest/apidoc/ol.layer.Base.html:

1.找到ol.layer.Vector

  可以看到ol.layer.Vector是从ol.layer.Layer继承,继而打开ol.layer.Layer,同样的步骤ol.layer.Layer是从ol.layer.Base继承。

2.打开ol-debug.js文件,搜索“ol.layer.Base”:

 1 ol.layer.Base = function (options) {
 2
 3         ol.Object.call(this);
 4
 5         /**
 6          * @type {Object.<string, *>}
 7          */
 8         var properties = ol.obj.assign({}, options);
 9         properties[ol.layer.Property.OPACITY] =
10             options.opacity !== undefined ? options.opacity : 1;
11         properties[ol.layer.Property.VISIBLE] =
12             options.visible !== undefined ? options.visible : true;
13         properties[ol.layer.Property.Z_INDEX] =
14             options.zIndex !== undefined ? options.zIndex : 0;
15         properties[ol.layer.Property.MAX_RESOLUTION] =
16             options.maxResolution !== undefined ? options.maxResolution : Infinity;
17         properties[ol.layer.Property.MIN_RESOLUTION] =
18             options.minResolution !== undefined ? options.minResolution : 0;
19         properties[ol.layer.Property.ID] =
20             options.id !== undefined ? options.id : "";
21         this.setProperties(properties);
22
23         /**
24          * @type {ol.LayerState}
25          * @private
26          */
27         this.state_ = /** @type {ol.LayerState} */ ({
28             layer: /** @type {ol.layer.Layer} */ (this),
29             managed: true
30         });
31
32     };

可以看到图层的基础属性全部在 ol.layer.Property变量中

ol.layer.Property = {
        OPACITY: 'opacity',
        VISIBLE: 'visible',
        EXTENT: 'extent',
        Z_INDEX: 'zIndex',
        MAX_RESOLUTION: 'maxResolution',
        MIN_RESOLUTION: 'minResolution',
        SOURCE: 'source',
        ID: "id"
    };

3.Property变量中添加ID:"id",图层基类中添加图层的ID属性,同时在 ol.layer.Base方法中添加:

properties[ol.layer.Property.ID] =
 options.id !== undefined ? ptions.id : "";

4.图层中添加图层:

var map = this.getMap();
    var source = new ol.source.Vector();

    var vector = new ol.layer.Vector({
        id: "draw-layer",
        source: source
    });

    map.addLayer(vector);

5.查看图层属性

  打开开发者模式(F12),在 map.addLayer(vector);这一行添加断点

 测试发现,所有从ol.layer.Base继承的图层都存在id这个属性。继而搜索ol.Map,添加你想要的方法,例如这边我可能需要添加验证Map是否包含某个图层和获取图层的方法

/**
     * Gets a given layer of this map by layerid.
     * {@link ol.Collection}.
     * @param {ol.layer.Base} layer Layer.
     * @api
     */
    ol.Map.prototype.getLayer = function (layerID) {

    };

    /**
     * check if Map contains a Layer by LayerID
     * @param string layerID
     * */
    ol.Map.prototype.contains = function (layerID) {
        var layers = this.getLayerGroup().getLayers();
    };

 

posted @ 2018-01-10 14:19  小木工  阅读(1229)  评论(0编辑  收藏  举报