控制多个小叶热图图层的不透明度
[英]Control the Opacity of Multiple Leaflet Heatmap Layers
问题描述
I need to control the opacity of more than one instance of the HeatMap Layers created by leaflet.js , heatmap. 
我需要控制不止一个由leaflet.js（热图）创建的HeatMap图层实例的不透明度。
(source code https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js ) （源代码https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js ）
I found one answer here . 我在这里找到了一个答案。
It only works if I want the entire heatMap layer to change; 仅当我希望更改整个heatMap层时，它才有效； but now the problem is I have more than one heatLayer and want to control opacity on each individual one. 但是现在的问题是我有多个heatLayer，并且希望控制每个单独的图层的不透明度。
I have tried using _leaflet_id because the canvas created has no id and I do not know how to assign one with this plugin. 我尝试使用_leaflet_id，因为创建的画布没有ID，并且我不知道如何使用此插件分配一个。
However, when I try using _leaflet_id I get a uncaught exception "number is not a function" 但是，当我尝试使用_leaflet_id时，出现未捕获的异常“数字不是函数”
The number for opacity is being set by a slider here: 不透明度的数字是通过滑块在此处设置的：
/*slide controls for opacity - currently on canvas object*/
if( testID == 'oSlider' ) {
var oHandle = ui.values[0]
var opacityNum = (oHandle/100)
if( comboBox === 'A' ) {
( aHeat._leaflet_id ).css({ "opacity":opacityNum });
}
else if( comboBox === 'B' ) {
( bHeat._leaflet_id ).css({ "opacity":opacityNum });
}
};
Any ideas on how I might control the opacity on individual heatmap canvases? 关于如何控制单个热图画布的不透明度的任何想法？
UPDATE: 更新：
Here is my attempt to traverse the DOM and set the multiple canvas objects to later change the opacity on them. 这是我尝试遍历DOM并将多个画布对象设置为以后更改它们的不透明度的尝试。 So far this only works, when the first canvas is set. 到目前为止，这仅在设置第一个画布时才有效。 The second appears to re-write all of them all over again. 第二个似乎重新重写了所有它们。
function addDataSet() {
var dataSourceCmb = document.getElementById("dataSourceCmb").value;
/* A-canvas Add --- Start */
if(dataSourceCmb === 'A') {
if(typeof(aHeat)==='undefined' || aHeat.undefined===true)
{
aHeat = L.heatLayer(aPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("A Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','aCanvas');
console.log("A Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
}
})
}
}
/* A-canvas Add --- End */
/* B-canvas Add --- START */
else if(dataSourceCmb === 'B') {
if(typeof(bHeat)==='undefined' || bHeat.undefined===true) {
bHeat = L.heatLayer(bPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("B Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','bCanvas');
console.log("B Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
/* console.log($(document.getElementsByTagName('canvas')).attr('id'));*/
}
})
}
}
/* B-canvas Add --- End */
/* C-canvas Add --- START */
else if(dataSourceCmb === 'C') {
if(typeof(cHeat)==='undefined' || cHeat.undefined===true ){
cHeat = L.heatLayer(cPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("C Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','cCanvas');
console.log("C Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
/* console.log($(document.getElementsByTagName('canvas')).attr('id'));*/
}
})
}
}
/* C-canvas Add --- End */
$(document.getElementsByTagName('canvas')).each(function(i, obj){
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
console.log("no canvas id set for canvas: "+i);
}
else {
console.log($(document.getElementsByTagName('canvas')).attr('id')+" canvas no: "+i);
}
})
console.log("aCanvas width: " + document.getElementById("aCanvas").width)
console.log("bCanvas width: " + document.getElementById("bCanvas").width)
console.log("cCanvas width: " + document.getElementById("cCanvas").width)
}
When aCanvas is set it fails the $(document.getElementsByTagName('canvas')).attr('id') != true test, but I get a width back and the opacity slider I made controls the opacity. 设置aCanvas时，它无法通过$（document.getElementsByTagName（'canvas'））。attr（'id'）！= true测试，但是我得到了宽度，并且我制作的不透明度滑块控制了不透明度。 However, when bCanvas is set; 但是，当设置了bCanvas时； it re-names aCanvas, and fails the id test on both canvases, and gives a width for bCanvas. 它重命名了aCanvas，并且在两个画布上均未通过id测试，并为bCanvas提供了宽度。 Then the opacity slider complains that aCanvas is null and does not set any values. 然后，不透明度滑块抱怨aCanvas为null，并且未设置任何值。
Not sure what i'm doing wrong here. 不知道我在做什么错。
Here is the slider control btw: 这是滑块控件顺便说一句：
<script>
/* adjust intesity, radius, blur based on zoom-level; it should be more intense at higher zoom levels */
/* maxZoom: the lower the number the more intense (gives the zoom level to be the maximum intensity */
/* radius: the radius of each point; the more they overlap the more intense the color */
/* blur: the amount of blurring to each point to allow for more overlap; the larger the more blur */
$(document).ready(function() {
$( ".slider-vertical" ).each(function(){
$this = $(this);
$(".slider",$this).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
values: [60],
slide: function( event, ui ) {
$(this).parent().find(".amount").html( ui.values[0] );
var testID = $(this).attr('id')
var dataSourceCmb = document.getElementById("dataSourceCmb").value
/*slide controls for radius (range 0.55-50.55) */
/*slide controls for maxZoom/aka Intensity (range 4-24) */
/*slide controls for blur*/
/*slide controls for opacity - currently on canvas object*/
if( testID == 'oSlider' ) {
var oHandle = ui.values[0]
var opacityNum = (oHandle/100)
if( dataSourceCmb === 'A' ){
document.getElementById("aCanvas").style.opacity=opacityNum;
console.log(document.getElementById("aCanvas").style.opacity);
}
else if( dataSourceCmb === 'B' ){
document.getElementById("bCanvas").style.opacity=opacityNum;
}
else if( dataSourceCmb === 'C' ){
document.getElementById("cCanvas").style.opacity=opacityNum;
}
};
/* slide controls for hue */
}
});
$( "#amount" ).html( $( ".slider" ).slider( "values",0 ) );
});
});
</script>
Here are the html controls btw: 这是html控件btw：
<div id="sliderControls" class="leaflet-control">
<div id="rParent" class="slider-vertical">
<b style="margin-left:100px">Radius:</b>
<span id="radius" class="amount">0</span>
<div id="rSlider" class="slider"></div>
</div>
<div id="iParent" class="slider-vertical">
<b style="margin-left:100px">Intensity:</b>
<span id="intensity" class="amount">0</span>
<div id="iSlider" class="slider"></div>
</div>
<div id="bParent" class="slider-vertical">
<b style="margin-left:100px">Blur:</b>
<span id="blur" class="amount">0</span>
<div id="bSlider" class="slider"></div>
</div>
<div id="oParent" class="slider-vertical">
<b style="margin-left:100px">Opacity:</b>
<span id="opacity" class="amount">0</span>
<div id="oSlider" class="slider"></div>
</div>
<div id="hParent" class="slider-vertical">
<b style="margin-left:100px">Hue:</b>
<span id="hue" class="amount">0</span>
<div id="hSlider" class="slider"></div>
</div>
</div>
1 个解决方案
解决方案1
0 已采纳 2014-09-26 14:50:32
It turns out the answer was more layers of separation and proper order of operations. 事实证明，答案是更多的分离层次和正确的操作顺序。 I had to add ids to each canvas after they were added to the map because the leaflet-heat.js is not a traditional layer. 将id添加到地图后，我不得不向每个画布添加id，因为leaflet-heat.js不是传统图层。 Rather, it is a class and does not include access to the setOpacity() method from leaflet and creates each instance of the heatmap as a identical canvas without a id or ability to set the id. 而是，它是一个类，不包括从传单访问setOpacity（）方法的权限，并且将热图的每个实例创建为相同的画布而没有ID或没有设置ID的能力。 Then I could call the changes to the canvas ids at runtime. 然后，我可以在运行时调用对画布ID的更改。 Since I'm controlling the opacity via a slider, I'm also including the slider header script and body html to help out whomever may want to do the same thing in the future. 由于我是通过滑块控制不透明度的，所以我还包括了滑块头脚本和body html，以帮助将来可能要做相同事情的人。
JS: JS：
function addDataSet() {
var dataSourceCmb = document.getElementById("dataSourceCmb").value;
/* permit Add --- Start */
if(dataSourceCmb === "Permits") {
if(typeof(PermitHeat)==="undefined" || PermitHeat.undefined===true)
{
PermitHeat = L.heatLayer(PermitsPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
}
}
/* permit Add --- End */
/* rig Add --- START */
else if(dataSourceCmb === "Rigs") {
if(typeof(RigHeat)==="undefined" || RigHeat.undefined===true) {
RigHeat = L.heatLayer(RigsPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
}
}
/* rig Add --- End */
/* branch Add --- START */
else if(dataSourceCmb === "Branches") {
if(typeof(BranchHeat)==="undefined" || BranchHeat.undefined===true ){
BranchHeat = L.heatLayer(BranchesPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
}
}
/* branch Add --- End */
var theCanvases = document.getElementsByTagName("canvas");
/* setting canvas Ids */
for (var i=0; i < theCanvases.length; i++) {
/* console.log("Type of attr id: " + typeof($(document.getElementsByTagName("canvas")).attr("id")) ); */
var myCanvas = theCanvases[i];
var attr = $(myCanvas).attr("id");
setTimeout(function(){
/* console.log( myCanvas );*/
/* console.log( attr ); */
if( typeof(attr) === "undefined") {
/*console.log("this attr id: " + $(myCanvas).attr("id"));*/
if(dataSourceCmb === "Permits") {
$(myCanvas).attr("id","pCanvas");
}
else if(dataSourceCmb ==="Rigs") {
$(myCanvas).attr("id","rCanvas");
}
else if(dataSourceCmb ==="Branches") {
$(myCanvas).attr("id","bCanvas");
}
}
},500)
}
}
Slider Script (in header): 滑块脚本（在标题中）：
<script>
/* adjust intesity, radius, blur based on zoom-level; it should be more intense at higher zoom levels */
/* maxZoom: the lower the number the more intense (gives the zoom level to be the maximum intensity */
/* radius: the radius of each point; the more they overlap the more intense the color */
/* blur: the amount of blurring to each point to allow for more overlap; the larger the more blur */
$(document).ready(function() {
$( ".slider-vertical" ).each(function(){
$this = $(this);
$(".slider",$this).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
values: [60],
slide: function( event, ui ) {
$(this).parent().find(".amount").html( ui.values[0] );
var testID = $(this).attr('id')
var dataSourceCmb = document.getElementById("dataSourceCmb").value
/*slide controls for radius (range 0.55-50.55) */
/*slide controls for maxZoom/aka Intensity (range 4-24) */
/*slide controls for blur*/
/*slide controls for opacity - currently on canvas object*/
if( testID == 'oSlider' ) {
var oHandle = ui.values[0]
var opacityNum = (oHandle/100)
if( dataSourceCmb === 'Permits' ){
document.getElementById("pCanvas").style.opacity=opacityNum;
/*console.log(document.getElementById("pCanvas").style.opacity);*/
}
else if( dataSourceCmb === 'Rigs' ){
document.getElementById("rCanvas").style.opacity=opacityNum;
}
else if( dataSourceCmb === 'Branches' ){
document.getElementById("bCanvas").style.opacity=opacityNum;
}
};
/*slide controls for hue*/
}
});
$( "#amount" ).html( $( ".slider" ).slider( "values",0 ) );
});
});
</script>
html body slider div: html正文滑块div：
<div id="sliderControls" class="leaflet-control">
<div id="oParent" class="slider-vertical">
<b style="margin-left:100px">Opacity:</b>
<span id="opacity" class="amount">0</span>
<div id="oSlider" class="slider"></div>
</div>
</div>
Combo Box for the dataSourceCmb: dataSourceCmb的组合框：
<div id="datasourceContent" class="leaflet-control">
<div>
<h1 class="header">Data Sets</h1>
<br>
<div class="ui-widget">
<label>Choose a Dataset:</label>
<select id="dataSourceCmb" >
<option value="">Select one...</option>
<option value="Permits">Permits</option>
<option value="Rigs">Rigs</option>
<option value="Branches">Branches</option>
</select>
</div>
<div class="btn-group">
<button id="addDataBtn" type="button" onClick="addDataSet()">
<span></span>Add Dataset to Map</button>
<button id="removeDataBtn" type="button" onClick="removeDataSet()">
<span></span>Remove Dataset from Map</button>
<br>
<br>
</div>
<br>
<br>
<br>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.