From d62de543d48576f9be90bcf06ba3aebd8a777f2b Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 21 Aug 2020 00:04:30 +0800 Subject: [PATCH] feat(draw): draw circle add change event --- packages/draw/src/modes/draw_circle.ts | 14 ++ packages/draw/src/util/constant.ts | 1 + packages/source/src/transform/grid.ts | 219 ++++++++++++------------- stories/Layers/components/gridtest.tsx | 1 - stories/Layers/components/hexagon.tsx | 3 +- 5 files changed, 125 insertions(+), 113 deletions(-) diff --git a/packages/draw/src/modes/draw_circle.ts b/packages/draw/src/modes/draw_circle.ts index 92606cb227..84f1a92c92 100644 --- a/packages/draw/src/modes/draw_circle.ts +++ b/packages/draw/src/modes/draw_circle.ts @@ -88,13 +88,26 @@ export default class DrawCircle extends DrawFeature { lat: newStartPoint[1], lng: newStartPoint[0], }; + const newEndPoint = movePoint( + [this.endPoint.lng, this.endPoint.lat], + delta, + ); + const endPointObj = { + lat: newEndPoint[1], + lng: newEndPoint[0], + }; newFeature[0].properties = { ...newFeature[0].properties, startPoint: this.startPoint, + endPoint: endPointObj, pointFeatures: newPointFeture, }; this.centerLayer.setData([this.startPoint]); this.setCurrentFeature(newFeature[0]); + const changeFeature = { + ...newFeature[0], + }; + this.emit(DrawEvent.CHANGE, changeFeature); } protected createFeature(id: string = '0'): Feature { @@ -121,6 +134,7 @@ export default class DrawCircle extends DrawFeature { this.drawVertexLayer.updateData( featureCollection(properties.pointFeatures), ); + this.emit(DrawEvent.CHANGE, featureCollection([newFeature]).features[0]); } protected showOtherLayer() { diff --git a/packages/draw/src/util/constant.ts b/packages/draw/src/util/constant.ts index d9880df096..9b1978dd3c 100644 --- a/packages/draw/src/util/constant.ts +++ b/packages/draw/src/util/constant.ts @@ -4,6 +4,7 @@ export enum DrawEvent { Move = 'draw.move', Edit = 'draw.edit', UPDATE = 'draw.update', + CHANGE = 'draw.change', SELECTION_CHANGE = 'draw.selectionchange', MODE_CHANGE = 'draw.modechange', ACTIONABLE = 'draw.actionable', diff --git a/packages/source/src/transform/grid.ts b/packages/source/src/transform/grid.ts index 4b99898065..a9118e33b4 100644 --- a/packages/source/src/transform/grid.ts +++ b/packages/source/src/transform/grid.ts @@ -1,110 +1,109 @@ -/** - * 生成四边形热力图 - */ -import { IParserData, ITransform } from '@antv/l7-core'; -import { aProjectFlat, Satistics } from '@antv/l7-utils'; - -interface IGridHash { - [key: string]: any; -} -interface IGridOffset { - yOffset: number; - xOffset: number; -} -const R_EARTH = 6378000; - -export function aggregatorToGrid(data: IParserData, option: ITransform) { - const dataArray = data.dataArray; - const { size = 10 } = option; - const pixlSize = ((size / (2 * Math.PI * R_EARTH)) * (256 << 20)) / 2; - const { gridHash, gridOffset } = _pointsGridHash(dataArray, size); - const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option); - return { - yOffset: pixlSize, - xOffset: pixlSize, - radius: pixlSize, - type: 'grid', - dataArray: layerData, - }; -} - -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)) { - latMin = pLat < latMin ? pLat : latMin; - latMax = pLat > latMax ? pLat : latMax; - } - } - const centerLat = (latMin + latMax) / 2; - // const centerLat = 34.54083; - const gridOffset = _calculateGridLatLonOffset(size, centerLat); - if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) { - return { gridHash: {}, gridOffset }; - } - const gridHash: IGridHash = {}; - for (const point of dataArray) { - const lat = point.coordinates[1]; - const lng = point.coordinates[0]; - - if (Number.isFinite(lat) && Number.isFinite(lng)) { - const latIdx = Math.floor((lat + 90) / gridOffset.yOffset); - const lonIdx = Math.floor((lng + 180) / gridOffset.xOffset); - const key = `${latIdx}-${lonIdx}`; - - gridHash[key] = gridHash[key] || { count: 0, points: [] }; - gridHash[key].count += 1; - gridHash[key].points.push(point); - } - } - - return { gridHash, gridOffset }; -} -// 计算网格偏移量 -function _calculateGridLatLonOffset(cellSize: number, latitude: number) { - const yOffset = _calculateLatOffset(cellSize); - const xOffset = _calculateLonOffset(latitude, cellSize); - return { yOffset, xOffset }; -} - -function _calculateLatOffset(dy: number) { - return (dy / R_EARTH) * (180 / Math.PI); -} - -function _calculateLonOffset(lat: number, dx: number) { - return ((dx / R_EARTH) * (180 / Math.PI)) / Math.cos((lat * Math.PI) / 180); -} -function _getGridLayerDataFromGridHash( - gridHash: IGridHash, - gridOffset: IGridOffset, - option: ITransform, -) { - return Object.keys(gridHash).reduce((accu, key, i) => { - const idxs = key.split('-'); - const latIdx = parseInt(idxs[0], 10); - const lonIdx = parseInt(idxs[1], 10); - const item: { - [key: string]: any; - } = {}; - if (option.field && option.method) { - const columns = Satistics.getColumn(gridHash[key].points, option.field); - item[option.method] = Satistics.statMap[option.method](columns); - } - Object.assign(item, { - _id: i, - coordinates: aProjectFlat([ - -180 + gridOffset.xOffset * (lonIdx + 0.5), - -90 + gridOffset.yOffset * (latIdx + 0.5), - ]), - rawData: gridHash[key].points, - count: gridHash[key].count, - }); - // @ts-ignore - accu.push(item); - return accu; - }, []); -} +/** + * 生成四边形热力图 + */ +import { IParserData, ITransform } from '@antv/l7-core'; +import { aProjectFlat, Satistics } from '@antv/l7-utils'; + +interface IGridHash { + [key: string]: any; +} +interface IGridOffset { + yOffset: number; + xOffset: number; +} +const R_EARTH = 6378000; + +export function aggregatorToGrid(data: IParserData, option: ITransform) { + const dataArray = data.dataArray; + const { size = 10 } = option; + const pixlSize = ((size / (2 * Math.PI * R_EARTH)) * (256 << 20)) / 2; + const { gridHash, gridOffset } = _pointsGridHash(dataArray, size); + const layerData = _getGridLayerDataFromGridHash(gridHash, gridOffset, option); + return { + yOffset: pixlSize, + xOffset: pixlSize, + radius: pixlSize, + type: 'grid', + dataArray: layerData, + }; +} + +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)) { + latMin = pLat < latMin ? pLat : latMin; + latMax = pLat > latMax ? pLat : latMax; + } + } + const centerLat = (latMin + latMax) / 2; + const gridOffset = _calculateGridLatLonOffset(size, centerLat); + if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) { + return { gridHash: {}, gridOffset }; + } + const gridHash: IGridHash = {}; + for (const point of dataArray) { + const lat = point.coordinates[1]; + const lng = point.coordinates[0]; + + if (Number.isFinite(lat) && Number.isFinite(lng)) { + const latIdx = Math.floor((lat + 90) / gridOffset.yOffset); + const lonIdx = Math.floor((lng + 180) / gridOffset.xOffset); + const key = `${latIdx}-${lonIdx}`; + + gridHash[key] = gridHash[key] || { count: 0, points: [] }; + gridHash[key].count += 1; + gridHash[key].points.push(point); + } + } + + return { gridHash, gridOffset }; +} +// 计算网格偏移量 +function _calculateGridLatLonOffset(cellSize: number, latitude: number) { + const yOffset = _calculateLatOffset(cellSize); + const xOffset = _calculateLonOffset(latitude, cellSize); + return { yOffset, xOffset }; +} + +function _calculateLatOffset(dy: number) { + return (dy / R_EARTH) * (180 / Math.PI); +} + +function _calculateLonOffset(lat: number, dx: number) { + return ((dx / R_EARTH) * (180 / Math.PI)) / Math.cos((lat * Math.PI) / 180); +} +function _getGridLayerDataFromGridHash( + gridHash: IGridHash, + gridOffset: IGridOffset, + option: ITransform, +) { + return Object.keys(gridHash).reduce((accu, key, i) => { + const idxs = key.split('-'); + const latIdx = parseInt(idxs[0], 10); + const lonIdx = parseInt(idxs[1], 10); + const item: { + [key: string]: any; + } = {}; + if (option.field && option.method) { + const columns = Satistics.getColumn(gridHash[key].points, option.field); + item[option.method] = Satistics.statMap[option.method](columns); + } + Object.assign(item, { + _id: i, + coordinates: aProjectFlat([ + -180 + gridOffset.xOffset * (lonIdx + 0.5), + -90 + gridOffset.yOffset * (latIdx + 0.5), + ]), + rawData: gridHash[key].points, + count: gridHash[key].count, + }); + // @ts-ignore + accu.push(item); + return accu; + }, []); +} diff --git a/stories/Layers/components/gridtest.tsx b/stories/Layers/components/gridtest.tsx index eceb89e857..aafdf1875b 100644 --- a/stories/Layers/components/gridtest.tsx +++ b/stories/Layers/components/gridtest.tsx @@ -32,7 +32,6 @@ export default class HexagonLayerDemo extends React.Component { ) .then((res) => res.json()) .then((data) => { - console.log(data); const layer = new HeatmapLayer({}) .source(data, { transforms: [ diff --git a/stories/Layers/components/hexagon.tsx b/stories/Layers/components/hexagon.tsx index d218972ce1..17738b4d5b 100644 --- a/stories/Layers/components/hexagon.tsx +++ b/stories/Layers/components/hexagon.tsx @@ -65,11 +65,10 @@ export default class HexagonLayerDemo extends React.Component { ].reverse(), ) .style({ - coverage: 0.9, + coverage: 1, angle: 0, }); scene.addLayer(pointLayer); - console.log(pointLayer.getSource()); this.scene = scene; }); });