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

refactor(draw): 统一点,线,面绘制选中机制

This commit is contained in:
thinkinggis 2020-03-26 20:15:16 +08:00
parent 7b034d4b7a
commit 63560b325d
13 changed files with 216 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,23 +9,22 @@ import {
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, point } from '@turf/helpers';
import selectRender from '../render/selected';
import { Feature, FeatureCollection, featureCollection } from '@turf/helpers';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createCircle } from '../util/create_geometry';
import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
import { createCircle, createPoint } from '../util/create_geometry';
import moveFeatures, { movePoint } from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
export interface IDrawRectOption extends IDrawFeatureOption {
units: unitsType;
steps: number;
}
let CircleFeatureId = 0;
export default class DrawCircle extends DrawFeature {
private startPoint: ILngLat;
private endPoint: ILngLat;
protected startPoint: ILngLat;
protected endPoint: ILngLat;
protected pointFeatures: Feature[];
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
// this.selectLayer = new selectRender(this);
}
public drawFinish() {
@ -35,13 +34,16 @@ export default class DrawCircle extends DrawFeature {
this.startPoint = e.lngLat;
this.setCursor('grabbing');
this.initCenterLayer();
this.initDrawFillLayer();
// this.initDrawFillLayer();
this.centerLayer.setData([this.startPoint]);
};
protected onDragging = (e: IInteractionTarget) => {
this.endPoint = e.lngLat;
const feature = this.createFeature();
this.updateDrawFillLayer(feature);
const pointfeatures = createPoint([this.endPoint]);
this.pointFeatures = pointfeatures.features;
this.drawRender.update(feature);
this.drawVertexLayer.update(pointfeatures);
};
protected onDragEnd = () => {
@ -51,24 +53,21 @@ export default class DrawCircle extends DrawFeature {
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
const properties = newFeature.properties as {
startPoint: [number, number];
endPoint: [number, number];
};
const { startPoint, endPoint } = properties;
properties.startPoint = movePoint(startPoint, delta);
properties.endPoint = movePoint(endPoint, delta);
newFeature.properties = properties;
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature));
const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
this.currentFeature = newFeature[0];
const newStartPoint = movePoint(
[this.startPoint.lng, this.startPoint.lat],
delta,
);
this.startPoint = {
lat: startPoint[1],
lng: startPoint[0],
lat: newStartPoint[1],
lng: newStartPoint[0],
};
this.endPoint = {
lat: endPoint[1],
lng: endPoint[0],
};
return newFeature;
this.centerLayer.setData([this.startPoint]);
return this.currentFeature;
}
protected createFeature(): FeatureCollection {
@ -78,14 +77,11 @@ export default class DrawCircle extends DrawFeature {
{
units: this.getOption('units'),
steps: this.getOption('steps'),
id: `${CircleFeatureId++}`,
id: `${this.getUniqId()}`,
},
);
this.setCurrentFeature(feature as Feature);
return {
type: 'FeatureCollection',
features: [feature],
};
return featureCollection([feature]);
}
protected editFeature(endPoint: ILngLat): FeatureCollection {
@ -94,7 +90,7 @@ export default class DrawCircle extends DrawFeature {
}
private initCenterLayer() {
const centerStyle = this.getStyle('active_point');
const centerStyle = this.getStyle('active').point;
const layer = new PointLayer()
.source([this.startPoint], {
parser: {

58
packages/draw/src/modes/draw_feature.ts
View File

@ -18,16 +18,15 @@ import {
point,
} from '@turf/helpers';
import DrawRender from '../render/draw';
import RenderLayer from '../render/draw_result';
import DrawVertexLayer from '../render/draw_vertex';
import EditLayer from '../render/edit';
import RenderLayer from '../render/render';
import SelectLayer from '../render/selected';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createPoint } from '../util/create_geometry';
import DrawEdit from './draw_edit';
import DrawMode, { IDrawOption } from './draw_mode';
import DrawSelected from './draw_selected';
let CircleFeatureId = 0;
export interface IDrawFeatureOption extends IDrawOption {
units: unitsType;
steps: number;
@ -55,8 +54,8 @@ export default abstract class DrawFeature extends DrawMode {
this.drawRender = new DrawRender(this);
this.drawVertexLayer = new DrawVertexLayer(this);
this.renderLayer = new RenderLayer(this);
this.selectLayer = new SelectLayer(this);
this.editLayer = new EditLayer(this);
// this.editLayer = new EditLayer(this);
this.selectMode = new DrawSelected(this.scene, {});
this.editMode = new DrawEdit(this.scene, {});
this.selectMode.on(DrawEvent.UPDATE, this.onDrawUpdate);
@ -93,7 +92,7 @@ export default abstract class DrawFeature extends DrawMode {
return;
}
this.currentFeature = null;
this.renderLayer.updateData();
this.renderLayer.updateData(this.source.data);
this.centerLayer.setData([]);
this.drawLayer.setData(InitFeature);
this.drawLineLayer.setData(InitFeature);
@ -122,33 +121,6 @@ export default abstract class DrawFeature extends DrawMode {
this.drawLineLayer.setData(currentData);
}
private removeDrawLayer() {
this.scene.removeLayer(this.drawLayer);
this.scene.removeLayer(this.drawLineLayer);
this.scene.removeLayer(this.centerLayer);
}
private createCircleData(center: ILngLat, endPoint: ILngLat) {
const radius = turfDistance(
point([center.lng, center.lat]),
point([endPoint.lng, endPoint.lat]),
this.getOption('units'),
);
const feature = turfCircle([center.lng, center.lat], radius, {
units: this.getOption('units'),
steps: this.getOption('steps'),
properties: {
id: `${CircleFeatureId++}`,
active: true,
radius,
center,
endPoint,
},
});
this.currentFeature = feature as Feature;
return featureCollection([feature]);
}
private addDrawPopup(lnglat: ILngLat, dis: number) {
const popup = new Popup({
anchor: 'left',
@ -163,28 +135,22 @@ export default abstract class DrawFeature extends DrawMode {
private onModeChange = (mode: DrawModes[any]) => {
switch (mode) {
case DrawModes.DIRECT_SELECT:
this.selectLayer.hide();
this.editMode.setEditFeature(this.currentFeature as Feature);
this.editLayer.updateData(
featureCollection([this.currentFeature as Feature]),
);
this.editLayer.show();
// this.editMode.setEditFeature(this.currentFeature as Feature);
// this.editLayer.updateData(
// featureCollection([this.currentFeature as Feature]),
// );
// this.editLayer.show();
break;
case DrawModes.SIMPLE_SELECT:
this.renderLayer.updateData();
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
this.drawRender.enableDrag();
this.drawVertexLayer.enableDrag();
this.drawVertexLayer.show();
break;
// this.selectLayer.updateData(
// featureCollection([this.currentFeature as Feature]),
// );
// this.selectLayer.show();
case DrawModes.STATIC:
this.source.setFeatureUnActive(this.currentFeature as Feature);
this.drawVertexLayer.hide();
this.renderLayer.updateData();
this.renderLayer.update(this.source.data);
break;
}
};
@ -212,6 +178,6 @@ export default abstract class DrawFeature extends DrawMode {
private onDrawEdit = (endpoint: ILngLat) => {
const feature = this.editFeature(endpoint);
this.currentFeature = feature.features[0];
this.editLayer.updateData(feature);
// this.editLayer.updateData(feature);
};
}

139
packages/draw/src/modes/draw_line.ts
View File

@ -9,128 +9,31 @@ import {
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, Geometries, point } from '@turf/helpers';
import selectRender from '../render/selected';
import {
Feature,
FeatureCollection,
featureCollection,
Geometries,
point,
} from '@turf/helpers';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createLine, createPoint } from '../util/create_geometry';
import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
import { renderFeature } from '../util/renderFeature';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
import DrawPolygon from './draw_polygon';
export interface IDrawRectOption extends IDrawFeatureOption {
units: unitsType;
steps: number;
}
export default class DrawLine extends DrawFeature {
private startPoint: ILngLat;
private endPoint: ILngLat;
private points: ILngLat[] = [];
private drawLayers: ILayer[] = [];
private drawPointLayers: ILayer[] = [];
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
}
public enable() {
super.enable();
this.scene.on('mousemove', this.onMouseMove);
this.scene.on('dblclick', this.onDblClick);
// 关闭双击放大
}
public disable() {
super.disable();
this.scene.off('mousemove', this.onMouseMove);
this.scene.off('dblclick', this.onDblClick);
}
public drawFinish() {
const feature = this.createFeature(this.points);
this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
const pointfeatures = createPoint(this.points);
this.drawPointLayers = this.addDrawLayer(
this.drawPointLayers,
pointfeatures,
);
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
this.disable();
}
protected onDragStart = (e: IInteractionTarget) => {
return null;
};
protected onDragging = (e: IInteractionTarget) => {
return null;
};
protected onDragEnd = () => {
return null;
};
protected onClick = (e: any) => {
const lngLat = e.lngLat;
this.endPoint = lngLat;
this.points.push(lngLat);
const feature = this.createFeature(this.points);
const pointfeatures = createPoint([this.endPoint]);
this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
this.drawPointLayers = this.addDrawLayer(
this.drawPointLayers,
pointfeatures,
);
this.drawPointLayers[0].on('mousemove', () => {
this.setCursor('pointer');
});
this.drawPointLayers[0].on('unmousemove', () => {
this.setCursor('crosshair');
});
this.drawPointLayers[0].on('click', () => {
this.resetCursor();
this.drawFinish();
});
};
protected onMouseMove = (e: any) => {
const lngLat = e.lngLat;
if (this.points.length === 0) {
return;
}
const tmpPoints = this.points.slice();
tmpPoints.push(lngLat);
const feature = this.createFeature(tmpPoints);
this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
};
protected onDblClick = (e: any) => {
const lngLat = e.lngLat;
if (this.points.length < 1) {
// TODO: 清空图层
return;
}
this.points.push(lngLat);
this.drawFinish();
};
export default class DrawLine extends DrawPolygon {
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
const properties = newFeature.properties as {
startPoint: [number, number];
endPoint: [number, number];
};
const { startPoint, endPoint } = properties;
properties.startPoint = movePoint(startPoint, delta);
properties.endPoint = movePoint(endPoint, delta);
newFeature.properties = properties;
this.startPoint = {
lat: startPoint[1],
lng: startPoint[0],
};
this.endPoint = {
lat: endPoint[1],
lng: endPoint[0],
};
return newFeature;
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
const newPointFeture = moveFeatures(this.pointFeatures, delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newPointFeture));
this.currentFeature = newFeature[0];
this.pointFeatures = newPointFeture;
return this.currentFeature;
}
protected createFeature(points: ILngLat[]): FeatureCollection {
const feature = createLine(points, {
@ -147,14 +50,4 @@ export default class DrawLine extends DrawFeature {
this.endPoint = endPoint;
return this.createFeature(this.points);
}
private addDrawLayer(drawLayers: ILayer[], fc: FeatureCollection) {
if (drawLayers.length !== 0) {
drawLayers.map((layer) => this.scene.removeLayer(layer));
}
const style = this.getStyle('active');
drawLayers = renderFeature(fc, style);
drawLayers.map((layer) => this.scene.addLayer(layer));
return drawLayers;
}
}

25
packages/draw/src/modes/draw_point.ts
View File

@ -9,7 +9,12 @@ import {
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, Geometries, point } from '@turf/helpers';
import {
Feature,
FeatureCollection,
featureCollection,
point,
} from '@turf/helpers';
import selectRender from '../render/selected';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createPoint, createPolygon } from '../util/create_geometry';
@ -21,12 +26,10 @@ export interface IDrawRectOption extends IDrawFeatureOption {
steps: number;
}
export default class DrawPoint extends DrawFeature {
private drawLayers: ILayer[] = [];
private drawPointLayers: ILayer[] = [];
protected pointFeatures: Feature[];
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
}
public drawFinish() {
@ -49,14 +52,18 @@ export default class DrawPoint extends DrawFeature {
protected onClick = (e: any) => {
const lngLat = e.lngLat;
const feature = this.createFeature(lngLat);
this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
this.disable();
// this.drawFinish();
this.drawRender.update(feature);
this.drawVertexLayer.update(feature);
this.drawFinish();
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
return newFeature;
const newFeature = moveFeatures([this.currentFeature as Feature], delta);
this.drawRender.updateData(featureCollection(newFeature));
this.drawVertexLayer.updateData(featureCollection(newFeature));
this.currentFeature = newFeature[0];
this.pointFeatures = newFeature;
return this.currentFeature;
}
protected createFeature(p: ILngLat): FeatureCollection {
const feature = point([p.lng, p.lat], {

41
packages/draw/src/modes/draw_polygon.ts
View File

@ -28,13 +28,10 @@ export interface IDrawRectOption extends IDrawFeatureOption {
steps: number;
}
export default class DrawPolygon extends DrawFeature {
private startPoint: ILngLat;
private endPoint: ILngLat;
private points: ILngLat[] = [];
private pointFeatures: Feature[];
private drawLayers: ILayer[] = [];
private drawPointLayers: ILayer[] = [];
protected startPoint: ILngLat;
protected endPoint: ILngLat;
protected points: ILngLat[] = [];
protected pointFeatures: Feature[];
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
}
@ -53,15 +50,10 @@ export default class DrawPolygon extends DrawFeature {
public drawFinish() {
const feature = this.createFeature(this.points);
// this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
this.drawRender.update(feature);
const pointfeatures = createPoint(this.points);
this.pointFeatures = pointfeatures.features;
this.drawVertexLayer.update(pointfeatures);
// this.drawPointLayers = this.addDrawLayer(
// this.drawPointLayers,
// pointfeatures,
// );
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
this.disable();
@ -84,24 +76,9 @@ export default class DrawPolygon extends DrawFeature {
const feature = this.createFeature(this.points);
const pointfeatures = createPoint([this.points[0], this.endPoint]);
this.pointFeatures = pointfeatures.features;
// this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
this.drawRender.update(feature);
this.drawVertexLayer.update(pointfeatures);
this.onDraw();
// this.drawPointLayers = this.addDrawLayer(
// this.drawPointLayers,
// pointfeatures,
// );
// this.drawPointLayers[0].on('mousemove', () => {
// this.setCursor('pointer');
// });
// this.drawPointLayers[0].on('unmousemove', () => {
// this.setCursor('crosshair');
// });
// this.drawPointLayers[0].on('click', () => {
// this.resetCursor();
// this.drawFinish();
// });
};
protected onMouseMove = (e: any) => {
@ -113,7 +90,6 @@ export default class DrawPolygon extends DrawFeature {
tmpPoints.push(lngLat);
const feature = this.createFeature(tmpPoints);
this.drawRender.update(feature);
// this.drawLayers = this.addDrawLayer(this.drawLayers, feature);
};
protected onDblClick = (e: any) => {
@ -163,15 +139,6 @@ export default class DrawPolygon extends DrawFeature {
this.drawFinish();
});
};
private addDrawLayer(drawLayers: ILayer[], fc: FeatureCollection) {
if (drawLayers.length !== 0) {
drawLayers.map((layer) => this.scene.removeLayer(layer));
}
const style = this.getStyle('active');
drawLayers = renderFeature(fc, style);
drawLayers.map((layer) => this.scene.addLayer(layer));
return drawLayers;
}
}
/**
* draw 端点响应事件

81
packages/draw/src/modes/draw_rect.ts
View File

@ -9,98 +9,43 @@ import {
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, point } from '@turf/helpers';
import selectRender from '../render/selected';
import {
Feature,
FeatureCollection,
featureCollection,
point,
} from '@turf/helpers';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createRect } from '../util/create_geometry';
import { createPoint, createRect } from '../util/create_geometry';
import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
import DrawCircle from './draw_circle';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
export interface IDrawRectOption extends IDrawFeatureOption {
units: unitsType;
steps: number;
}
export default class DrawRect extends DrawFeature {
private startPoint: ILngLat;
private endPoint: ILngLat;
export default class DrawRect extends DrawCircle {
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
}
public drawFinish() {
return null;
}
protected onDragStart = (e: IInteractionTarget) => {
this.startPoint = e.lngLat;
this.setCursor('grabbing');
this.initCenterLayer();
this.initDrawFillLayer();
this.centerLayer.setData([this.startPoint]);
};
protected onDragging = (e: IInteractionTarget) => {
this.endPoint = e.lngLat;
const feature = this.createFeature();
this.updateDrawFillLayer(feature);
};
protected onDragEnd = () => {
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
this.disable();
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
const properties = newFeature.properties as {
startPoint: [number, number];
endPoint: [number, number];
};
const { startPoint, endPoint } = properties;
properties.startPoint = movePoint(startPoint, delta);
properties.endPoint = movePoint(endPoint, delta);
newFeature.properties = properties;
this.startPoint = {
lat: startPoint[1],
lng: startPoint[0],
};
this.endPoint = {
lat: endPoint[1],
lng: endPoint[0],
};
return newFeature;
}
protected createFeature(): FeatureCollection {
const feature = createRect(
[this.startPoint.lng, this.startPoint.lat],
[this.endPoint.lng, this.endPoint.lat],
{
id: `${this.getUniqId()}`,
},
);
this.setCurrentFeature(feature as Feature);
return {
type: 'FeatureCollection',
features: [feature],
};
return featureCollection([feature]);
}
protected editFeature(endPoint: ILngLat): FeatureCollection {
this.endPoint = endPoint;
return this.createFeature();
}
private initCenterLayer() {
const centerStyle = this.getStyle('active_point');
const layer = new PointLayer()
.source([this.startPoint], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.scene.addLayer(layer);
this.centerLayer = layer;
}
}

55
packages/draw/src/render/base_render.ts Normal file
View File

@ -0,0 +1,55 @@
import { IInteractionTarget, ILayer, Scene } from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
type CallBack = (...args: any[]) => any;
import { FeatureCollection } from '@turf/helpers';
import Draw from '../modes/draw_feature';
import { DrawEvent, DrawModes } from '../util/constant';
import { renderFeature } from '../util/renderFeature';
export default class BaseRenderLayer {
public drawLayers: ILayer[] = [];
protected draw: Draw;
constructor(draw: Draw) {
this.draw = draw;
}
public update(feature: FeatureCollection) {
this.removeLayers();
const style = this.draw.getStyle('normal');
this.drawLayers = renderFeature(feature, style);
this.addLayers();
}
public on(type: any, handler: CallBack) {
const layer = this.drawLayers[0];
layer.on(type, handler);
}
public off(type: any, handler: CallBack) {
const layer = this.drawLayers[0];
layer.off(type, handler);
}
public updateData(data: any) {
this.drawLayers.forEach((layer) => layer.setData(data));
}
public destroy() {
this.removeLayers();
}
public removeLayers() {
if (this.drawLayers.length !== 0) {
this.drawLayers.forEach((layer) => this.draw.scene.removeLayer(layer));
}
}
public addLayers() {
this.drawLayers.forEach((layer) => this.draw.scene.addLayer(layer));
}
public show() {
this.drawLayers.forEach((layer) => layer.show());
}
public hide() {
this.drawLayers.forEach((layer) => layer.hide());
}
}

33
packages/draw/src/render/draw.ts
View File

@ -7,43 +7,14 @@ import { FeatureCollection } from '@turf/helpers';
import Draw from '../modes/draw_feature';
import { DrawEvent, DrawModes } from '../util/constant';
import { renderFeature } from '../util/renderFeature';
export default class DrawLayer {
private drawLayers: ILayer[] = [];
private draw: Draw;
constructor(draw: Draw) {
this.draw = draw;
}
import BaseRender from './base_render';
export default class DrawLayer extends BaseRender {
public update(feature: FeatureCollection) {
this.removeLayers();
const style = this.draw.getStyle('active');
this.drawLayers = renderFeature(feature, style);
this.addLayers();
}
public updateData(data: any) {
this.drawLayers.forEach((layer) => layer.setData(data));
}
public destroy() {
this.removeLayers();
}
public removeLayers() {
if (this.drawLayers.length !== 0) {
this.drawLayers.forEach((layer) => this.draw.scene.removeLayer(layer));
}
}
public addLayers() {
this.drawLayers.forEach((layer) => this.draw.scene.addLayer(layer));
}
public show() {
this.drawLayers.forEach((layer) => layer.show());
}
public hide() {
this.drawLayers.forEach((layer) => layer.hide());
}
public enableDrag() {
this.show();
const layer = this.drawLayers[0];

31
packages/draw/src/render/draw_result.ts Normal file
View File

@ -0,0 +1,31 @@
import { FeatureCollection } from '@turf/helpers';
import { DrawEvent, DrawModes } from '../util/constant';
import { renderFeature } from '../util/renderFeature';
import BaseRender from './base_render';
export default class DrawResultLayer extends BaseRender {
public update(feature: FeatureCollection) {
this.removeLayers();
const style = this.draw.getStyle('normal');
this.drawLayers = renderFeature(feature, style);
this.addLayers();
}
public enableDrag() {
const layer = this.drawLayers[0];
layer.on('click', this.onClick);
}
public disableDrag() {
const layer = this.drawLayers[0];
layer.off('click', this.onClick);
}
public addFilter() {
this.drawLayers.forEach((layer) =>
layer.filter('active', (active) => {
return !active;
}),
);
}
private onClick = (e: any) => {
this.draw.setCurrentFeature(e.feature);
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
};
}

48
packages/draw/src/render/draw_vertex.ts
View File

@ -1,58 +1,14 @@
import { IInteractionTarget, ILayer, Scene } from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
type CallBack = (...args: any[]) => any;
import { FeatureCollection } from '@turf/helpers';
import Draw from '../modes/draw_feature';
import { DrawEvent, DrawModes } from '../util/constant';
import { renderFeature } from '../util/renderFeature';
export default class DrawVertexLayer {
public drawLayers: ILayer[] = [];
private draw: Draw;
constructor(draw: Draw) {
this.draw = draw;
}
import BaseRender from './base_render';
export default class DrawVertexLayer extends BaseRender {
public update(feature: FeatureCollection) {
this.removeLayers();
const style = this.draw.getStyle('active');
this.drawLayers = renderFeature(feature, style);
this.addLayers();
}
public on(type: any, handler: CallBack) {
const layer = this.drawLayers[0];
layer.on(type, handler);
}
public off(type: any, handler: CallBack) {
const layer = this.drawLayers[0];
layer.off(type, handler);
}
public updateData(data: any) {
this.drawLayers.forEach((layer) => layer.setData(data));
}
public destroy() {
this.removeLayers();
}
public removeLayers() {
if (this.drawLayers.length !== 0) {
this.drawLayers.forEach((layer) => this.draw.scene.removeLayer(layer));
}
}
public addLayers() {
this.drawLayers.forEach((layer) => this.draw.scene.addLayer(layer));
}
public show() {
this.drawLayers.forEach((layer) => layer.show());
}
public hide() {
this.drawLayers.forEach((layer) => layer.hide());
}
public enableDrag() {
const layer = this.drawLayers[0];
layer.on('mousemove', this.onMouseMove);

6
packages/draw/src/util/create_geometry.ts
View File

@ -23,7 +23,7 @@ export function createCircle(
units: options.units,
steps: options.steps,
properties: {
id: options.id,
...options,
active: true,
radius,
startPoint: center,
@ -37,6 +37,9 @@ export function createCircle(
export function createRect(
startPoint: [number, number],
endPoint: [number, number],
options: {
id: string;
},
): Feature {
const minX = Math.min(startPoint[0], endPoint[0]);
const minY = Math.min(startPoint[1], endPoint[1]);
@ -48,6 +51,7 @@ export function createRect(
active: true,
startPoint,
endPoint,
...options,
},
geometry: {
type: 'Polygon',

76
packages/draw/src/util/layerstyle.ts
View File

@ -34,22 +34,38 @@ const LayerStyles = {
},
},
},
// 正常显示样式
normal_fill: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
normal: {
polygon: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
stroke: '#3bb2d0',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'solid',
dashArray: [2, 2],
},
},
},
// xai'm'z
active_fill: {
type: 'PolygonLayer',
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
},
normal_point: {
@ -69,36 +85,6 @@ const LayerStyles = {
size: 3,
style: {},
},
active_point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
normal_line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
active_line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
};
export default LayerStyles;

2
stories/Layers/components/heatmap3d.tsx
View File

@ -1,5 +1,5 @@
import { HeatmapLayer, Scene } from '@antv/l7';
import { Mapbox,GaodeMap } from '@antv/l7-maps';
import { Mapbox, GaodeMap } from '@antv/l7-maps';
// @ts-ignore
import * as React from 'react';