fix: source hexagon layer get rawdata

This commit is contained in:
thinkinggis 2020-01-31 13:12:38 +08:00
parent cccd8f3fc6
commit 526089c0cd
6 changed files with 122 additions and 3 deletions

View File

@ -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 });

View File

@ -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]

View File

@ -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,

View File

@ -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,

View File

@ -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 />);

View File

@ -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,
}}
/>
);
}
}