mirror of https://gitee.com/antv-l7/antv-l7
Shihui (#981)
* feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序 * style: lint style * feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化） * feat: polygon extrude 模式支持配置固定高度 * style: lint style * feat: 优化后处理 bloom 的效果 * feat: 修改交替绘制 bloom 的写法 * style: lint style * feat: 完善 iconService 加载渲染和销毁 * style: lint style * feat: 补全 mapbox 模式下等面积点 * style: lint style * fix: 修复 pointLayer animate 模式 opacity 失效 * style: lint style * feat: 拆分 pointLayer 的 shader * style: lint sytle * feat: 拆分 lineLayer 的 linear 模式 * style: lint style * feat: 优化点击的拾取判断 * style: lint style * feat: 取消圆柱 shader 中的三元表达式、增强健壮性 * feat: 点图层圆柱体支持固定高度配置 heightfixed * feat: 点图层圆柱体支持拾取高亮颜色的光照计算 * style: lint style * style: lint style * feat: 拆分 lintLayer line 模式下的 dash line * style: lint style * feat: lineLayer simpleline 的 linear shader 代码拆分 * style: lint style * feat: 拆分 lineLayer arcLine linear shader 代码 * style: line style * feat: lineLayer arc line 在 shader 中移除 linear 部分计算 * feat: 拆分 lineLayer arc dash 虚线的 shader 代码 * style: lint style * feat: 拆分 lineLayer arc3d linear 部分的 shader 代码 * style: lint style * style: lint style * feat: 完善 isMiniAli 的判断，兼容 smallfish H5+ 的模式 * style: lint style * style: adjust mulpass demo * feat: 提供 getScale 方法 * style: lint style * feat: 修复支付宝小程序h5+开发模式下引入l7样式失效问题 * feat: 修改 l7hammerjs 的导入 * fix: 恢复原有的 picking shader 代码，解决移动端高亮存在冲突破面的情况 * feat: 重新设置 l7hammerjs 的导入方式 * fix: 修复 createTexture 的数据类型在 支付宝 环境中使用 Uint8ClampedArray 存在数据类型不兼容的现象 * style: lint style * feat: 兼容高德地图 2.x 在部分安卓手机上点击拾取失效的情况 * style: lint style * feat: 优化经典热力图显示效果 * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
86c3dd9fec
commit
c38805821a
|
|
@ -16,10 +16,14 @@ import { IHeatMapLayerStyleOptions } from '../../core/interface';
|
|||
import { HeatmapTriangulation } from '../../core/triangulation';
|
||||
import heatmap3DFrag from '../shaders/heatmap_3d_frag.glsl';
|
||||
import heatmap3DVert from '../shaders/heatmap_3d_vert.glsl';
|
||||
|
||||
// 绘制平面热力的 shader
|
||||
import heatmapColorFrag from '../shaders/heatmap_frag.glsl';
|
||||
import heatmapColorVert from '../shaders/heatmap_vert.glsl';
|
||||
|
||||
import heatmapFramebufferFrag from '../shaders/heatmap_framebuffer_frag.glsl';
|
||||
import heatmapFramebufferVert from '../shaders/heatmap_framebuffer_vert.glsl';
|
||||
import heatmapColorVert from '../shaders/heatmap_vert.glsl';
|
||||
|
||||
import { heatMap3DTriangulation } from '../triangulation';
|
||||
@injectable()
|
||||
export default class HeatMapModel extends BaseModel {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,43 @@
|
|||
uniform sampler2D u_texture;
|
||||
uniform sampler2D u_colorTexture;
|
||||
uniform sampler2D u_texture; // 热力强度图
|
||||
uniform sampler2D u_colorTexture; // 根据强度分布的色带
|
||||
uniform float u_opacity;
|
||||
varying vec2 v_texCoord;
|
||||
varying float v_intensity;
|
||||
|
||||
float getBlurIndusty() {
|
||||
float h = 2.0/512.0;
|
||||
vec2 vUv = v_texCoord;
|
||||
float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y + 1.0 * h) ).r;
|
||||
float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y + 1.0 * h) ).r;
|
||||
float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y + 1.0 * h) ).r;
|
||||
|
||||
float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y) ).r;
|
||||
float i22 = texture2D( u_texture, vec2( vUv.x , vUv.y) ).r;
|
||||
float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y) ).r;
|
||||
|
||||
float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y-1.0*h) ).r;
|
||||
float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * h, vUv.y-1.0*h) ).r;
|
||||
float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * h, vUv.y-1.0*h) ).r;
|
||||
|
||||
return(
|
||||
i11 +
|
||||
i12 +
|
||||
i13 +
|
||||
i21 +
|
||||
i21 +
|
||||
i22 +
|
||||
i23 +
|
||||
i31 +
|
||||
i32 +
|
||||
i33
|
||||
)/9.0;
|
||||
}
|
||||
|
||||
|
||||
void main(){
|
||||
float intensity = texture2D(u_texture, v_texCoord).r;
|
||||
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
|
||||
// float intensity = texture2D(u_texture, v_texCoord).r;
|
||||
float intensity = getBlurIndusty();
|
||||
vec4 color = texture2D(u_colorTexture, vec2(intensity, 0.0));
|
||||
|
||||
gl_FragColor =color;
|
||||
gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
precision highp float;
|
||||
attribute vec3 a_Position;
|
||||
attribute vec2 a_Uv;
|
||||
uniform sampler2D u_texture;
|
||||
varying vec2 v_texCoord;
|
||||
varying float v_intensity;
|
||||
|
||||
void main() {
|
||||
v_texCoord = a_Uv;
|
||||
v_intensity = texture2D(u_texture, v_texCoord).r;
|
||||
|
||||
gl_Position = vec4(a_Position.xy, 0, 1.);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Amap2demo_heatmap extends React.Component {
|
||||
|
|
@ -13,38 +13,63 @@ export default class Amap2demo_heatmap extends React.Component {
|
|||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
map: new Mapbox({
|
||||
// pitch: 0,
|
||||
// center: [127.5671666579043, 7.445038892195569],
|
||||
// zoom: 2.632456779444394,
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [127.5671666579043, 7.445038892195569],
|
||||
zoom: 2.632456779444394,
|
||||
center: [120, 30],
|
||||
zoom: 4,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// fetch(
|
||||
// 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
// )
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// const layer = new HeatmapLayer({})
|
||||
// .source(data)
|
||||
// .shape('heatmap')
|
||||
// .size('mag', [0, 1.0]) // weight映射通道
|
||||
// .style({
|
||||
// intensity: 2,
|
||||
// radius: 20,
|
||||
// opacity: 1.0,
|
||||
// rampColors: {
|
||||
// colors: [
|
||||
// '#FF4818',
|
||||
// '#F7B74A',
|
||||
// '#FFF598',
|
||||
// '#91EABC',
|
||||
// '#2EA9A1',
|
||||
// '#206C7C',
|
||||
// ].reverse(),
|
||||
// positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
// },
|
||||
// });
|
||||
// scene.addLayer(layer);
|
||||
// });
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/95d5a2c3-f8fa-47f3-8664-ecb8459565ee.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [0, 1.0]) // weight映射通道
|
||||
.size('weight', [0, 1.0]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
intensity: 3,
|
||||
radius: 24,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
colors: ['#030EAB', '#0F41EB', '#40D785', '#F1D41A', '#FE0257'],
|
||||
positions: [0, 0.25, 0.5, 0.75, 1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue