fix: 修复热力图点被拉伸的问题 (#1169)

* feat: 去处事件节流

* fix: 修复热力图点被拉伸的问题

* style: lint style
This commit is contained in:
YiQianYao 2022-06-20 23:06:16 +08:00 committed by GitHub
parent 1598cb143b
commit 1cdbba571d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 48 deletions

View File

@ -3,20 +3,23 @@ uniform sampler2D u_colorTexture; // 根据强度分布的色带
uniform float u_opacity;
varying vec2 v_texCoord;
uniform vec2 u_ViewportSize;
float getBlurIndusty() {
float h = 2.0/512.0;
float vW = 2.0/u_ViewportSize.x;
float vH = 2.0/u_ViewportSize.y;
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 i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;
float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;
float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;
float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * h, vUv.y) ).r;
float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, 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 i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, 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;
float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;
float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;
float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y-1.0*vH) ).r;
return(
i11 +

View File

@ -10,6 +10,7 @@ import {
Marker,
MarkerLayer,
Popup,
HeatmapLayer,
} from '@antv/l7';
export default class Amap2demo extends React.Component {
@ -25,10 +26,10 @@ export default class Amap2demo extends React.Component {
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark',
style: 'blank',
// center: [115, 30],
center: [105.790327, 36.495636],
center: [120, 30],
zoom: 0,
// layers: [new window.AMap.TileLayer.Satellite()]
@ -38,44 +39,30 @@ export default class Amap2demo extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
)
.then((res) => res.json())
.then((data) => {
data.features = data.features.filter((item) => {
return item.properties.capacity > 800;
});
data.features.forEach((item) => {
// console.log(item.properties.capacity);
});
const pointLayer = new PointLayer({})
.source(data)
.shape('capacity', (capacity) =>
capacity < 5000 ? 'circle' : 'triangle',
)
.size('capacity', [0, 16])
.color('capacity', [
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6',
])
.active(true)
.style({
opacity: 0.5,
// strokeWidth: ["capacity", (capacity) => (capacity < 5000 ? 2 : 4)],
strokeWidth: ['capacity', [1, 2]],
stroke: [
'capacity',
(capacity) => (capacity < 5000 ? '#ff0000' : '#0000ff'),
],
});
scene.addLayer(pointLayer);
const layer = new HeatmapLayer({})
.source([{ lng: 120, lat: 30, mag: 1 }], {
parser: { type: 'json', x: 'lng', y: 'lat' },
})
.shape('heatmap')
.size('mag', [0, 1.0]) // weight映射通道
.style({
intensity: 2,
radius: 20,
opacity: 1.0,
rampColors: {
colors: [
'#FF4818',
'#F7B74A',
'#FFF598',
'#F27DEB',
'#8C1EB2',
'#421EB2',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
this.scene.addLayer(layer);
});
}