p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(draw): draw circle add change event

This commit is contained in:
thinkinggis 2020-08-21 00:04:30 +08:00
parent a6e0b7f9a8
commit d62de543d4
5 changed files with 125 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/draw/src/modes/draw_circle.ts
View File

@ -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() {

1
packages/draw/src/util/constant.ts
View File

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

219
packages/source/src/transform/grid.ts
View File

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

1
stories/Layers/components/gridtest.tsx
View File

@ -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: [

3
stories/Layers/components/hexagon.tsx
View File

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