之前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(); };