p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 修复颜色纹理取色问题 & 图片标注默认颜色问题

This commit is contained in:
thinkinggis 2020-03-26 14:58:28 +08:00
parent 9f8f64b309
commit 9d6b198f76
17 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/layers/src/heatmap/index.ts
View File

@ -15,11 +15,6 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
public renderModels() {
const shape = this.getModelType();
if (shape === 'heatmap') {
// if (this.layerModelNeedUpdate) {
// this.layerModel.buildModels();
// this.buildModels();
// this.layerModelNeedUpdate = false;
// }
if (this.layerModel) {
this.layerModel.render(); // 独立的渲染流程
}

27
packages/layers/src/heatmap/models/heatmap.ts
View File

@ -82,13 +82,14 @@ export default class HeatMapModel extends BaseModel {
// 初始化密度图纹理
this.heatmapFramerBuffer = createFramebuffer({
color: createTexture2D({
width,
height,
width: Math.floor(width / 4),
height: Math.floor(height / 4),
wrapS: gl.CLAMP_TO_EDGE,
wrapT: gl.CLAMP_TO_EDGE,
min: gl.LINEAR,
mag: gl.LINEAR,
}),
depth: false,
});
// 初始化颜色纹理
@ -99,9 +100,9 @@ export default class HeatMapModel extends BaseModel {
height: imageData.height,
wrapS: gl.CLAMP_TO_EDGE,
wrapT: gl.CLAMP_TO_EDGE,
min: gl.LINEAR,
mag: gl.LINEAR,
flipY: true,
min: gl.NEAREST,
mag: gl.NEAREST,
flipY: false,
});
return [this.intensityModel, this.colorModel];
@ -149,7 +150,7 @@ export default class HeatMapModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size = 2 } = feature;
const { size = 1 } = feature;
return [size as number];
},
},
@ -168,9 +169,9 @@ export default class HeatMapModel extends BaseModel {
enable: true,
func: {
srcRGB: gl.ONE,
srcAlpha: gl.ONE_MINUS_SRC_ALPHA,
srcAlpha: 1,
dstRGB: gl.ONE,
dstAlpha: gl.ONE_MINUS_SRC_ALPHA,
dstAlpha: 1,
},
},
});
@ -216,15 +217,7 @@ export default class HeatMapModel extends BaseModel {
depth: {
enable: false,
},
blend: {
enable: true,
func: {
srcRGB: gl.SRC_ALPHA,
srcAlpha: 1,
dstRGB: gl.ONE_MINUS_SRC_ALPHA,
dstAlpha: 1,
},
},
blend: this.getBlend(),
count: 6,
elements: createElements({
data: [0, 2, 1, 2, 3, 1],

6
packages/layers/src/heatmap/shaders/heatmap_3d_frag.glsl
View File

@ -7,11 +7,7 @@ varying float v_intensity;
void main(){
float intensity = texture2D(u_texture, v_texCoord).r;
vec2 ramp_pos = vec2(
fract(16.0 * (1.0 - v_intensity)),
floor(16.0 * (1.0 - v_intensity)) / 16.0);
// vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
vec4 color = texture2D(u_colorTexture,ramp_pos);
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
gl_FragColor = color;
gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
}

10
packages/layers/src/heatmap/shaders/heatmap_frag.glsl
View File

@ -6,12 +6,8 @@ varying float v_intensity;
void main(){
float intensity = texture2D(u_texture, v_texCoord).r;
vec2 ramp_pos = vec2(
fract(16.0 * (1.0 - intensity)),
floor(16.0 * (1.0 - intensity)) / 16.0);
// vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
vec4 color = texture2D(u_colorTexture,ramp_pos);
gl_FragColor = color;
gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity;
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
gl_FragColor =color;
gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
}

6
packages/layers/src/heatmap/shaders/heatmap_framebuffer_frag.glsl
View File

@ -2,11 +2,9 @@ precision highp float;
uniform float u_intensity;
varying float v_weight;
varying vec2 v_extrude;
#define GAUSS_COEF 0.3989422804014327
void main(){
float GAUSS_COEF = 0.3989422804014327;
float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude);
float val = v_weight * u_intensity * GAUSS_COEF * exp(d);
gl_FragColor = vec4(val, val, val, val);
gl_FragColor = vec4(val, 1., 1., 1.);
}

3
packages/layers/src/heatmap/shaders/heatmap_framebuffer_vert.glsl
View File

@ -8,11 +8,12 @@ varying vec2 v_extrude;
varying float v_weight;
uniform mat4 u_ModelMatrix;
#define GAUSS_COEF 0.3989422804014327
#pragma include "projection"
void main(){
v_weight = a_Size;
float GAUSS_COEF = 0.3989422804014327;
float ZERO = 1.0 / 255.0 / 16.0;
float extrude_x = a_Dir.x * 2.0 -1.0;
float extrude_y = a_Dir.y * 2.0 -1.0;

4
packages/layers/src/heatmap/shaders/heatmap_vert.glsl
View File

@ -5,7 +5,7 @@ uniform sampler2D u_texture;
varying vec2 v_texCoord;
varying float v_intensity;
void main() {
v_texCoord = a_Uv;
v_texCoord = a_Uv;
v_intensity = texture2D(u_texture, v_texCoord).r;
gl_Position = vec4(a_Position.xy, 0, 1.);
gl_Position = vec4(a_Position.xy, 0, 1.);
}

2
packages/layers/src/point/shaders/image_frag.glsl
View File

@ -20,7 +20,7 @@ float r = 1.0 - smoothstep(radius-(radius*0.01),
radius+(radius*0.01),
distanceSqrd);
vec4 textureColor=texture2D(u_texture,pos);
if(v_color == vec4(0.)){
if(v_color == vec4(1.0)){
gl_FragColor= vec4(textureColor.xyz, textureColor.w);
}else {
gl_FragColor= step(0.01, textureColor.z) * v_color;

4
packages/layers/src/raster/models/raster.ts
View File

@ -70,7 +70,7 @@ export default class RasterModel extends BaseModel {
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
flipY: false,
});
return [
this.layer.buildLayerModel({
@ -121,7 +121,7 @@ export default class RasterModel extends BaseModel {
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
flipY: false,
});
}
}

2
packages/layers/src/raster/raster.ts
View File

@ -53,7 +53,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
flipY: false,
});
this.models = [this.buildRasterModel()];
}

2
packages/layers/src/raster/raster2d.ts
View File

@ -35,7 +35,7 @@ export default class Raster2dLayer extends BaseLayer<IRasterLayerStyleOptions> {
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
flipY: false,
});
this.models = [
this.buildLayerModel({

7
packages/layers/src/raster/shaders/raster_2d_frag.glsl
View File

@ -19,10 +19,9 @@ void main() {
gl_FragColor = vec4(0, 0, 0, 0);
else {
float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]);
vec2 ramp_pos = vec2(
fract(16.0 * (1.0 - normalisedValue)),
floor(16.0 * (1.0 - normalisedValue)) / 16.0);
gl_FragColor = texture2D(u_colorTexture, ramp_pos);
vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0));
gl_FragColor = color;
gl_FragColor.a = gl_FragColor.a * u_opacity ;
}

5
packages/layers/src/raster/shaders/raster_vert.glsl
View File

@ -24,10 +24,7 @@ void main() {
// v_texCoord = a_Uv;
value = clamp(value,u_min,u_max);
float value1 = (value - u_min) / (u_max -u_min);
vec2 ramp_pos = vec2(
fract(16.0 * (1.0 - value1)),
floor(16.0 * (1.0 - value1)) / 16.0);
v_color = texture2D(u_colorTexture,ramp_pos);
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
// if(uv.x > 1.0 || uv.y > 1.0) {
// v_color = vec4(0.);

4
packages/utils/src/color.ts
View File

@ -37,7 +37,7 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData {
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
canvas.width = 256;
canvas.height = 1;
const gradient = ctx.createLinearGradient(0, 0, 256, 0);
const gradient = ctx.createLinearGradient(0, 0, 256, 1);
let data = null;
const min = colorRamp.positions[0];
const max = colorRamp.positions[colorRamp.positions.length - 1];
@ -49,5 +49,5 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData {
ctx.fillRect(0, 0, 256, 1);
data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
return new ImageData(data, 16, 16);
return new ImageData(data, 256, 1);
}

2
stories/Layers/Layers.stories.tsx
View File

@ -8,6 +8,7 @@ import Column from './components/column';
import DashLineDemo from './components/dash';
import DataUpdate from './components/data_update';
import HeatMapDemo from './components/HeatMap';
import HeatMapDemo3D from './components/heatmap3d';
import HexagonLayerDemo from './components/hexagon';
import LightDemo from './components/light';
import LineLayer from './components/Line';
@ -39,6 +40,7 @@ storiesOf('图层', module)
.add('3D弧线', () => <ArcLineDemo />)
.add('2D弧线', () => <Arc2DLineDemo />)
.add('热力图', () => <HeatMapDemo />)
.add('热力图3D', () => <HeatMapDemo3D />)
.add('网格热力图', () => <HexagonLayerDemo />)
.add('栅格', () => <RasterLayerDemo />)
.add('图片', () => <ImageLayerDemo />)

14
stories/Layers/components/HeatMap.tsx
View File

@ -37,13 +37,13 @@ export default class HeatMapLayerDemo extends React.Component {
opacity: 1.0,
rampColors: {
colors: [
'#FF4818',
'#F7B74A',
'#FFF598',
'#91EABC',
'#2EA9A1',
'#206C7C',
].reverse(),
'rgba(33,102,172,0)',
'rgb(103,169,207)',
'rgb(209,229,240)',
'rgb(253,219,199)',
'rgb(239,138,98)',
'rgb(178,24,43)',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});

61
stories/Layers/components/heatmap3d.tsx
View File

@ -18,39 +18,44 @@ export default class HeatMapLayerDemo extends React.Component {
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [121.268, 30.3628],
pitch: 0,
style: 'dark',
zoom: 2,
pitch: 58.5,
center: [111.8759, 30.6942],
rotation: 0.519,
zoom: 3.6116,
}),
});
const data = await response.json();
const layer = new HeatmapLayer();
layer
.source(data)
.shape('heatmap3D')
.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);
scene.on('loaded', () => {
console.log('scene loaded');
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
)
.then((res) => res.json())
.then((data) => {
const layer = new HeatmapLayer({})
.source(data)
.size('capacity', [0, 1])
.shape('heatmap3D')
// weight映射通道
.style({
intensity: 10,
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
}
});
scene.addLayer(layer);
});
});
this.scene = scene;
}