Question

我有一个传单地图，我有一堆矢量图层（使用传单矢量图层插件），我希望能够使用滑块调整矢量的不透明度，如jQuery UI滑块。

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

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

      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);
                        }
                }
            });

我能找到的所有例子都表明这适用于普通图层，但不适用于矢量图层......

Answer 1

我找到了一个解决方案，它将改变所有向量的不透明度。由于它们被渲染为svg，我可以只定位具有.leaflet-clickable类的路径并将其附加到滑块：

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

         }                
    })

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

1 个答案: