Layer: Layer.js
2019-01-18 本文已影响0人
1e6c2b3901b0
leaflet中的图层与esri中的图层不同,esri中的图层包含多个要素,而leaflet中的每个要素就是一个图层。(可能有误解,后期接触深了再确认是否存在误解)
Layer的基类,定义了方法,继承了来自L.Evented的所有方法、选项和事件
属性
- options:Object 扩展了L.Layer的类都会继承以下选项
- pane:String,默认overlayPane
默认情况下,图层将被添加到map的overlay pane,覆盖该选项会将图层添加到其它pane上
- pane:String,默认overlayPane
- attribution:String =null
在attributionControl中展示的字符串,描述了图层数据,通常表示版本等,例如© OpenStreetMap contributors
- attribution:String =null
- bubblingMouseEvents:Boolean=true
方法
- addTo(map:Map|LayerGroup):this
把图层添加到map上或layergroup中 - remove:this
从map中删除该图层 - removeFrom(map:Map):this
从给定的map中删除该图层 - getPane(name? : String): HTMLElement
Returns theHTMLElement
representing the named pane on the map ,Ifname
is omitted, returns the pane for this layer. - addInteractiveTarget(targetEl:HTMLElement):this
addInteractiveTarget:function(targetEl){
this._map._targets[Util.stamp(targetEl)]=this;
return this;
}
添加可交互的目标对象
- removeInteractiveTarget(targetEl:HTMLElement):this
- getAttribution():String
Used by theattribution control
, returns the attribution option
必须要实现的方法
每个layer都应扩展L.Layer,并且重新实现以下方法
- onAdd(map:Map):this
为图层创建DOM元素,把这些DOM元素添加到所属的map panes
中,并且把监听函数关联到相关的地图事件上,Called onmap.addLayer(layer)
- onRemove(map:Map):this
从DOM中删除图层的dom元素,删除onAdd
中添加的监听,Called onmap.removeLayer(layer)
. - getEvents():Object
返回一个对象,类似于{ viewreset: this._reset }
foraddEventListener
,自动在map中添加或删除这个对象中的事件处理句柄 - getAttribution():String
返回一个包含了HTML的字符串,展示在attributionControl中 - beforeAdd(map:Map):this
可选方法,Called onmap.addLayer(layer)
, before the layer is added to the map,before events are initialized, without waiting until the map is in a usable state. Use for early initialization only.
事件
- @event layeradd: LayerEvent
Fired when a new layer is added to the map - @event layerremove: LayerEvent
Fired when some layer is removed from the map
用于处理图层和控件的方法
- addLayer(layer:Layer):this
- 其它
/**@method removeLayer(layer: Layer): this */
removeLayer:function(layer){
var id=Util.stamp(layer);
//不存在,则返回
if(!this._layers[id]){return this;}
if(this._loaded){
layer.onRemove(this);
}
if(layer.getAttribution&&this.attributionControl){
this.attributionControl.removeAttribution(layer.getAttribution());
}
delete this._layers[id];
if(this._loaded){
this.fire('layerremove',{layer:layer});
layer.fire('remove');
}
layer._map=layer._mapToAdd= null;
return this;
},
/**@method hasLayer(layer:Layer):this
* @description 若包含指定的图层,返回true
*/
hasLayer:function(layer){
//!!否定之否定表示肯定
return !!layer&&(Util.stamp(layer) in this._layers);
}
/**method eachLayer(fn:Function, context?:Object):this
* 对map中的每个图层迭代执行指定的函数,context表示函数的上下文
* * ```
* map.eachLayer(function(layer){
* layer.bindPopup('Hello');
* });
* ```
*/
eachLayer:function(method,context){
for(var i in this._layers){
method.call(context,this._layers[i]);
}
return this;
},
/**@method _addLayers(layers:Array|Object)
* 添加图层数组或组合图层
*/
_addLayers:function(layers){
// 若layers不为空,则判断是图层数组还是组合图层
// 若为图层数组则返回layers
// 若为组合图层,则返回只包含该组合图层的数组
// 若layers为空,则返回一个空的数组
layers=layers?(Util.isArray(layers)?layers:[layers]):[];
for(var i=o,len=layers.length;i<len;i++){
this.addLayer(layers[i]);
}
},
/**@method _addZoomLimit(layer)
* 添加对缩放的限制
*/
_addZoomLimit:function(layer){
// 判断图层的maxZoom和minZoom是否为数字
// 若maxZoom是数字或minZoom不是数字
if(isNaN(layer.options.maxZoom)||!isNaN(layer.options.minZoom)){
this._zoomBoundLayers[Util.stamp(layer)]=layer;
this._updateZoomLevels();
}
},
/**@method _removeZoomLimit(layer) */
_removeZoomLimit:function(layer){
var id=Util.stamp(layer);
if(this._zoomBoundLayers[id]){
delete this._zoomBoundLayers[id];
this._updateZoomLevels();
}
},
/**@method _updateZoomLevels() */
_updateZoomLevels:function(){
var minZoom = Infinity,
maxZoom=-Infinity,
oldZoomSpan=this._getZoomSpan();
// 比较获取minZoom和maxZoom
for(var i in this._zoomBoundLayers){
var options=this._zoomBoundLayers[i].options;
minZoom = options.minZoom ===undefined?minZoom:Math.min(minZoom,options.minZoom);
maxZoom = options.maxZoom === undefined?maxZoom:Math.max(maxZoom,options.maxZoom);
}
this._layersMaxZoom=maxZoom===-Infinity?undefined:maxZoom;
this._layersMinZoom=minZoom===Infinity?undefined:minZoom;
// @section Map状态变化事件
//@event zoomlevelschange:Event
// 当地图的缩放等级变化时触发
if(oldZoomSpan!===this._getZoomSpan()){
this.fire('zoomlevelschange');
}
if(this.options.maxZoom===undefined&&this._layersMaxZoom&&this.getZoom()>this._layersMaxZoom){
this.setZoom(this._layersMaxZoom);
}
if(this.options.minZoom===undefined&&this._layersMinZoom&&this.getZoom()<this._layersMinZoom){
this.setZoom(this._layersMinZoom);
}
}