2017-06-19 2 views
0

Ich habe eine Leaflet-Map mit einer Auswahl an Overlay-Layern und einem Basislayer-Setup unter Verwendung von L.control.layers. Ich möchte einen Deckkraft-Schieberegler, Leaflet.OpacityControls, der auf der ausgewählten Ebene mit der darunter liegenden Basisebene funktioniert.L.control.layers und Leaflet.OpacityControls

Blick in L.control.layers:

for (var i = inputs.length - 1; i >= 0; i--) { 
    input = inputs[i]; 
    layer = this._getLayer(input.layerId).layer; 
    hasLayer = this._map.hasLayer(layer); 

und layer ist

layer = NewClass {_url: "http://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png", options: Object, _events: Object, _initHooksCalled: true, _leaflet_id: 98} 

oder später in util.js

stamp: function (obj) { 
    /*eslint-disable */ 
    obj._leaflet_id = obj._leaflet_id || ++L.Util.lastId; 
    return obj._leaflet_id; 

und obj ist

obj = NewClass {_url: "http://crores.s3.amazonaws.com/tiles/baistDetail/{z}/{x}/{y}.png", options: Object, _events: Object, _initHooksCalled: true, _leaflet_id: 100} 

Ich bin mir nicht sicher, ob dies zur Anzeige des Bedienfelds gehört oder ob es sich um die aktuelle aktive Überlagerungsschicht handelt. In jedem Fall sind diese Variablen nicht verfügbar, sobald die Seite fertig geladen ist. Sie sind wahrscheinlich, aber sie Schlüssel zu meiner Frage können sein, wie man auf sie zugreift.

Das Beispiel für den Deckkraft-Schieberegler ist fest für die Overlay-Ebene codiert.

map.addControl(opacitySlider); 
opacitySlider.setOpacityLayer(overlay); 
overlay.setOpacity(0.5); 

wo overlay Schicht eine Broschüre ist. Wie stelle ich overlay auf die ausgewählte Overlay-Map ein? L.control.layers weiß, aber wie übergebe ich das an den opacitySlider.

Ich kann nicht glauben, dass dies keine allgemeine Notwendigkeit ist, aber nichts gefunden haben.

Der entsprechende Teil des Leaflet.OpacityControls:

L.Control.opacitySlider = L.Control.extend({ 
    options: { 
     position: 'topright' 
    }, 
    setOpacityLayer: function (layer) { 
      opacity_layer = layer; 
    }, 
    onAdd: function (map) { 
     var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control'); 

     $(opacity_slider_div).slider({ 
      orientation: "vertical", 
      range: "min", 
      min: 0, 
      max: 100, 
      value: 60, 
      step: 10, 
      start: function (event, ui) { 
      //When moving the slider, disable panning. 
      map.dragging.disable(); 
      map.once('mousedown', function (e) { 
       map.dragging.enable(); 
      }); 
      }, 
      slide: function (event, ui) { 
      var slider_value = ui.value/100; 
      opacity_layer.setOpacity(slider_value); 
      } 
     });   
     return opacity_slider_div; 
    } 
}); 

Meine Website ohne die implementierte Opazitätsregler: https://stark-cove-20051.herokuapp.com/streets/156. Sehr viel Beta.

Antwort