Change opacity using leaflet without plugin

问题

I have a geojson and try change the opacity chaging the button, but it dont work anyway.

Where statesData is my geojson.js, style and onEachFeacture are others functions that I have.

Here is my button:

<span id="image-opacity">0.5</span>
<input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />

And here is my JS

$('#sldOpacity').on('change', function(){
  $('#image-opacity').html(this.value);
  geojson.setOpacity(this.value);
});

var geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

I tried put opacity: opacity above style: style and create a function opacity() but dont work too. What I have do?

回答1:

L.GeoJSON does not have a setOpacity method. Use the setStyle method. Also there is no need to use jQuery:

L.DomEvent.on(L.DomUtil.get('sldOpacity'), 'change', function () {
    L.DomUtil.get('image-opacity').textContent = this.value;
    geojson.setStyle({
        opacity: this.value
    });
});

Reference: http://leafletjs.com/reference-1.2.0.html#geojson

来源：https://stackoverflow.com/questions/47270647/change-opacity-using-leaflet-without-plugin