SuperMap iClient3D for WebGL实现浮空热力图

xkf

前言

目前咱们热力图的示例是贴在模型上的,我想让他浮在空中可以吗？当然可以，操作和代码如下:

1. 设置两个DOM元素用于canvas的显示

先添加两个块元素，并设置样式和大小：

2. 使用随机数模拟点位数据

使用Math.random()模拟点位数据用于构建热力图。

        var len = 200;
        var points = [];
        var max = 0;
        var width = 800;
        var height = 400;
        while (len--) {
            var val = Math.floor(Math.random() * 100);
            max = Math.max(max, val);
            var point = {
                x: Math.floor(Math.random() * width),
                y: Math.floor(Math.random() * height),
                value: val
            };
            points.push(point)
        }
        var data = {
            max: max,
            data: points
        }

3. 通过heatmap创建热力图

使用上面模拟的点位数据用heatmap创建一个热力图图片，并通过canvas标签在球面上加载。

        // 通过heatmap创建一个canvas的热力图
        var heatmapInstance = h337.create({
            container: document.querySelector('.heatmap'),
            gradient: {
                0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"
            }
        });
        heatmapInstance.setData(data);
        var mycanvas = document.getElementsByClassName("heatmap-canvas");
        var imgData = mycanvas[1].toDataURL("image/png");

        var heatmapInstance4Bump = h337.create({
            container: document.querySelector('.heatmap'),
            gradient: {
                0.25: "rgb(0,0,0)", 0.55: "rgb(140,140,140)", 0.85: "rgb(216,216,216)", 1.0: "rgb(255,255,255)"
            }
        });
        heatmapInstance4Bump.setData(data);

        var mycanvasBump = document.getElementsByClassName("heatmap-canvas");
        var imgDataBump = mycanvasBump[2].toDataURL("image/png");

4. 通过顶点着色器创建浮空的热力图图元对象

            // 设置渲染状态对象
            var renderstate = Cesium.RenderState.fromCache({
                cull: {
                    enabled: true
                },
                depthTest: {
                    enabled: true
                },
                stencilTest: {
                    enabled: true,
                    frontFunction: Cesium.StencilFunction.ALWAYS,
                    frontOperation: {
                        fail: Cesium.StencilOperation.KEEP,
                        zFail: Cesium.StencilOperation.KEEP,
                        zPass: Cesium.StencilOperation.REPLACE
                    },
                    backFunction: Cesium.StencilFunction.ALWAYS,
                    backOperation: {
                        fail: Cesium.StencilOperation.KEEP,
                        zFail: Cesium.StencilOperation.KEEP,
                        zPass: Cesium.StencilOperation.REPLACE
                    },
                    reference: 0x2,
                    mask: 0x2
                },
                blending: Cesium.BlendingState.ALPHA_BLEND
            });

            var scene = viewer.scene;
            // 通过顶点着色器创建浮空的热力图 图元对象
            var rectangle = scene.primitives.add(new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                        rectangle: Cesium.Rectangle.fromDegrees(116.4463, 39.8999, 116.4563, 39.9119),
                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
                        height: 500.0,
                        granularity: Math.PI / (180.0 * 20000),
                        outlineColor: Cesium.Color.RED,
                        rotation: Math.PI / 2
                    })
                }),
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                    aboveGround: true,
                    renderState: renderstate,
                    vertexShaderSource: "attribute vec3 position3DHigh;\n\
                                    attribute vec3 position3DLow;\n\
                                    attribute vec2 st;\n\
                                    attribute float batchId;\n\
                                    uniform sampler2D bumpMap_3;\n\
                                    varying vec3 v_positionMC;\n\
                                    varying vec3 v_positionEC;\n\
                                    varying vec2 v_st;\n\
                                    void main()\n\
                                    {\n\
                                    vec4 p = czm_computePosition();\n\
                                    v_positionMC = position3DHigh + position3DLow;\n\
                                    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;\n\
                                    v_st = st;\n\
                                    vec4 color = texture2D(bumpMap_3, v_st);\n\
                                    float centerBump = color.r;\n\
                                    vec3 normalPoint = czm_geodeticSurfaceNormal(p.xyz+czm_cameraPositionWC.xyz, vec3(0.0), vec3(1.0));\n\
                                    vec3 result = normalPoint * centerBump * 61.8;\n\
                                    p +=vec4(result.xyz,0.0);\n\
                                    gl_Position = czm_modelViewProjectionRelativeToEye * p;\n\
                                    }\n\
                                    "
                })
            }));
			// 将热力图作为材质赋给上面创建的图元
            rectangle.appearance.material = new Cesium.Material({
                fabric: {
                    uniforms: {
                        image: imgData,
                        repeat: new Cesium.Cartesian2(1.0, 1.0),
                        color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
                        bumpMap: imgDataBump
                    },
                    components: {
                        diffuse: 'texture2D(image, fract(repeat * materialInput.st)).rgb * color.rgb',
                        alpha: 'texture2D(image, fract(repeat * materialInput.st)).a * color.a'
                    }
                },
                translucent: function (material) {
                    return material.uniforms.color.alpha < 1.0;
                }
            });

最后效果展示：

完整代码地址：链接：https://pan.baidu.com/s/1iLpWeEJW8_tDM5WunWMANw 提取码：hqht