控制多个小叶热图图层的不透明度

Question

我需要控制不止一个由leaflet.js（热图）创建的HeatMap图层实例的不透明度。

（源代码https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js ）

我在这里找到了一个答案。

仅当我希望更改整个heatMap层时，它才有效； 但是现在的问题是我有多个heatLayer，并且希望控制每个单独的图层的不透明度。

我尝试使用_leaflet_id，因为创建的画布没有ID，并且我不知道如何使用此插件分配一个。

但是，当我尝试使用_leaflet_id时，出现未捕获的异常“数字不是函数”

不透明度的数字是通过滑块在此处设置的：

 /*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（'canvas'））。attr（'id'）！= true测试，但是我得到了宽度，并且我制作的不透明度滑块控制了不透明度。 但是，当设置了bCanvas时； 它重命名了aCanvas，并且在两个画布上均未通过id测试，并为bCanvas提供了宽度。 然后，不透明度滑块抱怨aCanvas为null，并且未设置任何值。

不知道我在做什么错。

这是滑块控件顺便说一句：

 <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>

Answer 1

事实证明，答案是更多的分离层次和正确的操作顺序。 将id添加到地图后，我不得不向每个画布添加id，因为leaflet-heat.js不是传统图层。 而是，它是一个类，不包括从传单访问setOpacity（）方法的权限，并且将热图的每个实例创建为相同的画布而没有ID或没有设置ID的能力。 然后，我可以在运行时调用对画布ID的更改。 由于我是通过滑块控制不透明度的，所以我还包括了滑块头脚本和body 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正文滑块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>