javascript - 使用没有插件的传单更改不透明度

标签 javascript leaflet geojson

我有一个 geojson 并尝试改变按钮的不透明度,但它无论如何都不起作用。

其中 statesData 是我的 geojson.js,style 和 onEachFeacture 是我拥有的其他功能。

这是我的按钮:

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

这是我的 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);

我尝试将 opacity: opacity 放在 style: style 之上并创建一个函数 opacity() 但也不起作用。我做了什么?

最佳答案

L.GeoJSON 没有 setOpacity 方法。使用 setStyle 方法。也不需要使用 jQuery:

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

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

关于javascript - 使用没有插件的传单更改不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47270647/

相关文章:

javascript - Ajax 调用以纯字符串格式返回数据。

javascript - 如何使用传单插件将 Vue-Leaflet 中的 map 显示限制为特定边界(没有 vue2 包装器)

typescript - 安装@types/leaflet 后无法访问全局 L 命名空间

javascript - 如何在 Google map API 中设置数据层特征标签的样式?

javascript - 如何使用 JavaScript 将 GeoJSON 保存到文件中

javascript - 如何隐藏文本内容而不是子元素?

javascript - 从表单外部重置 React Native Formik 表单

javascript - 将外部javascript导入html

angular - 如何导入在同一命名空间上扩展另一个模块的模块

java - 使用 JAX-RS 使用 JSON