From c40518677d85c2c02e23be93ea9748d970329a81 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Wed, 27 Apr 2022 14:50:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=8F=E5=85=B8=E7=83=AD=E5=8A=9B?= =?UTF-8?q?=E5=9B=BE=E3=80=81=E7=82=B9=E5=9B=BE=E5=B1=82=E6=99=AE=E9=80=9A?= =?UTF-8?q?=E7=82=B9=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=20modelData=20(#1084)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: update version 2.8.30 -> 2.8.31 * feat: 经典热力图、点图层普通点支持动态设置 modelData * style: lint style * refactor: 调整热力图 modelData 更新方法的实现 * style: lint style --- packages/layers/src/core/BaseLayer.ts | 1 + packages/layers/src/heatmap/index.ts | 13 ++ packages/layers/src/heatmap/models/heatmap.ts | 1 + packages/layers/src/point/models/normal.ts | 1 + .../components/updataHeatMap.tsx | 82 +++++++ .../components/updateAttrAndEleShenZhen.tsx | 208 ++++++++++++++++++ stories/MapPerformance/map.stories.tsx | 4 + 7 files changed, 310 insertions(+) create mode 100644 stories/MapPerformance/components/updataHeatMap.tsx create mode 100644 stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 1dd109a32b..415d62e766 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -424,6 +424,7 @@ export default class BaseLayer extends EventEmitter } const calEncodeData = this.calculateEncodeData(data, option); const triangulation = this.triangulation; + if (calEncodeData && triangulation) { return this.styleAttributeService.createAttributesAndIndices( calEncodeData, diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts index 67728f90c1..c29511bb7a 100644 --- a/packages/layers/src/heatmap/index.ts +++ b/packages/layers/src/heatmap/index.ts @@ -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 { ); 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: { diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 0f7f3e3726..f244dc5ec5 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -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, diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index 38e9c93d97..5eee353f13 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -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', diff --git a/stories/MapPerformance/components/updataHeatMap.tsx b/stories/MapPerformance/components/updataHeatMap.tsx new file mode 100644 index 0000000000..4e941b166f --- /dev/null +++ b/stories/MapPerformance/components/updataHeatMap.tsx @@ -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 ( +
+ ); + } +} diff --git a/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx b/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx new file mode 100644 index 0000000000..96f6ecc9c3 --- /dev/null +++ b/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx @@ -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 ( +
+ {this.state.modelDatas !== undefined && ( + this.timelinechange(e)} + /> + )} +
+ ); + } +} + +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 ( + + onChange(newValue)} + valueLabelDisplay="auto" + valueLabelFormat={(t) => t} + /> + + ); +} diff --git a/stories/MapPerformance/map.stories.tsx b/stories/MapPerformance/map.stories.tsx index b000beff5f..36c85599be 100644 --- a/stories/MapPerformance/map.stories.tsx +++ b/stories/MapPerformance/map.stories.tsx @@ -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', () => ) .add('更新数据 update plane geometry attr&ele', () => ) .add('更新数据 update updateAttrTimeLine', () => ) + .add('更新数据 update UpdateAttrShenZhen', () => ) + .add('更新数据 update UpdateHeatMap', () => ) .add('点', () => ) .add('BigLine', () => ) .add('DataUpdate', () => );