mirror of https://gitee.com/antv-l7/antv-l7
fix: 修复热力图点被拉伸的问题 (#1169)
* feat: 去处事件节流 * fix: 修复热力图点被拉伸的问题 * style: lint style
This commit is contained in:
parent
1598cb143b
commit
1cdbba571d
|
@ -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 +
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue