美文网首页
WebGL点数据的热力图实现

WebGL点数据的热力图实现

作者: SuperMap技术控 | 来源:发表于2021-12-20 13:41 被阅读0次

    关于WebGL实现热力图的示例,官网已经给出,可如果将自己的点坐标做成热力图,该怎么做呢。因此,此篇博客给大家讲讲如何将自己的数据制作成热力图

    思路
    热力图的实现,是将绘制成热力图效果的canvas叠加到S3M图层上显示,因此我们需要做的工作就是将点坐标等比例投影到canvas上,再将canvas叠加到场景中正确的范围。本文的坐标数据是使用的SQL查询示例中的

    一、引入js文件

    引入热力图js文件heatmap.min.js,由于本文还使用了SQL查询示例,因此还需要引入SuperMap.Include.js文件

    二、添加标签

    先添加一个热力图标签,设置好宽度和高度的值,这两个参数值在后面会使用到

    三、canvas绘制

    在SQL中的onQueryComplete()拿到查询中的坐标值,并计算出最大最小的经度纬度值(所有坐标的范围)和经度纬度最大最小的插值。通过计算每个点在坐标范围的位置,等比例算点落在canvas中的坐标(此坐标只支持正整数,且数值不能大于canvas的宽度和高度)。Value数值代表此坐标的权重,值却大,影响范围越大

    var xmin = 116.444464551956 //左,最小的经度值
    var ymax = 39.9225146059847 //上,最大的纬度值
    var xmax = 116.471757505707 //右,最大的经度值
    var ymin = 39.9028846469855 //下,最小的纬度值

                  var h =xmax-xmin  //宽度
                  var s =  ymax-ymin //高度
                 
                  var x = (parseFloat(selectedFeatures[i].fieldValues["12"])-xmin)/h*800
                  var y = (ymax-parseFloat(selectedFeatures[i].fieldValues["13"]))/s*400
               var point = {
                  x : Math.floor(x),
                  y : Math.floor(y),
                  value : 1  //权重值
              };
    createHeatMap(points)
    function createHeatMap(points) {
    var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap')
    });

    var data = {
    max: 1,
    data: points
    }
    console.log(points)

    heatmapInstance.setData(data);
    }


    四、叠加到S3M图层

    将上一步拿到的坐标的范围值构造成一个Rectangle对象,拿到构造的canvas投影到S3M图层上

    var buildingLayer = scene.layers.find("Building@CBD");
    if (IDs.length > 0) {
    buildingLayer.setSelection(IDs);
    }

    var mycanvas = document.getElementsByClassName("heatmap-canvas");
    var imgData = mycanvas[1].toDataURL("image/png");
    var img = new Image();
    img.src = imgData;
    img.onload = function() {

    buildingLayer.addOverlayImage({
    bounds: Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax),
    name: 'heat-map' + Date.now(),
    image: img
    });


    }

    结言
    完整代码可从以下链接获取,若绘制出来的热力图是黑色的,可以查看第三部分,传入的坐标是否符合条件
    链接:https://pan.baidu.com/s/1j7uXir95bVhUQUJn4T-adg
    提取码:eyp2

    相关文章

      网友评论

          本文标题:WebGL点数据的热力图实现

          本文链接:https://www.haomeiwen.com/subject/epczfrtx.html