Leaflet JS - AGS矢量图层更改不透明度

我有一个传单图，我有一组矢量图层（使用传单矢量图层插件），我希望能够用滑块调整矢量的不透明度，如jQuery UI滑块。Leaflet JS - AGS矢量图层更改不透明度

随着我在下面使用的代码，我的滑块不会做任何事情。该图层显示为不透明，但在滑块移动时不会更改。

如何将滑块连接到此矢量图层？

 var poleMarker = new L.Icon({ 
      iconUrl: "img/markers/manhole.png", 
      iconSize: new L.Point(16, 16), 
      iconAnchor: new L.Point(8, 8), 
      popupAnchor: new L.Point(1, -8) 
     }); 

     poles = new lvector.AGS({ 
       url: "http://gis.ultimap.com/arcgis/rest/services/**link to my map**/1", 
       fields: "*", 
       scaleRange: [3, 200], 
       showAll: true, 
       singlePopup: true, 
       esriOptions: false,  
       symbology: { 
        type: "single", 
        vectorOptions: { 
         icon: poleMarker, 
         opacity: .5 
        } 
       }, 
       popupTemplate: '<div class="iw-content"><h3>Pole</h3><table class="condensed-table"><tr><th>ID:</th><td>{OBJECTID}</td></tr></table></div>'     
      }); 

      $("#slider").slider({ 
       value: 50, 
       slide: function(e, ui) { 
        function updateOpacity(value) { 
          poles.setOpacity(value); 
         } 
       } 
      });

所有的例子我能找到显示此工作正常层，但不为矢量图层...

来源

2014-10-06 dchadney

我找到了一个解决方案，这将改变所有矢量的不透明度。由于它们呈现为svg，因此我可以将目标路径定义为具有.leaflet可点击类的路径并将其附加到滑块：

// Opacity Slider 
    $('#slider').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1, 
     slide: function(e,ui){ 
       $('path.leaflet-clickable').css('opacity', ui.value) 

     }     
    })

来源

2014-10-14 14:24:53 dchadney

Leaflet JS - AGS矢量图层更改不透明度

回答

相关问题