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

feat: 经典热力图、点图层普通点支持动态设置 modelData (#1084) 

* chore: update version 2.8.30 -> 2.8.31

* feat: 经典热力图、点图层普通点支持动态设置 modelData

* style: lint style

* refactor: 调整热力图 modelData 更新方法的实现

* style: lint style
This commit is contained in:
YiQianYao 2022-04-27 14:50:41 +08:00 committed by GitHub
parent a6e32892ac
commit c40518677d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 310 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/layers/src/core/BaseLayer.ts
View File

@ -424,6 +424,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
const calEncodeData = this.calculateEncodeData(data, option);
const triangulation = this.triangulation;
if (calEncodeData && triangulation) {
return this.styleAttributeService.createAttributesAndIndices(
calEncodeData,

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

@ -1,3 +1,4 @@
import { IAttrubuteAndElements } from '@antv/l7-core';
import BaseLayer from '../core/BaseLayer';
import { IHeatMapLayerStyleOptions } from '../core/interface';
import HeatMapModels, { HeatMapModelType } from './models';
@ -32,6 +33,18 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
);
return this;
}
public updateModelData(data: IAttrubuteAndElements) {
if (data.attributes && data.elements) {
this.models[0].updateAttributesAndElements(
data.attributes,
data.elements,
);
} else {
console.warn('data error');
}
}
protected getConfigSchema() {
return {
properties: {

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

@ -155,6 +155,7 @@ export default class HeatMapModel extends BaseModel {
});
}
private buildHeatMapIntensity(): IModel {
this.layer.triangulation = HeatmapTriangulation;
return this.layer.buildLayerModel({
moduleName: 'heatmapintensity',
vertexShader: heatmapFramebufferVert,

1
packages/layers/src/point/models/normal.ts
View File

@ -92,6 +92,7 @@ export default class NormalModel extends BaseModel {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
this.layer.triangulation = PointTriangulation;
return [
this.layer.buildLayerModel({
moduleName: 'normalpoint',

82
stories/MapPerformance/components/updataHeatMap.tsx Normal file
View File

@ -0,0 +1,82 @@
// @ts-nocheck
// @ts-ignore
import { Scene } from '@antv/l7';
import { HeatmapLayer, LineLayer } from '@antv/l7-layers';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Demo extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [116.49114, 39.866973],
zoom: 10,
}),
});
scene.on('loaded', () => {
let heatData1 = [{ lat: 39.866973, lng: 116.49114, count: 48 }];
let heatData2 = [
{ lat: 39.866973, lng: 116.49114, count: 48 },
{ lat: 39.87, lng: 116.45, count: 48 },
];
const parser = {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
};
const heatmaplayer = new HeatmapLayer()
.source(heatData1, parser)
.size('count', [0, 1])
.shape('heatmap')
.style({
intensity: 10,
radius: 20,
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(heatmaplayer);
// console.log(heatmaplayer)
let modelData = heatmaplayer.createModelData(heatData2, parser);
setTimeout(() => {
heatmaplayer.updateModelData(modelData);
scene.render();
}, 1000);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
></div>
);
}
}

208
stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx Normal file
View File

@ -0,0 +1,208 @@
// @ts-nocheck
// @ts-ignore
import { Scene } from '@antv/l7';
import { PointLayer, HeatmapLayer } from '@antv/l7-layers';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
import { styled, withStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
export default class Demo extends React.Component {
private scene: Scene;
private layer: any;
constructor() {
this.state = {
currentYear: 5,
modelDatas: {},
};
}
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [113.76, 22.742875],
zoom: 12,
style: 'dark',
}),
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/6956815b-f2b0-4242-97d6-8f3fea62ea17.txt',
)
// fetch('https://gw.alipayobjects.com/os/bmw-prod/b08e27a8-26e0-4ba3-9881-7b01f5638716.txt')
.then((res) => res.text())
.then((res) => {
const list = {};
const array = res.split('\n');
array = array.map((str) => str.replace('"', ''));
array.map((str) => {
let data = str.split(',');
let lng = +data[0];
let lat = +data[1];
data.slice(2).map((e, i) => {
if (
e !== undefined &&
e !== '"' &&
e !== '' &&
typeof +e === 'number'
) {
if (!list[i + '']) {
list[i + ''] = [];
list[i + ''].push({
lng,
lat,
v: +e,
});
} else {
list[i + ''].push({
lng,
lat,
v: +e,
});
}
}
});
});
const listKeys = Object.keys(list);
// console.log(list)
// console.log(list['0'])
const data0 = list['0'];
const parser = {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
};
// const layer = new PointLayer({ })
// .source(data0, parser)
// .size('v', v => Math.pow(v, 2))
// .color('v', [
// '#ffffb2',
// '#fed976',
// '#feb24c',
// '#fd8d3c',
// '#f03b20',
// '#bd0026',
// ])
// // .shape('circle')
// .shape('simple')
// .style({
// opacity: 0.2
// })
// .shape('dot')
const layer = new HeatmapLayer()
.source(data0, parser)
.size('v', [0, 0.2, 0.4, 0.6, 0.8, 1])
.shape('heatmap')
.style({
intensity: 2,
radius: 10,
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.layer = layer;
this.scene = scene;
listKeys.map((key) => {
this.state.modelDatas[key + ''] = layer.createModelData(
list[key + ''],
parser,
);
});
});
});
}
public timelinechange(time) {
if (time !== this.state.currentYear) {
this.layer.updateModelData(this.state.modelDatas[time]);
this.scene.render();
this.setState({
currentYear: time,
});
}
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{this.state.modelDatas !== undefined && (
<RangeInput
min={0}
max={11}
value={this?.state?.currentYear || 0}
onChange={(e) => this.timelinechange(e)}
/>
)}
</div>
);
}
}
const PositionContainer = styled('div')({
position: 'absolute',
zIndex: 9,
bottom: '40px',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
});
const SliderInput = withStyles({
root: {
marginLeft: 12,
width: '60%',
},
valueLabel: {
'& span': {
background: 'none',
color: '#fff',
},
},
})(Slider);
function RangeInput({ min, max, value, onChange }) {
return (
<PositionContainer>
<SliderInput
min={min}
max={max}
value={value}
onChange={(event, newValue) => onChange(newValue)}
valueLabelDisplay="auto"
valueLabelFormat={(t) => t}
/>
</PositionContainer>
);
}

4
stories/MapPerformance/map.stories.tsx
View File

@ -6,6 +6,8 @@ import UpdateAttrAndEle_line from './components/updateAttrAndEle_line';
import UpdateAttrAndEle_polygon from './components/updateAttrAndEle_polygon';
import UpdateAttrAndEle_planeGeometry from './components/updateAttrAndEle_planeGeometry';
import UpdateAttrTimeLine from './components/updataPointsTimeLine';
import UpdateAttrShenZhen from './components/updateAttrAndEleShenZhen';
import UpdateHeatMap from './components/updataHeatMap';
import PointTest from './components/Map';
import BigLine from './components/BigLine';
import DataUpdate from './components/DataUpdate';
@ -16,6 +18,8 @@ storiesOf('地图性能检测', module)
.add('更新数据 update polygon attr&ele', () => <UpdateAttrAndEle_polygon />)
.add('更新数据 update plane geometry attr&ele', () => <UpdateAttrAndEle_planeGeometry />)
.add('更新数据 update updateAttrTimeLine', () => <UpdateAttrTimeLine />)
.add('更新数据 update UpdateAttrShenZhen', () => <UpdateAttrShenZhen />)
.add('更新数据 update UpdateHeatMap', () => <UpdateHeatMap />)
.add('点', () => <PointTest />)
.add('BigLine', () => <BigLine />)
.add('DataUpdate', () => <DataUpdate />);