From a6b969ddc833a3674f4b2d618802a27c44ad8e1e Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 2 Apr 2020 23:35:21 +0800 Subject: [PATCH] fix: gird heatmap position fix #273 --- .../interaction/InteractionService.ts | 2 +- packages/draw/src/draw_control.ts | 9 ++- packages/draw/src/modes/draw_feature.ts | 17 ++++- packages/draw/src/render/draw.ts | 4 +- packages/layers/src/core/BaseLayer.ts | 7 +- packages/source/src/transform/grid.ts | 13 ++-- stories/Layers/Layers.stories.tsx | 2 + stories/Layers/components/gridtest.tsx | 76 +++++++++++++++++++ stories/Layers/components/hexagon.tsx | 4 +- 9 files changed, 115 insertions(+), 19 deletions(-) create mode 100644 stories/Layers/components/gridtest.tsx diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 94872238f3..b6cd2875ac 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -100,7 +100,7 @@ export default class InteractionService extends EventEmitter // this.hammertime.off('dblclick click', this.onHammer); this.hammertime.off('panstart panmove panend pancancel', this.onDrag); $containter.removeEventListener('touchstart', this.onTouch); - $containter.removeEventListener('click', this.onHover); + // $containter.removeEventListener('click', this.onHover); $containter.removeEventListener('mousedown', this.onHover); $containter.removeEventListener('mouseup', this.onHover); // $containter.removeEventListener('dblclick', this.onHover); diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index a3dc99c556..8d05858f4e 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -1,6 +1,5 @@ import { Control, IControlOption, PositionType, Scene } from '@antv/l7'; import { DOM } from '@antv/l7-utils'; -import Hammer from 'hammerjs'; import './css/draw.less'; import { DrawCircle, @@ -11,6 +10,7 @@ import { DrawPolygon, DrawRect, } from './modes'; +import { DrawEvent, DrawModes } from './util/constant'; export interface IControls { [key: string]: boolean; } @@ -102,6 +102,7 @@ export class DrawControl extends Control { this.onDeleteMode.bind(null, 'delete'), ); } + // 监听组件 选中, 编辑 return container; } @@ -114,11 +115,12 @@ export class DrawControl extends Control { const link = DOM.create('a', className, container) as HTMLLinkElement; link.href = 'javascript:void(0)'; link.title = tile; - link.addEventListener('click', fn, false); + link.addEventListener('mousedown', fn, true); return link; } private onButtonClick = (type: string, e: MouseEvent) => { + e.stopPropagation(); for (const draw in this.draw) { if (draw === type) { this.draw[draw].enable(); @@ -130,10 +132,11 @@ export class DrawControl extends Control { }; private onDeleteMode = (type: string, e: MouseEvent) => { - // e.stopPropagation(); + e.stopPropagation(); if (!this.currentDraw) { return; } + this.currentDraw.deleteMode.enable(); return false; }; } diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts index 1eb8e78d5e..d4d30dd252 100644 --- a/packages/draw/src/modes/draw_feature.ts +++ b/packages/draw/src/modes/draw_feature.ts @@ -76,6 +76,17 @@ export default abstract class DrawFeature extends DrawMode { public enableLayer() { this.drawRender.enableDrag(); } + public clear() { + this.drawRender.hide(); + this.drawVertexLayer.hide(); + this.hideOtherLayer(); + this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); + } + public reset() { + this.drawRender.show(); + this.drawVertexLayer.show(); + this.showOtherLayer(); + } public addVertex(feature: Feature): void { throw new Error('子类未实现该方法'); @@ -177,8 +188,12 @@ export default abstract class DrawFeature extends DrawMode { private onDrawDelete = () => { if (this.drawStatus === 'DrawSelected') { + this.clear(); this.source.removeFeature(this.currentFeature as Feature); - this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); + this.renderLayer.update(this.source.data); + // this.reset(); } + + // this.source.removeFeature(this.currentFeature as Feature }; } diff --git a/packages/draw/src/render/draw.ts b/packages/draw/src/render/draw.ts index b251bdefe3..dec3a10edc 100644 --- a/packages/draw/src/render/draw.ts +++ b/packages/draw/src/render/draw.ts @@ -24,7 +24,7 @@ export default class DrawLayer extends BaseRender { layer.on('mouseenter', this.onMouseMove); layer.on('mouseout', this.onUnMouseMove); layer.on('click', this.onClick); - layer.on('unclick', this.onUnClick); + layer.on('unmousedown', this.onUnClick); this.isEnableDrag = true; } public disableDrag() { @@ -35,7 +35,7 @@ export default class DrawLayer extends BaseRender { layer.off('mouseenter', this.onMouseMove); layer.off('mouseout', this.onUnMouseMove); layer.off('click', this.onClick); - layer.off('unclick', this.onUnClick); + layer.off('unmousedown', this.onUnClick); this.isEnableDrag = false; } diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 808f9648b5..4495db1fc1 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -849,13 +849,12 @@ export default class BaseLayer extends EventEmitter enableSelect = true, } = this.getLayerConfig(); // 判断layer是否监听事件; - let isPick = this.eventNames().indexOf(type) !== -1; + let isPick = + this.eventNames().indexOf(type) !== -1 || + this.eventNames().indexOf('un' + type) !== -1; if ((type === 'click' || type === 'dblclick') && enableSelect) { isPick = true; } - if (type === 'click' && this.eventNames().indexOf('unclick') !== -1) { - isPick = true; - } if ( type === 'mousemove' && (enableHighlight || diff --git a/packages/source/src/transform/grid.ts b/packages/source/src/transform/grid.ts index 5c40fed033..6a1e6e13ee 100644 --- a/packages/source/src/transform/grid.ts +++ b/packages/source/src/transform/grid.ts @@ -19,8 +19,8 @@ export function aggregatorToGrid(data: IParserData, option: ITransform) { const { gridHash, gridOffset } = _pointsGridHash(dataArray, size); const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option); return { - yOffset: gridOffset.yOffset / 1.8, - xOffset: gridOffset.xOffset / 1.8, + yOffset: gridOffset.yOffset / 2, + xOffset: gridOffset.xOffset / 2, radius: gridOffset.xOffset, type: 'grid', dataArray: layerData, @@ -31,6 +31,7 @@ function _pointsGridHash(dataArray: any[], size: number) { let latMin = Infinity; let latMax = -Infinity; let pLat; + for (const point of dataArray) { pLat = point.coordinates[1]; if (Number.isFinite(pLat)) { @@ -38,8 +39,8 @@ function _pointsGridHash(dataArray: any[], size: number) { latMax = pLat > latMax ? pLat : latMax; } } - // const centerLat = (latMin + latMax) / 2; - const centerLat = 34.54083; + const centerLat = (latMin + latMax) / 2; + // const centerLat = 34.54083; const gridOffset = _calculateGridLatLonOffset(size, centerLat); if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) { return { gridHash: {}, gridOffset }; @@ -95,8 +96,8 @@ function _getGridLayerDataFromGridHash( Object.assign(item, { _id: i, coordinates: [ - -180 + gridOffset.xOffset * lonIdx, - -90 + gridOffset.yOffset * latIdx, + -180 + gridOffset.xOffset * (lonIdx + 0.5), + -90 + gridOffset.yOffset * (latIdx + 0.5), ], rawData: gridHash[key].points, count: gridHash[key].count, diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 9053691c5e..8b6f30a465 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -21,6 +21,7 @@ import WorldDemo from './components/polygon_line'; import ImageLayerDemo from './components/RasterImage'; import RasterLayerDemo from './components/RasterLayer'; import TextLayerDemo from './components/Text'; +import GridTest from './components/gridtest'; // @ts-ignore storiesOf('图层', module) @@ -44,4 +45,5 @@ storiesOf('图层', module) .add('网格热力图', () => ) .add('栅格', () => ) .add('图片', () => ) + .add('网格测试', () => ) .add('世界地图', () => ); diff --git a/stories/Layers/components/gridtest.tsx b/stories/Layers/components/gridtest.tsx new file mode 100644 index 0000000000..cf205035e5 --- /dev/null +++ b/stories/Layers/components/gridtest.tsx @@ -0,0 +1,76 @@ +import { HeatmapLayer, Marker, PointLayer, Scene, IPoint } from '@antv/l7'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import * as dat from 'dat.gui'; +import * as React from 'react'; +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 testPoint: [number, number] = [113.868222, 22.506306]; + + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: testPoint, + pitch: 0, + zoom: 17, + token: '8e2254ff173dbf7ff5029e9c9df20bc3', + }), + }); + + scene.on('loaded', () => { + // 网格热力图 + const testList = [{ lng: testPoint[0], lat: testPoint[1], lev: 1 }]; + const layer = new HeatmapLayer({}) + .source(testList, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + transforms: [ + { + type: 'grid', + size: 100, + field: 'lev', + method: 'sum', + }, + ], + }) + .shape('circle') + .style({ + coverage: 1, + }) + .color('count', ['#0B0030', '#6BD5A0'].reverse()); + scene.addLayer(layer); + + // marker + // @ts-ignore + const marker = new Marker().setLnglat(testPoint); + scene.addMarker(marker); + }); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/Layers/components/hexagon.tsx b/stories/Layers/components/hexagon.tsx index 8eb1c17b32..d4487b8381 100644 --- a/stories/Layers/components/hexagon.tsx +++ b/stories/Layers/components/hexagon.tsx @@ -36,14 +36,14 @@ export default class HexagonLayerDemo extends React.Component { .source(data, { transforms: [ { - type: 'hexagon', + type: 'grid', size: 500000, field: 'name', method: 'mode', }, ], }) - .shape('hexagon') // 支持 circle, hexagon,triangle + .shape('square') // 支持 circle, hexagon,triangle .color('mode', [ '#ffffe5', '#fff7bc',