我需要控制由leaflet.js，heatmap创建的多个HeatMap图层实例的不透明度。
（源代码https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js）
我找到了一个答案here。
只有当我想要改变整个heatMap图层时它才有效;但现在的问题是我有多个heatLayer并希望控制每个人的不透明度。
我尝试使用_leaflet_id，因为创建的画布没有id，我不知道如何使用此插件分配一个。
然而，当我尝试使用_leaflet_id时，我得到一个未被捕获的异常＆＃34;数字不是函数＆＃34;
不透明度的数字由滑块设置：
/*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 });
}
};
关于如何控制单个热图画布上的不透明度的任何想法？
更新：
这是我尝试遍历DOM并设置多个画布对象以稍后更改它们的不透明度。到目前为止，只有在设置第一个画布时，这才有效。第二个似乎又重新写了所有这些。
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)
}
当设置aCanvas时，它会失败$（document.getElementsByTagName（＆＃39; canvas＆＃39;））。attr（＆＃39; id＆＃39;）！= true test，但我得到一个宽度我制作的不透明度滑块控制不透明度。但是，当设置bCanvas时;它重新命名aCanvas，并且在两个画布上都没有进行id测试，并给出了bCanvas的宽度。然后不透明度滑块会抱怨aCanvas为null并且不设置任何值。
不确定我在这里做错了什么。
这是滑块控件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>
以下是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>
答案 0 :(得分：0)
事实证明，答案是更多层次的分离和正确的操作顺序。在将每个画布添加到地图后，我必须为每个画布添加ID，因为leaflet-heat.js不是传统图层。相反，它是一个类，不包括从leaflet访问setOpacity（）方法，并将热图的每个实例创建为相同的画布，没有id或能够设置id。然后我可以在运行时调用canvas id的更改。由于我通过滑块控制不透明度，我还包括滑块头脚本和正文html，以帮助将来可能想要做同样事情的人。
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)
}
}
滑块脚本（标题中）：
<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：
<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>
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>