fix: heatmap render error (#1307)

* fix: 修复热力图渲染失效

* style: lint style

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2022-08-26 17:03:57 +08:00 committed by GitHub
parent c7f0f03e3c
commit c3fe87a686
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 1 deletions

View File

@ -0,0 +1,2 @@
### Heatmap
<code src="./heatmap.tsx"></code>

View File

@ -0,0 +1,58 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
pitch: 0,
center: [127.5671666579043, 7.445038892195569],
zoom: 2.632456779444394,
}),
});
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);
});
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

View File

@ -226,7 +226,7 @@ export default class HeatMapModel extends BaseModel {
enable: false,
},
blend: this.getBlend(),
count: 6,
// count: 6,
elements: createElements({
data: [0, 2, 1, 2, 3, 1],
type: gl.UNSIGNED_INT,