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