mirror of https://gitee.com/antv-l7/antv-l7
fix: source hexagon layer get rawdata
This commit is contained in:
parent
cccd8f3fc6
commit
526089c0cd
|
@ -112,6 +112,7 @@ export default class InteractionService extends EventEmitter
|
|||
} else {
|
||||
this.lastClickTime = nowTime;
|
||||
this.lastClickXY = [x, y];
|
||||
// @ts-ignore
|
||||
this.clickTimer = setTimeout(() => {
|
||||
type = 'click';
|
||||
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
|
||||
|
|
|
@ -136,7 +136,7 @@ export default class Source extends EventEmitter {
|
|||
}
|
||||
public getFeatureById(id: number): unknown {
|
||||
const { type = 'geojson' } = this.parser;
|
||||
if (type === 'geojson' && !this.cluster) {
|
||||
if (type === 'geojson' && !this.cluster && this.transforms.length === 0) {
|
||||
// TODO: 聚合图层返回聚合和后的数据
|
||||
return id < this.originData.features.length
|
||||
? this.originData.features[id]
|
||||
|
|
|
@ -93,7 +93,7 @@ function _getGridLayerDataFromGridHash(
|
|||
item[option.method] = Satistics.statMap[option.method](columns);
|
||||
}
|
||||
Object.assign(item, {
|
||||
_id: i + 1,
|
||||
_id: i,
|
||||
coordinates: [
|
||||
-180 + gridOffset.xOffset * lonIdx,
|
||||
-90 + gridOffset.yOffset * latIdx,
|
||||
|
|
|
@ -45,7 +45,7 @@ export function pointToHexbin(data: IParserData, option: ITransform) {
|
|||
count: hex.length,
|
||||
rawData: hex,
|
||||
coordinates: [hex.x, hex.y],
|
||||
_id: index + 1,
|
||||
_id: index,
|
||||
};
|
||||
}),
|
||||
radius: pixlSize,
|
||||
|
|
|
@ -8,6 +8,7 @@ import Column from './components/column';
|
|||
import DashLineDemo from './components/dash';
|
||||
import DataUpdate from './components/data_update';
|
||||
import HeatMapDemo from './components/HeatMap';
|
||||
import HexagonLayerDemo from './components/hexagon';
|
||||
import LightDemo from './components/light';
|
||||
import LineLayer from './components/Line';
|
||||
import PointDemo from './components/Point';
|
||||
|
@ -35,5 +36,6 @@ storiesOf('图层', module)
|
|||
.add('3D弧线', () => <ArcLineDemo />)
|
||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||
.add('热力图', () => <HeatMapDemo />)
|
||||
.add('网格热力图', () => <HexagonLayerDemo />)
|
||||
.add('栅格', () => <RasterLayerDemo />)
|
||||
.add('图片', () => <ImageLayerDemo />);
|
||||
|
|
|
@ -0,0 +1,116 @@
|
|||
import { HeatmapLayer, PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import * as dat from 'dat.gui';
|
||||
import * as React from 'react';
|
||||
// @ts-ignore
|
||||
import data from '../data/data.json';
|
||||
export default class HexagonLayerDemo extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
private gui: dat.GUI;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
if (this.gui) {
|
||||
this.gui.destroy();
|
||||
}
|
||||
}
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
);
|
||||
const pointsData = await response.json();
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
const pointLayer = new HeatmapLayer({})
|
||||
.source(pointsData, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 500000,
|
||||
field: 'capacity',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 0.6,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(pointLayer);
|
||||
pointLayer.on('click', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
this.scene = scene;
|
||||
|
||||
const gui = new dat.GUI();
|
||||
this.gui = gui;
|
||||
const styleOptions = {
|
||||
textAnchor: 'center',
|
||||
strokeWidth: 1,
|
||||
};
|
||||
const rasterFolder = gui.addFolder('栅格可视化');
|
||||
rasterFolder
|
||||
.add(styleOptions, 'textAnchor', [
|
||||
'center',
|
||||
'left',
|
||||
'right',
|
||||
'top',
|
||||
'bottom',
|
||||
'top-left',
|
||||
'bottom-right',
|
||||
'bottom-left',
|
||||
'top-right',
|
||||
])
|
||||
.onChange((anchor: string) => {
|
||||
pointLayer.style({
|
||||
textAnchor: anchor,
|
||||
});
|
||||
scene.render();
|
||||
});
|
||||
// });
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue