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

fix(draw): line&point 初始化已有数据

This commit is contained in:
thinkinggis 2020-05-29 09:55:20 +08:00
parent dd11295cd4
commit 852adc2335
6 changed files with 133 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,6 +58,10 @@ export default abstract class DrawFeature extends DrawMode {
this.on(DrawEvent.CREATE, this.onDrawCreate);
this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
document.addEventListener('keydown', this.addKeyDownEvent);
if (this.options.data && this.initData()) {
this.normalLayer.update(this.source.data);
this.normalLayer.enableSelect();
}
}
public abstract drawFinish(): void;
public setCurrentFeature(feature: Feature) {
@ -143,6 +147,9 @@ export default abstract class DrawFeature extends DrawMode {
protected abstract hideOtherLayer(): void;
protected abstract showOtherLayer(): void;
protected initData(): boolean {
return false;
}
private addDrawPopup(lnglat: ILngLat, dis: number) {
const popup = new Popup({

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

@ -30,16 +30,39 @@ export default class DrawLine extends DrawPolygon {
this.pointFeatures = newPointFeture;
return this.currentFeature;
}
protected createFeature(points: ILngLat[]): Feature {
const pointfeatures = createPoint(this.points);
protected createFeature(
points: ILngLat[],
id?: string,
active: boolean = true,
): Feature {
const pointfeatures = createPoint(points);
this.pointFeatures = pointfeatures.features;
const feature = createLine(points, {
id: this.getUniqId(),
id: id || this.getUniqId(),
type: 'line',
active: true,
active,
pointFeatures: this.pointFeatures,
});
this.setCurrentFeature(feature as Feature);
return feature;
}
protected initData(): boolean {
const features: Feature[] = [];
this.source.data.features.forEach((feature) => {
if (feature.geometry.type === 'LineString') {
// @ts-ignore
const points = feature.geometry.coordinates.map((coord) => {
return {
lng: coord[0],
lat: coord[1],
};
});
features.push(
this.createFeature(points, feature?.properties?.id, false),
);
}
});
this.source.data.features = features;
return true;
}
}

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

@ -57,15 +57,34 @@ export default class DrawPoint extends DrawFeature {
};
return this.currentFeature;
}
protected createFeature(p: ILngLat): Feature {
protected createFeature(
p: ILngLat,
id?: string,
active: boolean = true,
): Feature {
const feature = point([p.lng, p.lat], {
id: this.getUniqId(),
id: id || this.getUniqId(),
type: 'point',
active,
pointFeatures: [point([p.lng, p.lat])],
});
this.setCurrentFeature(feature as Feature);
return feature;
}
protected initData(): boolean {
const features: Feature[] = [];
this.source.data.features.forEach((feature) => {
if (feature.geometry.type === 'Point') {
const p = {
lng: feature.geometry.coordinates[0] as number,
lat: feature.geometry.coordinates[1] as number,
};
features.push(this.createFeature(p, feature?.properties?.id, false));
}
});
this.source.data.features = features;
return true;
}
protected editFeature(endPoint: ILngLat): void {
this.createFeature(endPoint);

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

@ -29,11 +29,6 @@ export default class DrawPolygon extends DrawFeature {
this.type = 'polygon';
this.drawMidVertexLayer = new DrawMidVertex(this);
this.on(DrawEvent.MODE_CHANGE, this.addMidLayerEvent);
if (this.options.data) {
this.initData();
this.normalLayer.update(this.source.data);
this.normalLayer.enableSelect();
}
}
public enable() {
super.enable();
@ -240,6 +235,26 @@ export default class DrawPolygon extends DrawFeature {
break;
}
}
protected initData(): boolean {
const features: Feature[] = [];
this.source.data.features.forEach((feature) => {
if (feature.geometry.type === 'Polygon') {
const points = (feature.geometry.coordinates[0] as Position[]).map(
(coord) => {
return {
lng: coord[0],
lat: coord[1],
};
},
);
features.push(
this.createFeature(points.slice(1), feature?.properties?.id, false),
);
}
});
this.source.data.features = features;
return true;
}
private editPolygonVertex(id: number, vertex: ILngLat) {
const feature = this.currentFeature as Feature<Geometries, Properties>;
@ -259,26 +274,6 @@ export default class DrawPolygon extends DrawFeature {
featureCollection([this.currentFeature as Feature]),
);
}
private initData() {
const features: Feature[] = [];
this.source.data.features.forEach((feature) => {
if (feature.geometry.type === 'Polygon') {
const points = (feature.geometry.coordinates[0] as Position[]).map(
(coord) => {
return {
lng: coord[0],
lat: coord[1],
};
},
);
features.push(
this.createFeature(points.slice(1), feature?.properties?.id, false),
);
}
});
this.source.data.features = features;
}
}
/**
* draw 端点响应事件

53
stories/Draw/Components/DrawLine.tsx
View File

@ -16,36 +16,37 @@ export default class Circle extends React.Component {
map: new Mapbox({
pitch: 0,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
center: [79.8046875, 52.482780222078226],
zoom: 4,
}),
});
this.scene = scene;
const linneData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[79.8046875, 52.482780222078226],
[110.74218749999999, 36.87962060502676],
[111.4453125, 19.973348786110602],
[112.8515625, 9.795677582829743],
[95.2734375, -6.664607562172573],
[82.265625, -14.264383087562637],
[74.53125, -25.799891182088306],
[68.203125, -30.145127183376115],
[41.484375, -16.63619187839765],
],
},
},
],
};
const line = scene.on('loaded', () => {
const drawLine = new DrawLine(scene);
const drawLine = new DrawLine(scene, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[79.8046875, 52.482780222078226],
[110.74218749999999, 36.87962060502676],
[111.4453125, 19.973348786110602],
[112.8515625, 9.795677582829743],
[95.2734375, -6.664607562172573],
[82.265625, -14.264383087562637],
[74.53125, -25.799891182088306],
[68.203125, -30.145127183376115],
[41.484375, -16.63619187839765],
],
},
},
],
},
});
drawLine.enable();
});
}

32
stories/Draw/Components/DrawPoint.tsx
View File

@ -23,7 +23,37 @@ export default class Circle extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
const drawPoint = new DrawPoint(scene);
const drawPoint = new DrawPoint(scene, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [88.9453125, 53.330872983017066],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [109.3359375, 28.613459424004414],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [97.734375, 35.460669951495305],
},
},
],
},
});
drawPoint.enable();
});
}