diff --git a/.gitignore b/.gitignore index 115b6ecf1f..04af6204f5 100644 --- a/.gitignore +++ b/.gitignore @@ -79,3 +79,4 @@ node_modules/ packages/l7/package_bak.json stories/Test +packages/draw/node_modules/@turf \ No newline at end of file diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index 0e58d7eb15..8cf4d51525 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -34,7 +34,7 @@ vec4 filterPickingColor(vec4 color) { if (u_PickingStage == PICKING_ENCODE && length(pickingColor) < 0.001) { discard; } - return u_PickingStage == PICKING_ENCODE ? vec4(pickingColor, 1.0) : color; + return u_PickingStage == PICKING_ENCODE ? vec4(pickingColor, step(0.001,color.a)): color; } /* diff --git a/packages/draw/__tests__/util/create_geometry.spec.ts b/packages/draw/__tests__/util/create_geometry.spec.ts new file mode 100644 index 0000000000..ffb5c0b357 --- /dev/null +++ b/packages/draw/__tests__/util/create_geometry.spec.ts @@ -0,0 +1,50 @@ +import { Feature, Geometry, point, Properties } from '@turf/helpers'; +import { + createCircle, + createPoint, + createPolygon, + createRect, +} from '../../src/util/create_geometry'; +const circleData = { + type: 'Feature', + properties: { + units: 'kilometers', + steps: 4, + id: '1', + pointFeatures: [ + { + type: 'Feature', + properties: {}, + geometry: { type: 'Point', coordinates: [113, 40] }, + }, + ], + active: true, + type: 'circle', + radius: 1115.6518229264275, + startPoint: { lng: 112, lat: 30 }, + endPoint: { lng: 113, lat: 40 }, + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [112, 40.03328403184138], + [100.45355724910682, 29.495378543228927], + [112, 19.966715968158613], + [123.54644275089319, 29.495378543228927], + [112, 40.03328403184138], + ], + ], + }, +}; +describe('creat_geometry', () => { + it('creatCircle', () => { + const circle = createCircle([112, 30], [113, 40], { + units: 'kilometers', + steps: 4, + id: '1', + pointFeatures: [point([113, 40])], + }); + expect(circleData).toEqual(circle); + }); +}); diff --git a/packages/draw/src/css/draw.less b/packages/draw/src/css/draw.less index 3f7b6f9f5a..0ae17d886d 100644 --- a/packages/draw/src/css/draw.less +++ b/packages/draw/src/css/draw.less @@ -3,7 +3,7 @@ background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: flex; - a { + button { background-repeat: no-repeat; background-position: center; background-size: 20px 20px; @@ -17,11 +17,11 @@ box-sizing: border-box; cursor: pointer; } - a:not(:disabled):hover { + button:not(:disabled):hover { background-color: rgba(0, 0, 0, 0.05); } - a:focus { + button:focus { box-shadow: 0 0 2px 2px #0096ff; } .draw-point { @@ -46,25 +46,25 @@ } .horizontal { flex-direction: row; - a:focus:first-child { + button:focus:first-child { border-radius: 4px 0px 0px 4px; } - a:focus:last-child { + button:focus:last-child { border-radius: 0px 4px 4px 4px; } - a+a { + button+button { border-left: 1px solid #eee; } } .vertical { flex-direction: column; - a:focus:first-child { + button:focus:first-child { border-radius: 4px 4px 0 0; } - a:focus:last-child { + button:focus:last-child { border-radius: 0px 0px 4px 4px; } - a+a { + button+button { border-top: 1px solid #eee; } } diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index 8d05858f4e..63f703395d 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -1,3 +1,9 @@ +/* + * @Author: lzxue + * @Date: 2020-04-03 19:24:16 + * @Last Modified by: mikey.zhaopeng + * @Last Modified time: 2020-04-03 19:30:39 + */ import { Control, IControlOption, PositionType, Scene } from '@antv/l7'; import { DOM } from '@antv/l7-utils'; import './css/draw.less'; @@ -10,6 +16,15 @@ import { DrawPolygon, DrawRect, } from './modes'; +const DrawType: { + [key: string]: any; +} = { + point: DrawPoint, + line: DrawLine, + polygon: DrawPolygon, + circle: DrawCircle, + rect: DrawRect, +}; import { DrawEvent, DrawModes } from './util/constant'; export interface IControls { [key: string]: boolean; @@ -47,64 +62,34 @@ export class DrawControl extends Control { const controlClass = 'l7-control-draw' + ' ' + layout; const { controls } = this.controlOption as IDrawControlOption; const container = DOM.create('div', controlClass) as HTMLElement; - if (controls.point) { - this.draw.point = new DrawPoint(this.scene); - this.createButton( - '绘制点', - 'draw-point', - container, - this.onButtonClick.bind(null, 'point'), - ); - } - if (controls.line) { - this.draw.line = new DrawLine(this.scene); - this.createButton( - '绘制线', - 'draw-line', - container, - this.onButtonClick.bind(null, 'line'), - ); - } - if (controls.polygon) { - this.createButton( - '绘制面', - 'draw-polygon', - container, - this.onButtonClick.bind(null, 'polygon'), - ); - this.draw.polygon = new DrawPolygon(this.scene); - } - if (controls.rect) { - this.draw.rect = new DrawRect(this.scene); - this.createButton( - '绘制矩形', - 'draw-rect', - container, - this.onButtonClick.bind(null, 'rect'), - ); - } - if (controls.circle) { - this.draw.circle = new DrawCircle(this.scene); - this.createButton( - '绘制圆', - 'draw-circle', - container, - this.onButtonClick.bind(null, 'circle'), - ); - } - - if (controls.delete) { - this.drawDelete = new DrawDelete(this.scene); - this.createButton( - '删除', - 'draw-delete', - container, - this.onDeleteMode.bind(null, 'delete'), - ); - } + this.addControls(controls, container); // 监听组件 选中, 编辑 return container; } + private addControls(controls: IControls, container: HTMLElement) { + for (const type in controls) { + if (DrawType[type]) { + const draw = new DrawType[type](this.scene); + draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type)); + this.draw[type] = draw; + this.createButton( + draw.title, + 'draw-' + type, + container, + this.onButtonClick.bind(null, type), + ); + } else if (type === 'delete') { + const draw = new DrawDelete(this.scene); + draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type)); + this.createButton( + draw.title, + 'draw-' + type, + container, + this.onDeleteMode.bind(null, type), + ); + } + } + } private createButton( tile: string, @@ -112,10 +97,9 @@ export class DrawControl extends Control { container: HTMLElement, fn: (...arg: any[]) => any, ) { - const link = DOM.create('a', className, container) as HTMLLinkElement; - link.href = 'javascript:void(0)'; + const link = DOM.create('button', className, container); link.title = tile; - link.addEventListener('mousedown', fn, true); + link.addEventListener('mousedown', fn, false); return link; } @@ -124,7 +108,6 @@ export class DrawControl extends Control { for (const draw in this.draw) { if (draw === type) { this.draw[draw].enable(); - this.currentDraw = this.draw[draw]; } else { this.draw[draw].disable(); } @@ -139,4 +122,10 @@ export class DrawControl extends Control { this.currentDraw.deleteMode.enable(); return false; }; + + private onModeChange = (type: string, mode: string) => { + if (mode === DrawModes.SIMPLE_SELECT) { + this.currentDraw = this.draw[type]; + } + }; } diff --git a/packages/draw/src/modes/draw_circle.ts b/packages/draw/src/modes/draw_circle.ts index fd39dd13fb..304ab472e9 100644 --- a/packages/draw/src/modes/draw_circle.ts +++ b/packages/draw/src/modes/draw_circle.ts @@ -39,6 +39,13 @@ export default class DrawCircle extends DrawFeature { this.source.setFeatureActive(feature); } + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '绘制圆', + }; + } + protected onDragStart = (e: IInteractionTarget) => { this.startPoint = e.lngLat; this.setCursor('grabbing'); diff --git a/packages/draw/src/modes/draw_delete.ts b/packages/draw/src/modes/draw_delete.ts index 136c8d4cda..fe864c2278 100644 --- a/packages/draw/src/modes/draw_delete.ts +++ b/packages/draw/src/modes/draw_delete.ts @@ -21,6 +21,12 @@ export default class DrawDelete extends DrawFeature { public disable() { return null; } + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '删除图形', + }; + } protected onDragStart(e: any): void { throw new Error('Method not implemented.'); diff --git a/packages/draw/src/modes/draw_line.ts b/packages/draw/src/modes/draw_line.ts index b41d5716ec..be444f6038 100644 --- a/packages/draw/src/modes/draw_line.ts +++ b/packages/draw/src/modes/draw_line.ts @@ -14,6 +14,13 @@ export default class DrawLine extends DrawPolygon { super(scene, options); this.type = 'line'; } + + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '绘制线', + }; + } protected moveFeature(delta: ILngLat): Feature { const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newPointFeture = moveFeatures(this.pointFeatures, delta); diff --git a/packages/draw/src/modes/draw_mode.ts b/packages/draw/src/modes/draw_mode.ts index 930d32d7e9..6777774b14 100644 --- a/packages/draw/src/modes/draw_mode.ts +++ b/packages/draw/src/modes/draw_mode.ts @@ -7,6 +7,7 @@ import LayerStyles from '../util/layerstyle'; export interface IDrawOption { data: FeatureCollection; + title: string; style: any; } @@ -23,6 +24,7 @@ export default abstract class DrawMode extends EventEmitter { public source: DrawSource; public scene: Scene; public type: string; + public title: string; public isEnable: boolean = false; protected options: { @@ -40,6 +42,7 @@ export default abstract class DrawMode extends EventEmitter { this.scene = scene; this.source = new DrawSource(data); this.options = merge(this.options, this.getDefaultOptions(), options); + this.title = this.getOption('title'); } public enable() { if (this.isEnable) { diff --git a/packages/draw/src/modes/draw_point.ts b/packages/draw/src/modes/draw_point.ts index fc0a315937..c532800c51 100644 --- a/packages/draw/src/modes/draw_point.ts +++ b/packages/draw/src/modes/draw_point.ts @@ -19,13 +19,19 @@ export default class DrawPoint extends DrawFeature { super(scene, options); this.type = 'point'; } - public drawFinish() { this.emit(DrawEvent.CREATE, this.currentFeature); this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT); this.disable(); } + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '绘制点', + }; + } + protected onDragStart = (e: IInteractionTarget) => { return null; }; diff --git a/packages/draw/src/modes/draw_polygon.ts b/packages/draw/src/modes/draw_polygon.ts index 049689a50b..44cfa772e0 100644 --- a/packages/draw/src/modes/draw_polygon.ts +++ b/packages/draw/src/modes/draw_polygon.ts @@ -91,6 +91,13 @@ export default class DrawPolygon extends DrawFeature { feature.properties.pointFeatures = pointfeatures.features; this.setCurrentFeature(feature); } + + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '绘制多边形', + }; + } protected onDragStart = (e: IInteractionTarget) => { return null; }; @@ -108,10 +115,10 @@ export default class DrawPolygon extends DrawFeature { this.points.push(lngLat); const feature = this.createFeature(this.points); const properties = feature.properties as { pointFeatures: Feature[] }; - // const pointfeatures = createPoint([this.points[0], this.endPoint]); + const pointfeatures = createPoint([this.points[0], this.endPoint]); // this.pointFeatures = pointfeatures.features; this.drawRender.update(featureCollection([feature])); - this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); + this.drawVertexLayer.update(featureCollection(pointfeatures.features)); this.onDraw(); }; diff --git a/packages/draw/src/modes/draw_rect.ts b/packages/draw/src/modes/draw_rect.ts index 741f942627..794c6100ed 100644 --- a/packages/draw/src/modes/draw_rect.ts +++ b/packages/draw/src/modes/draw_rect.ts @@ -21,6 +21,12 @@ export default class DrawRect extends DrawCircle { public drawFinish() { return null; } + protected getDefaultOptions() { + return { + ...super.getDefaultOptions(), + title: '绘制矩形', + }; + } protected createFeature(id: string = '0'): Feature { const points = createPoint([this.endPoint]); diff --git a/packages/draw/src/util/create_geometry.ts b/packages/draw/src/util/create_geometry.ts index fca031f7e2..2fc89b03e2 100644 --- a/packages/draw/src/util/create_geometry.ts +++ b/packages/draw/src/util/create_geometry.ts @@ -36,7 +36,6 @@ export function createCircle( lng: endPoint[0], lat: endPoint[1], }, - path: [center, endPoint], }, }); return feature as Feature; diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index e6ce612329..01397ef43b 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -37,7 +37,9 @@ export default class Point3D extends React.Component { }) .shape('circle') .size(8) - .active(true) + .active({ + color: 'red', + }) .color('Magnitude', [ '#0A3663', '#1558AC', diff --git a/yarn.lock b/yarn.lock index ff67ea93ea..bed22e09e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4179,7 +4179,7 @@ dependencies: "@turf/helpers" "^5.1.5" -"@turf/midpoint@5.1.x": +"@turf/midpoint@5.1.x", "@turf/midpoint@^5.1.5": version "5.1.5" resolved "https://registry.npmjs.org/@turf/midpoint/-/midpoint-5.1.5.tgz#e261f6b2b0ea8124cceff552a262dd465c9d05f0" integrity sha1-4mH2srDqgSTM7/VSomLdRlydBfA=