Layer: Layer.js

    leaflet中的图层与esri中的图层不同,esri中的图层包含多个要素,而leaflet中的每个要素就是一个图层。(可能有误解,后期接触深了再确认是否存在误解)

Layer的基类,定义了方法,继承了来自L.Evented的所有方法、选项和事件

属性

  • options:Object 扩展了L.Layer的类都会继承以下选项
    • pane:String,默认overlayPane
      默认情况下,图层将被添加到map的overlay pane,覆盖该选项会将图层添加到其它pane上
    • attribution:String =null
      在attributionControl中展示的字符串,描述了图层数据,通常表示版本等,例如 © OpenStreetMap contributors
    • bubblingMouseEvents:Boolean=true

方法

  • addTo(map:Map|LayerGroup):this
    把图层添加到map上或layergroup中
  • remove:this
    从map中删除该图层
  • removeFrom(map:Map):this
    从给定的map中删除该图层
  • getPane(name? : String): HTMLElement
    Returns the HTMLElement representing the named pane on the map ,If name 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 the attribution control, returns the attribution option

必须要实现的方法

每个layer都应扩展L.Layer,并且重新实现以下方法

  • onAdd(map:Map):this
    为图层创建DOM元素,把这些DOM元素添加到所属的map panes中,并且把监听函数关联到相关的地图事件上,Called on map.addLayer(layer)
  • onRemove(map:Map):this
    从DOM中删除图层的dom元素,删除 onAdd中添加的监听,Called on map.removeLayer(layer).
  • getEvents():Object
    返回一个对象,类似于{ viewreset: this._reset }for addEventListener,自动在map中添加或删除这个对象中的事件处理句柄
  • getAttribution():String
    返回一个包含了HTML的字符串,展示在attributionControl中
  • beforeAdd(map:Map):this
    可选方法,Called on map.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);
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,279评论 0 10
  • 每天都浑浑噩噩的,聊聊微信,玩玩游戏,看看电视剧一天就过去了,这样的生活真可怕,更可怕的是我竟然就这样过了好几年,...
    晴萌萌阅读 160评论 0 0
  • 写在2019年的第一天,可能是一些碎碎念吧,非专业,无深度,愿你看了有所感悟,我只是写下了自己的想法碎片 一 月入...
    八级大哥当阅读 299评论 0 0
  • 今天我要跟大家分享了这本书,名字叫喜乐与我。这本书主要讲的是有一个人家很穷。爸爸妈妈和儿子。 都要。捡瓶子和罐子才...
    张祚语_5b66阅读 781评论 0 0