美文网首页
Layer: Layer.js

Layer: Layer.js

作者: 1e6c2b3901b0 | 来源:发表于2019-01-18 08:32 被阅读0次
        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);
        }
      }
    

    相关文章

      网友评论

          本文标题:Layer: Layer.js

          本文链接:https://www.haomeiwen.com/subject/xsbidqtx.html