diff --git a/docs/api/draw/index.en.md b/docs/api/draw/index.en.md new file mode 100644 index 0000000000..929dda972c --- /dev/null +++ b/docs/api/draw/index.en.md @@ -0,0 +1,4 @@ +--- +title: Draw Component +order: 2 +--- diff --git a/docs/api/draw/index.zh.md b/docs/api/draw/index.zh.md new file mode 100644 index 0000000000..a0310d7103 --- /dev/null +++ b/docs/api/draw/index.zh.md @@ -0,0 +1,274 @@ +--- +title: 地图绘制组件 +order: 2 +--- + +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```javascript +const control = new DrawControl(scene, option); +``` + +#### scene + +scene 对象 + +#### options + +control 配置项 + +| name | Type | Default | Description | +| -------- | --------------------------------------------- | ---------- | ------------------------------- | +| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 | +| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 | +| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 | +| style | | | 地图绘制样式 | + +**controlOptions** +UI 组件配置项 + +- point `boolean | drawOption` 绘制点工具配置 +- line `boolean | drawOption` 绘制线工具配置 +- polygon `boolean | drawOption` 绘制面工具配置 +- circle `boolean | drawOption` 绘制圆工具配置 +- rect `boolean | drawOption` 绘制矩形工具配置 +- delete `boolean | drawOption` 添加删除工具 + +默认配置 + +``` + { + point: true, + line: true, + polygon: true, + rect: true, + circle: true, + delete: true + } +``` + +示例 + +``` +{ + point: false, + line: { + editEnable: false, + }, + polygon: true, + rect: true, + circle: true, + delete: false +``` + +### 添加到地图 + +```javascript +scene.addControl(control); +``` + +### 从地图中移除 + +```javascript +scene.removeControl(control); +``` + +### Draw Type + +可以不依赖 Draw UI 组件，独立的使用每一个 Draw + +#### DrawCircle + +绘制圆形 + +```javascript +import { DrawCircle } from '@antv/l7-draw'; +const drawCircle = new DrawCircle(scene); +drawCircle.enable(); +``` + +#### DrawRect + +绘制四边形 + +```javascript +import { DrawRect } from '@antv/l7-draw'; +const drawRect = new DrawRect(scene); +drawRect.enable(); +``` + +#### DrawLine + +绘制路径 + +```javascript +import { DrawLine } from '@antv/l7-draw'; +const drawLine = new DrawLine(scene); +drawLine.enable(); +``` + +#### DrawPoint + +绘制点 + +```javascript +import { DrawPoint } from '@antv/l7-draw'; +const drawPoint = new DrawPoint(scene); +drawPoint.enable(); +``` + +#### DrawPolygon + +绘制多边形 + +```javascript +import { DrawPolygon } from '@antv/l7-draw'; +const drawPoint = new DrawPolygon(scene); +drawPoint.enable(); +``` + +### 配置项 DrawOption + +- editEnable boolean 是否允许编辑 +- selectEnable boolean 是否允许选中 + +### 方法 + +#### enable + +开始编辑，绘制完成之后会自动结束。 + +#### disable + +结束编辑 + +### 事件 + +#### draw.create + +绘制完成时触发该事件 + +#### draw.delete + +图形删除时触发该事件 + +#### draw.update + +图形更新时触发该事件，图形的平移，顶点的编辑 + +### style + +- active 绘制过程中高亮颜色 +- normal 正常显示状态 + +```javascript +const style = { + active: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 5, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + line: { + type: 'LineLayer', + shape: 'line', + color: '#fbb03b', + size: 1, + style: { + opacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + polygon: { + shape: 'fill', + color: '#fbb03b', + style: { + opacity: 0.1, + stroke: '#fbb03b', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'dash', + dashArray: [2, 2], + }, + }, + }, + normal: { + polygon: { + type: 'PolygonLayer', + shape: 'fill', + color: '#3bb2d0', + style: { + opacity: 0.1, + stroke: '#3bb2d0', + strokeWidth: 1, + strokeOpacity: 1, + lineType: 'solid', + dashArray: [2, 2], + }, + }, + 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: { + type: 'PointLayer', + shape: 'circle', + color: '#3bb2d0', + size: 3, + style: { + stroke: '#fff', + strokeWidth: 2, + }, + }, + mid_point: { + point: { + type: 'PointLayer', + shape: 'circle', + color: '#fbb03b', + size: 3, + style: {}, + }, + }, +}; +``` diff --git a/docs/api/react/popup.en.md b/docs/api/react/popup.en.md index f5ee3fdb40..593b9d1f1f 100644 --- a/docs/api/react/popup.en.md +++ b/docs/api/react/popup.en.md @@ -23,6 +23,7 @@ order: 4 ```jsx import { Popup } from '@antv/l7-react'; - ; ``` + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) diff --git a/docs/api/react/popup.zh.md b/docs/api/react/popup.zh.md index 8b8474c818..34a8ed7395 100644 --- a/docs/api/react/popup.zh.md +++ b/docs/api/react/popup.zh.md @@ -26,3 +26,5 @@ import { Popup } from '@antv/l7-react'; ; ``` + +[popup 使用完整 demo](../../../examples/react/covid#covid_bubble) diff --git a/package.json b/package.json index ebbefe6c64..01c38b733e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@types/enzyme-adapter-react-16": "^1.0.3", "@types/gl": "^4.1.0", "@types/jest": "^24.0.18", - "@types/node": "^12.12.22", + "@types/node": "^13.11.1", "@types/storybook__react": "^4.0.2", "@types/supercluster": "^5.0.1", "awesome-typescript-loader": "^5.2.1", diff --git a/packages/component/src/control/BaseControl.ts b/packages/component/src/control/BaseControl.ts index 679183515b..4f61dcee19 100644 --- a/packages/component/src/control/BaseControl.ts +++ b/packages/component/src/control/BaseControl.ts @@ -83,6 +83,10 @@ export default class Control extends EventEmitter { public onAdd(): HTMLElement { throw new Error('Method not implemented.'); } + + public onRemove(): void { + throw new Error('Method not implemented.'); + } public hide() { const container = this.container; DOM.addClass(container, 'l7-control-hide'); @@ -98,6 +102,7 @@ export default class Control extends EventEmitter { return this; } DOM.remove(this.container); + this.onRemove(); } public _refocusOnMap(e: MouseEvent) { // if map exists and event is not a keyboard event diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts index 2fdd7d8245..06169079f8 100644 --- a/packages/component/src/control/layer.ts +++ b/packages/component/src/control/layer.ts @@ -89,13 +89,22 @@ export default class Layers extends Control { return this; } + public onRemove() { + if (!this.mapsService) { + return; + } + this.mapsService.off('click', this.collapse); + this.layers.forEach((layerItem) => { + layerItem.layer.off('remove', this.onLayerChange); + layerItem.layer.off('add', this.onLayerChange); + }); + } private initLayout() { const className = 'l7-control-layers'; const container = (this.container = DOM.create('div', className)); const { collapsed } = this.controlOption; // makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released container.setAttribute('aria-haspopup', 'true'); - const form = (this.form = DOM.create( 'form', className + '-list', diff --git a/packages/component/src/control/logo.ts b/packages/component/src/control/logo.ts index dd027735df..e25251cd35 100644 --- a/packages/component/src/control/logo.ts +++ b/packages/component/src/control/logo.ts @@ -23,4 +23,8 @@ export default class Logo extends Control { container.appendChild(anchor); return container; } + + public onRemove() { + return null; + } } diff --git a/packages/core/src/services/camera/CameraService.ts b/packages/core/src/services/camera/CameraService.ts index 6c9febcb34..7b885e060e 100644 --- a/packages/core/src/services/camera/CameraService.ts +++ b/packages/core/src/services/camera/CameraService.ts @@ -67,6 +67,10 @@ export default class CameraService implements ICameraService { return this.viewport.getViewMatrixUncentered(); } + public getViewProjectionMatrixUncentered(): number[] { + return this.viewport.getViewProjectionMatrixUncentered(); + } + public getViewProjectionMatrix(): number[] { return ( this.overridedViewProjectionMatrix || diff --git a/packages/core/src/services/camera/ICameraService.ts b/packages/core/src/services/camera/ICameraService.ts index fab7a35f30..e8463acb6d 100644 --- a/packages/core/src/services/camera/ICameraService.ts +++ b/packages/core/src/services/camera/ICameraService.ts @@ -16,6 +16,7 @@ export interface IViewport { getProjectionMatrix(): number[]; getViewMatrix(): number[]; getViewMatrixUncentered(): number[]; + getViewProjectionMatrixUncentered(): number[]; getViewProjectionMatrix(): number[]; getZoom(): number; getZoomScale(): number; diff --git a/packages/core/src/services/component/IControlService.ts b/packages/core/src/services/component/IControlService.ts index 8d6872b9a6..12970064dc 100644 --- a/packages/core/src/services/component/IControlService.ts +++ b/packages/core/src/services/component/IControlService.ts @@ -27,6 +27,7 @@ export interface IControl { setPosition(pos: PositionType): void; addTo(sceneContainer: Container): void; onAdd(): HTMLElement; + onRemove(): void; hide(): void; show(): void; remove(): void; diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 3503e38c86..afa283850a 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -98,7 +98,6 @@ export default class PickingService implements IPickingService { layer.hooks.afterPickingEncode.call(); const isPicked = this.pickFromPickingFBO(layer, target); return isPicked && !layer.getLayerConfig().enablePropagation; - // return false; }); }); } diff --git a/packages/draw/README.md b/packages/draw/README.md index 8ff225dda2..7b71cee0bc 100644 --- a/packages/draw/README.md +++ b/packages/draw/README.md @@ -1,9 +1,56 @@ # `draw` + 地图绘制组件，支持点、线、面的绘制编辑, +## 使用 -## Usage +l7-draw 需要引用 ``` -const draw = require('l7-draw'); +import { DrawControl } from '@antv/l7-draw'; + +``` +CDN 版本引用 + +```html + + + + +``` + +### example + +```javascript + +import { Scene } from '@antv/l7'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import { DrawControl } from '@antv/l7-draw'; +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 0, + style: 'dark', // hosted style id + center: [112.874, 32.76], // starting position + zoom: 12, // starting zoom + }), + }); + this.scene = scene; + + scene.on('loaded', () => { + + const drawControl = new DrawControl(scene, { + position: 'topright', + layout: 'horizontal', // horizontal vertical + controls: { + point: true, + polygon: true, + line: true, + circle: true, + rect: true, + delete: true, + }, + }); + scene.addControl(drawControl); + }); ``` diff --git a/packages/draw/package.json b/packages/draw/package.json index 0d608552b8..87c905f951 100644 --- a/packages/draw/package.json +++ b/packages/draw/package.json @@ -11,6 +11,7 @@ "types": "es/index.d.ts", "sideEffects": true, "files": [ + "dist", "lib", "es", "README.md" @@ -29,6 +30,7 @@ "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", + "build:cdn": "node_modules/.bin/rollup -c", "lint:ts": "run-p -c lint:ts-*", "test": "jest" }, @@ -45,5 +47,11 @@ "bugs": { "url": "https://github.com/antvis/L7/issues" }, - "homepage": "https://github.com/antvis/L7#readme" + "homepage": "https://github.com/antvis/L7#readme", + "devDependencies": { + "postcss": "^7.0.27", + "postcss-url": "^8.0.0", + "rollup": "^2.3.3", + "rollup-plugin-less": "^1.1.2" + } } diff --git a/packages/draw/rollup.config.js b/packages/draw/rollup.config.js index 68ffd91927..cbc40a54b2 100644 --- a/packages/draw/rollup.config.js +++ b/packages/draw/rollup.config.js @@ -3,26 +3,48 @@ import typescript from 'rollup-plugin-typescript'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import buble from 'rollup-plugin-buble'; - +import postcss from 'rollup-plugin-postcss'; +import { terser } from 'rollup-plugin-terser'; +import url from 'postcss-url'; export default { input: './src/index.ts', plugins: [ + // less(), typescript({ exclude: 'node_modules/**', typescript: require('typescript') }), - resolve(), - commonjs(), + resolve({ + preferBuiltins: false + }), + postcss({ + plugins: [ + url({ url: 'inline' }) + ] + }), + commonjs({ + namedExports: { + eventemitter3: [ 'EventEmitter' ], + lodash: [ 'merge' ] + } + }), buble({ transforms: { generator: false } - }) + }), + terser() + ], + external: [ + '@antv/l7' ], output: [ { format: 'umd', name: 'L7-Draw', file: pkg.unpkg, - sourcemap: true + sourcemap: true, + globals: { + '@antv/l7': 'L7' + } } ] }; diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index 63f703395d..a507ada244 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -2,10 +2,9 @@ * @Author: lzxue * @Date: 2020-04-03 19:24:16 * @Last Modified by: mikey.zhaopeng - * @Last Modified time: 2020-04-03 19:30:39 + * @Last Modified time: 2020-04-09 19:34:41 */ -import { Control, IControlOption, PositionType, Scene } from '@antv/l7'; -import { DOM } from '@antv/l7-utils'; +import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7'; import './css/draw.less'; import { DrawCircle, @@ -16,6 +15,7 @@ import { DrawPolygon, DrawRect, } from './modes'; +import { IDrawFeatureOption } from './modes/draw_feature'; const DrawType: { [key: string]: any; } = { @@ -25,9 +25,10 @@ const DrawType: { circle: DrawCircle, rect: DrawRect, }; +import { isObject, polygon } from '@turf/helpers'; import { DrawEvent, DrawModes } from './util/constant'; export interface IControls { - [key: string]: boolean; + [key: string]: boolean | IDrawFeatureOption; } export interface IDrawControlOption extends IControlOption { @@ -39,7 +40,6 @@ export class DrawControl extends Control { private draw: { [key: string]: DrawFeature; } = {}; - private drawDelete: DrawDelete; private currentDraw: DrawFeature; private scene: Scene; constructor(scene: Scene, options: Partial) { @@ -52,6 +52,11 @@ export class DrawControl extends Control { position: PositionType.TOPLEFT, controls: { point: true, + line: true, + polygon: true, + rect: true, + circle: true, + delete: true, }, name: 'draw', }; @@ -66,10 +71,19 @@ export class DrawControl extends Control { // 监听组件 选中, 编辑 return container; } + + public onRemove() { + for (const draw in this.draw) { + if (this.draw[draw]) { + this.draw[draw].destroy(); + } + } + } private addControls(controls: IControls, container: HTMLElement) { for (const type in controls) { - if (DrawType[type]) { - const draw = new DrawType[type](this.scene); + if (DrawType[type] && controls[type] !== false) { + const drawOption = isObject(controls[type]) ? controls[type] : false; + const draw = new DrawType[type](this.scene, drawOption); draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type)); this.draw[type] = draw; this.createButton( @@ -78,7 +92,7 @@ export class DrawControl extends Control { container, this.onButtonClick.bind(null, type), ); - } else if (type === 'delete') { + } else if (type === 'delete' && controls[type] !== false) { const draw = new DrawDelete(this.scene); draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type)); this.createButton( @@ -99,12 +113,11 @@ export class DrawControl extends Control { ) { const link = DOM.create('button', className, container); link.title = tile; - link.addEventListener('mousedown', fn, false); + link.addEventListener('mouseup', fn, false); return link; } private onButtonClick = (type: string, e: MouseEvent) => { - e.stopPropagation(); for (const draw in this.draw) { if (draw === type) { this.draw[draw].enable(); diff --git a/packages/draw/src/modes/draw_circle.ts b/packages/draw/src/modes/draw_circle.ts index 304ab472e9..92606cb227 100644 --- a/packages/draw/src/modes/draw_circle.ts +++ b/packages/draw/src/modes/draw_circle.ts @@ -1,7 +1,12 @@ -import { IInteractionTarget, ILngLat, PointLayer, Scene } from '@antv/l7'; +import { + IInteractionTarget, + ILayer, + ILngLat, + PointLayer, + Scene, +} from '@antv/l7'; import { Feature, - FeatureCollection, featureCollection, Geometries, Properties, @@ -10,15 +15,12 @@ import { DrawEvent, DrawModes, unitsType } from '../util/constant'; 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; -} export default class DrawCircle extends DrawFeature { protected startPoint: ILngLat; protected endPoint: ILngLat; protected pointFeatures: Feature[]; - constructor(scene: Scene, options: Partial = {}) { + protected centerLayer: ILayer; + constructor(scene: Scene, options: Partial = {}) { super(scene, options); this.type = 'circle'; } @@ -30,7 +32,6 @@ export default class DrawCircle extends DrawFeature { public setCurrentFeature(feature: Feature) { this.currentFeature = feature as Feature; // @ts-ignore - // @ts-ignore this.pointFeatures = feature.properties.pointFeatures; // @ts-ignore this.startPoint = feature.properties.startPoint; @@ -39,7 +40,7 @@ export default class DrawCircle extends DrawFeature { this.source.setFeatureActive(feature); } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '绘制圆', @@ -47,6 +48,9 @@ export default class DrawCircle extends DrawFeature { } protected onDragStart = (e: IInteractionTarget) => { + if (this.drawStatus !== 'Drawing') { + this.drawLayer.emit('unclick', null); + } this.startPoint = e.lngLat; this.setCursor('grabbing'); this.initCenterLayer(); @@ -57,14 +61,14 @@ export default class DrawCircle extends DrawFeature { this.endPoint = e.lngLat; const feature = this.createFeature() as Feature; const properties = feature.properties as { pointFeatures: Feature[] }; - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); }; protected onDragEnd = () => { const feature = this.createFeature(`${this.getUniqId()}`); const properties = feature.properties as { pointFeatures: Feature[] }; - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); this.emit(DrawEvent.CREATE, this.currentFeature); this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT); @@ -73,7 +77,7 @@ export default class DrawCircle extends DrawFeature { protected moveFeature(delta: ILngLat): void { const newFeature = moveFeatures([this.currentFeature as Feature], delta); - this.drawRender.updateData(featureCollection(newFeature)); + this.drawLayer.updateData(featureCollection(newFeature)); const newPointFeture = moveFeatures(this.pointFeatures, delta); this.drawVertexLayer.updateData(featureCollection(newPointFeture)); const newStartPoint = movePoint( @@ -113,7 +117,7 @@ export default class DrawCircle extends DrawFeature { this.endPoint = endPoint; const newFeature = this.createFeature(); const properties = newFeature.properties as { pointFeatures: Feature[] }; - this.drawRender.updateData(featureCollection([newFeature])); + this.drawLayer.updateData(featureCollection([newFeature])); this.drawVertexLayer.updateData( featureCollection(properties.pointFeatures), ); diff --git a/packages/draw/src/modes/draw_delete.ts b/packages/draw/src/modes/draw_delete.ts index fe864c2278..99306e4c7d 100644 --- a/packages/draw/src/modes/draw_delete.ts +++ b/packages/draw/src/modes/draw_delete.ts @@ -1,17 +1,11 @@ import { IInteractionTarget, ILngLat, Scene } from '@antv/l7'; import { Feature } from '@turf/helpers'; import { DrawEvent } from '../util/constant'; +import { IDrawFeatureOption } from './draw_feature'; import DrawFeature, { IDrawOption } from './draw_mode'; -export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers'; -export interface IDrawCircleOption extends IDrawOption { - units: unitsType; - steps: number; -} - export default class DrawDelete extends DrawFeature { - private endPoint: ILngLat; // 绘制完成之后显示 - constructor(scene: Scene, options: Partial = {}) { + constructor(scene: Scene, options: Partial = {}) { super(scene, options); } @@ -21,7 +15,7 @@ export default class DrawDelete extends DrawFeature { public disable() { return null; } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '删除图形', diff --git a/packages/draw/src/modes/draw_edit.ts b/packages/draw/src/modes/draw_edit.ts index d26e170bf0..1443844637 100644 --- a/packages/draw/src/modes/draw_edit.ts +++ b/packages/draw/src/modes/draw_edit.ts @@ -1,21 +1,12 @@ import { IInteractionTarget, ILngLat, Scene } from '@antv/l7'; import { Feature } from '@turf/helpers'; import { DrawEvent } from '../util/constant'; +import { IDrawFeatureOption } from './draw_feature'; import DrawFeature, { IDrawOption } from './draw_mode'; -export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers'; -export interface IDrawCircleOption extends IDrawOption { - units: unitsType; - steps: number; -} -const InitFeature = { - type: 'FeatureCollection', - features: [], -}; export default class DrawEdit extends DrawFeature { - private center: ILngLat; private endPoint: ILngLat; // 绘制完成之后显示 - constructor(scene: Scene, options: Partial = {}) { + constructor(scene: Scene, options: Partial = {}) { super(scene, options); } @@ -26,6 +17,7 @@ export default class DrawEdit extends DrawFeature { protected onDragStart = (e: IInteractionTarget) => { // @ts-ignore }; + protected getDefaultOptions() { return { steps: 64, @@ -41,7 +33,7 @@ export default class DrawEdit extends DrawFeature { }; protected onDragEnd = () => { - this.emit(DrawEvent.UPDATE, null); + this.emit(DrawEvent.UPDATE, this.currentFeature); this.resetCursor(); this.disable(); }; diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts index d4d30dd252..8d51ddbaf7 100644 --- a/packages/draw/src/modes/draw_feature.ts +++ b/packages/draw/src/modes/draw_feature.ts @@ -4,42 +4,43 @@ import { FeatureCollection, featureCollection, point, + Units, + unitsFactors, } from '@turf/helpers'; import DrawRender from '../render/draw'; import RenderLayer from '../render/draw_result'; import DrawVertexLayer from '../render/draw_vertex'; -import { DrawEvent, DrawModes, unitsType } from '../util/constant'; +import { DrawEvent, DrawModes } from '../util/constant'; import DrawDelete from './draw_delete'; import DrawEdit from './draw_edit'; import DrawMode, { IDrawOption } from './draw_mode'; import DrawSelected from './draw_selected'; export interface IDrawFeatureOption extends IDrawOption { - units: unitsType; + units: Units; steps: number; + editEnable: boolean; + selectEnable: boolean; + cursor: string; } -const InitFeature = { - type: 'FeatureCollection', - features: [], -}; export default abstract class DrawFeature extends DrawMode { // 绘制完成之后显示 public selectMode: DrawSelected; public editMode: DrawEdit; public deleteMode: DrawDelete; + public editEnable: boolean; + public selectEnable: boolean; - protected renderLayer: RenderLayer; - protected drawRender: DrawRender; + protected normalLayer: RenderLayer; + protected drawLayer: DrawRender; protected drawVertexLayer: DrawVertexLayer; - protected centerLayer: ILayer; - // 编辑过程中显示 - protected drawLayer: ILayer; - protected drawLineLayer: ILayer; constructor(scene: Scene, options: Partial = {}) { super(scene, options); - this.drawRender = new DrawRender(this); + this.drawLayer = new DrawRender(this); this.drawVertexLayer = new DrawVertexLayer(this); - this.renderLayer = new RenderLayer(this); + this.normalLayer = new RenderLayer(this); + this.selectEnable = this.getOption('selectEnable'); + this.editEnable = this.getOption('editEnable'); // this.editLayer = new EditLayer(this); this.selectMode = new DrawSelected(this.scene, {}); @@ -56,6 +57,7 @@ export default abstract class DrawFeature extends DrawMode { this.deleteMode.on(DrawEvent.DELETE, this.onDrawDelete); this.on(DrawEvent.CREATE, this.onDrawCreate); this.on(DrawEvent.MODE_CHANGE, this.onModeChange); + document.addEventListener('keydown', this.addKeyDownEvent); } public abstract drawFinish(): void; public setCurrentFeature(feature: Feature) { @@ -71,19 +73,19 @@ export default abstract class DrawFeature extends DrawMode { } public disableLayer() { // this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); - this.drawRender.disableDrag(); + this.drawLayer.disableSelect(); } public enableLayer() { - this.drawRender.enableDrag(); + this.drawLayer.enableSelect(); } public clear() { - this.drawRender.hide(); + this.drawLayer.hide(); this.drawVertexLayer.hide(); this.hideOtherLayer(); this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); } public reset() { - this.drawRender.show(); + this.drawLayer.show(); this.drawVertexLayer.show(); this.showOtherLayer(); } @@ -91,11 +93,24 @@ export default abstract class DrawFeature extends DrawMode { public addVertex(feature: Feature): void { throw new Error('子类未实现该方法'); } - protected getDefaultOptions() { + + public onRemove() { + this.destroy(); + this.selectMode.destroy(); + this.editMode.destroy(); + this.source.destroy(); + this.drawLayer.destroy(); + this.drawVertexLayer.destroy(); + this.normalLayer.destroy(); + document.removeEventListener('keydown', this.addKeyDownEvent); + } + protected getDefaultOptions(): Partial { return { steps: 64, - units: 'kilometres', + units: 'kilometers', cursor: 'crosshair', + editEnable: true, + selectEnable: true, }; } protected abstract onDragStart(e: IInteractionTarget): void; @@ -128,9 +143,12 @@ export default abstract class DrawFeature extends DrawMode { private onModeChange = (mode: DrawModes[any]) => { switch (mode) { case DrawModes.DIRECT_SELECT: + if (!this.editEnable) { + return; + } this.editMode.enable(); this.editMode.setEditFeature(this.currentFeature as Feature); - this.drawRender.updateData( + this.drawLayer.updateData( featureCollection([this.currentFeature as Feature]), ); this.drawVertexLayer.updateData( @@ -142,10 +160,17 @@ export default abstract class DrawFeature extends DrawMode { this.drawStatus = 'DrawEdit'; break; case DrawModes.SIMPLE_SELECT: + if (!this.selectEnable) { + this.drawLayer.hide(); + this.drawVertexLayer.hide(); + this.hideOtherLayer(); + this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); + return; + } this.selectMode.setSelectedFeature(this.currentFeature as Feature); this.selectMode.enable(); - this.drawRender.enableDrag(); - this.drawRender.updateData( + this.drawLayer.enableSelect(); + this.drawLayer.updateData( featureCollection([this.currentFeature as Feature]), ); this.drawVertexLayer.updateData( @@ -153,7 +178,7 @@ export default abstract class DrawFeature extends DrawMode { ); this.drawVertexLayer.disableEdit(); this.drawVertexLayer.show(); - this.drawRender.show(); + this.drawLayer.show(); this.showOtherLayer(); this.drawStatus = 'DrawSelected'; break; @@ -163,8 +188,8 @@ export default abstract class DrawFeature extends DrawMode { this.drawVertexLayer.hide(); this.drawVertexLayer.disableEdit(); this.hideOtherLayer(); - this.renderLayer.update(this.source.data); - this.renderLayer.enableDrag(); + this.normalLayer.update(this.source.data); + this.normalLayer.enableSelect(); this.drawStatus = 'DrawFinish'; break; } @@ -176,6 +201,7 @@ export default abstract class DrawFeature extends DrawMode { private onDrawUpdate = (feature: Feature) => { this.source.updateFeature(this.currentFeature as Feature); + this.emit(DrawEvent.UPDATE, this.currentFeature); }; private onDrawMove = (delta: ILngLat) => { @@ -190,10 +216,15 @@ export default abstract class DrawFeature extends DrawMode { if (this.drawStatus === 'DrawSelected') { this.clear(); this.source.removeFeature(this.currentFeature as Feature); - this.renderLayer.update(this.source.data); - // this.reset(); + this.normalLayer.update(this.source.data); } + }; - // this.source.removeFeature(this.currentFeature as Feature + private addKeyDownEvent = (event: KeyboardEvent) => { + // tslint:disable-next-line:no-arg + const e = event || window.event; + if (e && e.keyCode === 8) { + this.deleteMode.enable(); + } }; } diff --git a/packages/draw/src/modes/draw_line.ts b/packages/draw/src/modes/draw_line.ts index be444f6038..b82ea221a5 100644 --- a/packages/draw/src/modes/draw_line.ts +++ b/packages/draw/src/modes/draw_line.ts @@ -15,7 +15,7 @@ export default class DrawLine extends DrawPolygon { this.type = 'line'; } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '绘制线', @@ -24,7 +24,7 @@ export default class DrawLine extends DrawPolygon { protected moveFeature(delta: ILngLat): Feature { const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newPointFeture = moveFeatures(this.pointFeatures, delta); - this.drawRender.updateData(featureCollection(newFeature)); + this.drawLayer.updateData(featureCollection(newFeature)); this.drawVertexLayer.updateData(featureCollection(newPointFeture)); this.currentFeature = newFeature[0]; this.pointFeatures = newPointFeture; diff --git a/packages/draw/src/modes/draw_mode.ts b/packages/draw/src/modes/draw_mode.ts index fa33f340f5..9a6f79b982 100644 --- a/packages/draw/src/modes/draw_mode.ts +++ b/packages/draw/src/modes/draw_mode.ts @@ -1,7 +1,8 @@ import { IInteractionTarget, IPopup, Scene } from '@antv/l7'; import { Feature, FeatureCollection } from '@turf/helpers'; import { EventEmitter } from 'eventemitter3'; -import { merge } from 'lodash'; +// tslint:disable-next-line:no-submodule-imports +import merge from 'lodash/merge'; import DrawSource from '../source'; import LayerStyles from '../util/layerstyle'; @@ -49,7 +50,9 @@ export default abstract class DrawMode extends EventEmitter { return; } // @ts-ignore - this.scene.map.dragPan.disable(); + this.scene.setMapStatus({ + dragEnable: false, + }); this.scene.on('dragstart', this.onDragStart); this.scene.on('dragging', this.onDragging); this.scene.on('dragend', this.onDragEnd); @@ -68,7 +71,9 @@ export default abstract class DrawMode extends EventEmitter { this.scene.off('click', this.onClick); this.resetCursor(); // @ts-ignore - this.scene.map.dragPan.enable(); + this.scene.setMapStatus({ + dragEnable: true, + }); this.isEnable = false; } public setCurrentFeature(feature: Feature) { @@ -83,11 +88,11 @@ export default abstract class DrawMode extends EventEmitter { throw new Error('子类未实现该方法'); } - public getCurrentVertex() { - return this.currentVertex; + public getCurrentVertex(): Feature { + return this.currentVertex as Feature; } - public getCurrentFeature() { - return this.currentVertex; + public getCurrentFeature(): Feature { + return this.currentFeature as Feature; } public getOption(key: string) { @@ -114,8 +119,13 @@ export default abstract class DrawMode extends EventEmitter { container.removeAttribute('style'); } } + public destroy() { + DrawFeatureId = 0; + this.removeAllListeners(); + this.disable(); + } - protected getDefaultOptions() { + protected getDefaultOptions(): any { return {}; } diff --git a/packages/draw/src/modes/draw_point.ts b/packages/draw/src/modes/draw_point.ts index c532800c51..62ac73b78e 100644 --- a/packages/draw/src/modes/draw_point.ts +++ b/packages/draw/src/modes/draw_point.ts @@ -1,21 +1,12 @@ import { IInteractionTarget, ILayer, ILngLat, Scene } from '@antv/l7'; -import { - Feature, - FeatureCollection, - featureCollection, - point, -} from '@turf/helpers'; +import { Feature, featureCollection, point } from '@turf/helpers'; import { DrawEvent, DrawModes, unitsType } from '../util/constant'; import moveFeatures from '../util/move_featrues'; import DrawFeature, { IDrawFeatureOption } from './draw_feature'; -export interface IDrawRectOption extends IDrawFeatureOption { - units: unitsType; - steps: number; -} export default class DrawPoint extends DrawFeature { protected pointFeatures: Feature[]; - constructor(scene: Scene, options: Partial = {}) { + constructor(scene: Scene, options: Partial = {}) { super(scene, options); this.type = 'point'; } @@ -25,7 +16,7 @@ export default class DrawPoint extends DrawFeature { this.disable(); } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '绘制点', @@ -44,16 +35,19 @@ export default class DrawPoint extends DrawFeature { }; protected onClick = (e: any) => { - const lngLat = e.lngLat; + if (this.drawStatus !== 'Drawing') { + this.drawLayer.emit('unclick', null); + } + const lngLat = e.lngLat || e.lnglat; const feature = this.createFeature(lngLat); - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection([feature])); this.drawFinish(); }; protected moveFeature(delta: ILngLat): Feature { const newFeature = moveFeatures([this.currentFeature as Feature], delta); - this.drawRender.updateData(featureCollection(newFeature)); + this.drawLayer.updateData(featureCollection(newFeature)); this.drawVertexLayer.updateData(featureCollection(newFeature)); this.currentFeature = newFeature[0]; this.pointFeatures = newFeature; diff --git a/packages/draw/src/modes/draw_polygon.ts b/packages/draw/src/modes/draw_polygon.ts index af8b251542..b6c45812c5 100644 --- a/packages/draw/src/modes/draw_polygon.ts +++ b/packages/draw/src/modes/draw_polygon.ts @@ -46,10 +46,9 @@ export default class DrawPolygon extends DrawFeature { public drawFinish() { const feature = this.createFeature(this.points); const properties = feature.properties as { pointFeatures: Feature[] }; - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection(properties.pointFeatures)); // @ts-ignore - // feature.properties.pointFeatures = pointfeatures; this.emit(DrawEvent.CREATE, this.currentFeature); this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT); this.points = []; @@ -84,7 +83,7 @@ export default class DrawPolygon extends DrawFeature { } const pointfeatures = createPoint(points); this.pointFeatures = pointfeatures.features; - this.drawRender.updateData(featureCollection([feature])); + this.drawLayer.updateData(featureCollection([feature])); this.drawVertexLayer.updateData(pointfeatures); this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures)); // @ts-ignore @@ -92,7 +91,7 @@ export default class DrawPolygon extends DrawFeature { this.setCurrentFeature(feature); } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '绘制多边形', @@ -110,31 +109,34 @@ export default class DrawPolygon extends DrawFeature { }; protected onClick = (e: any) => { - const lngLat = e.lngLat; + if (this.drawStatus !== 'Drawing') { + this.drawLayer.emit('unclick', null); + } + const lngLat = e.lngLat || e.lnglat; this.endPoint = lngLat; 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]); // this.pointFeatures = pointfeatures.features; - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); this.drawVertexLayer.update(featureCollection(pointfeatures.features)); this.onDraw(); }; protected onMouseMove = (e: any) => { - const lngLat = e.lngLat; + const lngLat = e.lngLat || e.lnglat; if (this.points.length === 0) { return; } const tmpPoints = this.points.slice(); tmpPoints.push(lngLat); const feature = this.createFeature(tmpPoints); - this.drawRender.update(featureCollection([feature])); + this.drawLayer.update(featureCollection([feature])); }; protected onDblClick = (e: any) => { - const lngLat = e.lngLat; + const lngLat = e.lngLat || e.lnglat; if (this.points.length < 2) { return; } @@ -145,7 +147,7 @@ export default class DrawPolygon extends DrawFeature { protected moveFeature(delta: ILngLat): void { const newFeature = moveFeatures([this.currentFeature as Feature], delta); const newPointFeture = moveFeatures(this.pointFeatures, delta); - this.drawRender.updateData(featureCollection(newFeature)); + this.drawLayer.updateData(featureCollection(newFeature)); this.drawVertexLayer.updateData(featureCollection(newPointFeture)); newFeature[0].properties = { ...newFeature[0].properties, @@ -166,13 +168,13 @@ export default class DrawPolygon extends DrawFeature { return feature; } - protected editFeature(vertex: ILngLat) { + protected editFeature(vertex: ILngLat): void { const selectVertexed = this.currentVertex as Feature< Geometries, Properties >; if (selectVertexed === null) { - return featureCollection([]); + return; } else { // @ts-ignore const id = selectVertexed.properties.id * 1; @@ -183,7 +185,7 @@ export default class DrawPolygon extends DrawFeature { this.drawVertexLayer.updateData(featureCollection(this.pointFeatures)); this.drawMidVertexLayer.updateData(featureCollection(this.pointFeatures)); this.editPolygonVertex(id, vertex); - this.drawRender.updateData( + this.drawLayer.updateData( featureCollection([this.currentFeature as Feature]), ); const feature = this.currentFeature as Feature; @@ -246,7 +248,7 @@ export default class DrawPolygon extends DrawFeature { coords[id] = [vertex.lng, vertex.lat]; } this.setCurrentFeature(feature); - this.drawRender.updateData( + this.drawLayer.updateData( featureCollection([this.currentFeature as Feature]), ); } diff --git a/packages/draw/src/modes/draw_rect.ts b/packages/draw/src/modes/draw_rect.ts index 794c6100ed..c5c4a08eb1 100644 --- a/packages/draw/src/modes/draw_rect.ts +++ b/packages/draw/src/modes/draw_rect.ts @@ -9,19 +9,15 @@ import { unitsType } from '../util/constant'; import { createPoint, createRect } from '../util/create_geometry'; import DrawCircle from './draw_circle'; import { IDrawFeatureOption } from './draw_feature'; -export interface IDrawRectOption extends IDrawFeatureOption { - units: unitsType; - steps: number; -} export default class DrawRect extends DrawCircle { - constructor(scene: Scene, options: Partial = {}) { + constructor(scene: Scene, options: Partial = {}) { super(scene, options); this.type = 'rect'; } public drawFinish() { return null; } - protected getDefaultOptions() { + protected getDefaultOptions(): Partial { return { ...super.getDefaultOptions(), title: '绘制矩形', diff --git a/packages/draw/src/modes/draw_selected.ts b/packages/draw/src/modes/draw_selected.ts index 31b81739df..21a88c0bc4 100644 --- a/packages/draw/src/modes/draw_selected.ts +++ b/packages/draw/src/modes/draw_selected.ts @@ -12,12 +12,8 @@ import { import { Feature, featureCollection, point } from '@turf/helpers'; import { DrawEvent, DrawModes } from '../util/constant'; import moveFeatures from '../util/move_featrues'; +import { IDrawFeatureOption } from './draw_feature'; import DrawFeature, { IDrawOption } from './draw_mode'; -export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers'; -export interface IDrawCircleOption extends IDrawOption { - units: unitsType; - steps: number; -} const InitFeature = { type: 'FeatureCollection', features: [], @@ -26,9 +22,8 @@ export default class DrawSelect extends DrawFeature { private center: ILngLat; private dragStartPoint: ILngLat; // 绘制完成之后显示 - constructor(scene: Scene, options: Partial = {}) { + constructor(scene: Scene, options: Partial = {}) { super(scene, options); - // this.editLayer = new EditRender(this); } public setSelectedFeature(feature: Feature) { @@ -36,14 +31,14 @@ export default class DrawSelect extends DrawFeature { } protected onDragStart = (e: IInteractionTarget) => { - // @ts-ignore - this.scene.map.dragPan.disable(); + this.scene.setMapStatus({ dragEnable: false }); this.dragStartPoint = e.lngLat; }; - protected getDefaultOptions() { + + protected getDefaultOptions(): Partial { return { steps: 64, - units: 'kilometres', + units: 'kilometers', cursor: 'move', }; } diff --git a/packages/draw/src/render/base_render.ts b/packages/draw/src/render/base_render.ts index 0e5cc1a365..ad3db36412 100644 --- a/packages/draw/src/render/base_render.ts +++ b/packages/draw/src/render/base_render.ts @@ -33,6 +33,12 @@ export default class BaseRenderLayer { const layer = this.drawLayers[0]; layer.off(type, handler); } + + public emit(type: string, e: any) { + const layer = this.drawLayers[0]; + layer.emit(type, e); + } + public updateData(data: any) { this.drawLayers.forEach((layer) => layer.setData(data)); } diff --git a/packages/draw/src/render/draw.ts b/packages/draw/src/render/draw.ts index dec3a10edc..df3f9eb50c 100644 --- a/packages/draw/src/render/draw.ts +++ b/packages/draw/src/render/draw.ts @@ -15,7 +15,7 @@ export default class DrawLayer extends BaseRender { this.drawLayers = renderFeature(feature, style); this.addLayers(); } - public enableDrag() { + public enableSelect() { this.show(); if (this.isEnableDrag) { return; @@ -23,11 +23,13 @@ export default class DrawLayer extends BaseRender { const layer = this.drawLayers[0]; layer.on('mouseenter', this.onMouseMove); layer.on('mouseout', this.onUnMouseMove); - layer.on('click', this.onClick); - layer.on('unmousedown', this.onUnClick); + if (this.draw.editEnable) { + layer.on('click', this.onClick); + } + layer.on('unclick', this.onUnClick); this.isEnableDrag = true; } - public disableDrag() { + public disableSelect() { if (!this.isEnableDrag) { return; } @@ -35,7 +37,7 @@ export default class DrawLayer extends BaseRender { layer.off('mouseenter', this.onMouseMove); layer.off('mouseout', this.onUnMouseMove); layer.off('click', this.onClick); - layer.off('unmousedown', this.onUnClick); + layer.off('unclick', this.onUnClick); this.isEnableDrag = false; } @@ -68,7 +70,7 @@ export default class DrawLayer extends BaseRender { private onClick = (e: any) => { this.draw.selectMode.disable(); this.draw.editMode.enable(); - this.disableDrag(); + this.disableSelect(); this.draw.resetCursor(); this.enableEdit(); this.draw.setCurrentFeature(e.feature); @@ -81,7 +83,7 @@ export default class DrawLayer extends BaseRender { this.draw.source.setFeatureUnActive( this.draw.getCurrentFeature() as Feature, ); - this.disableDrag(); + this.disableSelect(); this.disableEdit(); this.hide(); this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC); diff --git a/packages/draw/src/render/draw_mid_vertex.ts b/packages/draw/src/render/draw_mid_vertex.ts index ca07dcbbc9..61e38aff5e 100644 --- a/packages/draw/src/render/draw_mid_vertex.ts +++ b/packages/draw/src/render/draw_mid_vertex.ts @@ -38,11 +38,9 @@ export default class DrawVertexLayer extends BaseRender { private onMouseEnter = (e: any) => { this.draw.setCursor('pointer'); - // this.draw.editMode.enable(); }; private onMouseOut = (e: any) => { this.draw.resetCursor(); - // this.draw.editMode.disable(); }; private onClick = (e: any) => { this.draw.addVertex(e.feature); diff --git a/packages/draw/src/render/draw_result.ts b/packages/draw/src/render/draw_result.ts index 50b933c19d..5cb31a8ef7 100644 --- a/packages/draw/src/render/draw_result.ts +++ b/packages/draw/src/render/draw_result.ts @@ -14,15 +14,18 @@ export default class DrawResultLayer extends BaseRender { this.addFilter(); this.addLayers(); } - public enableDrag() { + public enableSelect() { if (this.isEnableDrag) { return; } + if (!this.draw.selectEnable) { + return; + } const layer = this.drawLayers[0]; layer.on('click', this.onClick); this.isEnableDrag = true; } - public disableDrag() { + public disableSelect() { if (!this.isEnableDrag) { return; } @@ -31,7 +34,7 @@ export default class DrawResultLayer extends BaseRender { this.isEnableDrag = false; } public enableDelete() { - this.disableDrag(); + this.disableSelect(); const layer = this.drawLayers[0]; layer.on('click', this.onDeleteClick); } diff --git a/packages/draw/src/render/draw_vertex.ts b/packages/draw/src/render/draw_vertex.ts index d936161107..4cc6e0dd57 100644 --- a/packages/draw/src/render/draw_vertex.ts +++ b/packages/draw/src/render/draw_vertex.ts @@ -8,10 +8,10 @@ export default class DrawVertexLayer extends BaseRender { this.drawLayers = renderFeature(feature, style); this.addLayers(); } - public enableDrag() { + public enableSelect() { return; } - public disableDrag() { + public disableSelect() { return; } diff --git a/packages/draw/src/render/renderFeature.ts b/packages/draw/src/render/renderFeature.ts index 894d2acc6d..2b29221152 100644 --- a/packages/draw/src/render/renderFeature.ts +++ b/packages/draw/src/render/renderFeature.ts @@ -18,7 +18,9 @@ export function renderFeature(fe: FeatureCollection, style: any): ILayer[] { } function drawPoint(fe: FeatureCollection, style: any) { - const layer = new PointLayer() + const layer = new PointLayer({ + zIndex: 2, + }) .source(fe) .shape('circle') .color(style.color) diff --git a/packages/draw/src/source.ts b/packages/draw/src/source.ts index bcb52f8282..e45b7ea671 100644 --- a/packages/draw/src/source.ts +++ b/packages/draw/src/source.ts @@ -46,6 +46,9 @@ export default class DrawSource { this.removeFeature(feature); this.addFeature(feature); } + public destroy() { + this.data = this.getDefaultData(); + } private getDefaultData(): FeatureCollection { return { type: 'FeatureCollection', diff --git a/packages/draw/src/util/create_geometry.ts b/packages/draw/src/util/create_geometry.ts index 2fc89b03e2..20bedc50b6 100644 --- a/packages/draw/src/util/create_geometry.ts +++ b/packages/draw/src/util/create_geometry.ts @@ -3,6 +3,7 @@ import turfDistance from '@turf/distance'; import { Feature, featureCollection, + FeatureCollection, lineString, point, polygon, @@ -116,7 +117,9 @@ export function createLine( } } -export function createPoint(points: Array<{ lng: number; lat: number }>) { +export function createPoint( + points: Array<{ lng: number; lat: number }>, +): FeatureCollection { const features = points.map((p, index) => point([p.lng, p.lat], { active: true, diff --git a/packages/l7/__tests__/version.spec.ts b/packages/l7/__tests__/version.spec.ts new file mode 100644 index 0000000000..702249525c --- /dev/null +++ b/packages/l7/__tests__/version.spec.ts @@ -0,0 +1,7 @@ +import { version } from '../src/version'; +describe('version', () => { + it('should match the `version` field of package.json', () => { + const expected = require('../package.json').version; + expect(version).toBe(expected); + }); +}); diff --git a/packages/l7/package.json b/packages/l7/package.json index 387217475e..51e7b078f4 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -28,6 +28,7 @@ "@antv/l7-core": "^2.1.11", "@antv/l7-layers": "^2.1.11", "@antv/l7-maps": "^2.1.11", + "@antv/l7-utils": "^2.1.11", "@antv/l7-scene": "^2.1.11", "@babel/runtime": "^7.7.7" }, diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts index 327905be15..242d1c912c 100644 --- a/packages/l7/src/index.ts +++ b/packages/l7/src/index.ts @@ -3,4 +3,5 @@ export * from '@antv/l7-scene'; export * from '@antv/l7-maps'; export * from '@antv/l7-layers'; export * from '@antv/l7-component'; -export const version = '2.1.11'; +export * from '@antv/l7-utils'; +export * from './version'; diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts new file mode 100644 index 0000000000..3339b9457f --- /dev/null +++ b/packages/l7/src/version.ts @@ -0,0 +1,2 @@ +const version = '2.1.11'; +export { version }; diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 317c74733f..de989581db 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -93,9 +93,8 @@ export default class HeatMapModel extends BaseModel { }); // 初始化颜色纹理 - this.colorTexture = createTexture2D({ - data: imageData.data, + data: new Uint8Array(imageData.data), width: imageData.width, height: imageData.height, wrapS: gl.CLAMP_TO_EDGE, @@ -261,14 +260,17 @@ export default class HeatMapModel extends BaseModel { } = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const invert = mat4.invert( mat4.create(), - // @ts-ignore - mat4.fromValues(...this.cameraService.getViewProjectionMatrix()), + mat4.fromValues( + // @ts-ignore + ...this.cameraService.getViewProjectionMatrixUncentered(), + ), ) as mat4; this.colorModel.draw({ uniforms: { u_opacity: opacity || 1.0, u_colorTexture: this.colorTexture, u_texture: this.heatmapFramerBuffer, + u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(), u_InverseViewProjectionMatrix: [...invert], }, }); diff --git a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl b/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl index d88a2411c1..694c4aed7d 100644 --- a/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl +++ b/packages/layers/src/heatmap/shaders/heatmap_3d_vert.glsl @@ -5,6 +5,7 @@ uniform sampler2D u_texture; varying vec2 v_texCoord; uniform mat4 u_ModelMatrix; uniform mat4 u_InverseViewProjectionMatrix; +uniform mat4 u_ViewProjectionMatrixUncentered; varying float v_intensity; vec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) { @@ -26,8 +27,8 @@ void main() { vec4 p1 = vec4(pos, 0.0, 1.0); vec4 p2 = vec4(pos, 1.0, 1.0); - vec4 inverseP1 = unproject_clipspace_to_position(p1, u_InverseViewProjectionMatrix); - vec4 inverseP2 = unproject_clipspace_to_position(p2, u_InverseViewProjectionMatrix) ; + vec4 inverseP1 = u_InverseViewProjectionMatrix * p1; + vec4 inverseP2 = u_InverseViewProjectionMatrix * p2; inverseP1 = inverseP1 / inverseP1.w; inverseP2 = inverseP2 / inverseP2.w; @@ -40,6 +41,6 @@ void main() { v_intensity = texture2D(u_texture, v_texCoord).r; fh = toBezier(v_intensity, b).y; - gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * project_pixel(50.), 1.0)); + gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0); } diff --git a/packages/layers/src/utils/polylineNormal.ts b/packages/layers/src/utils/polylineNormal.ts index 4dc889bbf1..7494d22a1d 100644 --- a/packages/layers/src/utils/polylineNormal.ts +++ b/packages/layers/src/utils/polylineNormal.ts @@ -1,4 +1,4 @@ -import { aProjectFlat, lngLatToMeters, Point } from '@antv/l7-utils'; +import { aProjectFlat, lngLatToMeters } from '@antv/l7-utils'; import { vec2 } from 'gl-matrix'; export function computeMiter( tangent: vec2, diff --git a/packages/maps/src/amap/Viewport.ts b/packages/maps/src/amap/Viewport.ts index 4a68f96c6d..17bf0b0535 100644 --- a/packages/maps/src/amap/Viewport.ts +++ b/packages/maps/src/amap/Viewport.ts @@ -7,6 +7,7 @@ export default class Viewport implements IViewport { private projectionMatrix: mat4 = mat4.create(); private viewMatrix: mat4 = mat4.create(); private viewProjectionMatrix: mat4 = mat4.create(); + private ViewProjectionMatrixUncentered: mat4 = mat4.create(); private viewUncenteredMatrix: mat4 = mat4.create(); private zoom: number; private center: number[]; @@ -60,6 +61,11 @@ export default class Viewport implements IViewport { this.projectionMatrix, this.viewMatrix, ); + mat4.multiply( + this.ViewProjectionMatrixUncentered, + this.projectionMatrix, + this.viewMatrix, + ); } public getZoom(): number { @@ -95,6 +101,11 @@ export default class Viewport implements IViewport { return this.viewProjectionMatrix; } + public getViewProjectionMatrixUncentered(): number[] { + // @ts-ignore + return this.ViewProjectionMatrixUncentered; + } + public getFocalDistance() { return 1; } diff --git a/packages/maps/src/amap/logo.css b/packages/maps/src/amap/logo.css new file mode 100644 index 0000000000..5dbe1028c9 --- /dev/null +++ b/packages/maps/src/amap/logo.css @@ -0,0 +1,3 @@ +.amap-logo{ + display: none !important; +} diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index caf655bcf6..7b0a84ffce 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -20,6 +20,7 @@ import { import { DOM } from '@antv/l7-utils'; import { inject, injectable } from 'inversify'; import { IAMapEvent, IAMapInstance } from '../../typings/index'; +import './logo.css'; import { MapTheme } from './theme'; import Viewport from './Viewport'; let mapdivCount = 0; @@ -109,7 +110,9 @@ export default class AMapService } public getMapCanvasContainer(): HTMLElement { - return this.map.getContainer() as HTMLElement; + return this.map + .getContainer() + ?.getElementsByClassName('amap-maps')[0] as HTMLElement; } public getSize(): [number, number] { @@ -256,7 +259,6 @@ export default class AMapService if (mapInstance) { this.map = mapInstance as AMap.Map & IAMapInstance; this.$mapContainer = this.map.getContainer(); - this.removeLogoControl(); setTimeout(() => { this.map.on('camerachange', this.handleCameraChanged); resolve(); @@ -272,10 +274,6 @@ export default class AMapService viewMode: '3D', ...rest, }); - map.on('complete', () => { - this.removeLogoControl(); - }); - // 监听地图相机事件 map.on('camerachange', this.handleCameraChanged); // @ts-ignore @@ -423,12 +421,4 @@ export default class AMapService document.head.appendChild(script); }); } - - private removeLogoControl(): void { - // @ts-ignore - const logo = document.getElementsByClassName('amap-logo'); - if (logo && logo[0]) { - logo[0].setAttribute('style', 'display: none !important'); - } - } } diff --git a/packages/maps/src/mapbox/Viewport.ts b/packages/maps/src/mapbox/Viewport.ts index a1e0a606b6..92796ce173 100644 --- a/packages/maps/src/mapbox/Viewport.ts +++ b/packages/maps/src/mapbox/Viewport.ts @@ -58,6 +58,10 @@ export default class Viewport implements IViewport { return this.viewport.viewProjectionMatrix; } + public getViewProjectionMatrixUncentered(): number[] { + // @ts-ignore + return this.viewport.viewProjectionMatrix; + } public getFocalDistance() { return 1; } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 5936929499..e99a6cd3ea 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -308,7 +308,7 @@ class Scene this.mapService.setMapStyle(style); } - public setMapStatus(options: IStatusOptions) { + public setMapStatus(options: Partial) { this.mapService.setMapStatus(options); } diff --git a/packages/utils/src/geo.ts b/packages/utils/src/geo.ts index be21ce19e5..2e0a4afae1 100644 --- a/packages/utils/src/geo.ts +++ b/packages/utils/src/geo.ts @@ -8,16 +8,16 @@ import { } from '@turf/helpers'; export type IBounds = [[number, number], [number, number]]; -export interface ILngLat { +interface ILngLat { lng: number; lat: number; } -export interface IPoint { +interface IPoint { x: number; y: number; } const originShift = (2 * Math.PI * 6378137) / 2.0; -export type Point = number[]; +type Point = number[]; /** * 计算地理数据范围 * @param {dataArray} data 地理坐标数据 diff --git a/stories/Draw/Components/AmapDraw.tsx b/stories/Draw/Components/AmapDraw.tsx new file mode 100644 index 0000000000..e1ef95554c --- /dev/null +++ b/stories/Draw/Components/AmapDraw.tsx @@ -0,0 +1,59 @@ +import { Scene } from '@antv/l7'; +import { DrawControl } from '@antv/l7-draw'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; + +import * as React from 'react'; +export default class AMapDraw extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 0, + style: 'dark', // hosted style id + center: [112.874, 32.76], // starting position + zoom: 12, // starting zoom + }), + }); + this.scene = scene; + + scene.on('loaded', () => { + const drawControl = new DrawControl(scene, { + position: 'topright', + layout: 'horizontal', // horizontal vertical + controls: { + point: true, + polygon: true, + line: true, + circle: true, + rect: true, + delete: true, + }, + }); + scene.on('click', () => { + console.log('click'); + }); + scene.addControl(drawControl); + }); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/Draw/Components/Circle.tsx b/stories/Draw/Components/Circle.tsx index 677468fa9b..ebe983aae3 100644 --- a/stories/Draw/Components/Circle.tsx +++ b/stories/Draw/Components/Circle.tsx @@ -25,6 +25,12 @@ export default class Circle extends React.Component { scene.on('loaded', () => { const drawCircle = new DrawCircle(scene); drawCircle.enable(); + drawCircle.on('draw.create', (e: any) => { + console.log(e); + }); + drawCircle.on('draw.update', (e: any) => { + console.log(e); + }); }); } diff --git a/stories/Draw/Components/DrawRect.tsx b/stories/Draw/Components/DrawRect.tsx index 64076c72b5..c375c8a58d 100644 --- a/stories/Draw/Components/DrawRect.tsx +++ b/stories/Draw/Components/DrawRect.tsx @@ -23,7 +23,10 @@ export default class Circle extends React.Component { this.scene = scene; scene.on('loaded', () => { - const drawRect = new DrawRect(scene); + const drawRect = new DrawRect(scene, { + editEnable: false, + selectEnable: false, + }); drawRect.enable(); }); } diff --git a/stories/Draw/Draw.stories.tsx b/stories/Draw/Draw.stories.tsx index e8740eba05..15209db892 100644 --- a/stories/Draw/Draw.stories.tsx +++ b/stories/Draw/Draw.stories.tsx @@ -1,5 +1,6 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; +import AMapDraw from './Components/AmapDraw'; import Circle from './Components/Circle'; import DrawCircle from './Components/DrawCircle'; import DrawControl from './Components/DrawControl'; @@ -17,4 +18,5 @@ storiesOf('绘制', module) .add('路径', () => , {}) .add('绘制组件', () => , {}) .add('绘制圆', () => , {}) + .add('高德地图', () => , {}) .add('绘制面', () => , {}); diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 8b6f30a465..2a73151354 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -9,6 +9,7 @@ import DashLineDemo from './components/dash'; import DataUpdate from './components/data_update'; import HeatMapDemo from './components/HeatMap'; import HeatMapDemo3D from './components/heatmap3d'; +import HeatMap3D_2 from './components/heatmap2'; import HexagonLayerDemo from './components/hexagon'; import LightDemo from './components/light'; import LineLayer from './components/Line'; @@ -42,6 +43,7 @@ storiesOf('图层', module) .add('2D弧线', () => ) .add('热力图', () => ) .add('热力图3D', () => ) + .add('热力图2', () => ) .add('网格热力图', () => ) .add('栅格', () => ) .add('图片', () => ) diff --git a/stories/Layers/components/HeatMap.tsx b/stories/Layers/components/HeatMap.tsx index ea9c0c59ae..ae1ebba4c4 100644 --- a/stories/Layers/components/HeatMap.tsx +++ b/stories/Layers/components/HeatMap.tsx @@ -1,5 +1,5 @@ import { HeatmapLayer, Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; // @ts-ignore import * as React from 'react'; @@ -21,7 +21,7 @@ export default class HeatMapLayerDemo extends React.Component { center: [121.268, 30.3628], pitch: 0, style: 'dark', - zoom: 2, + zoom: 12, }), }); const data = await response.json(); @@ -48,8 +48,8 @@ export default class HeatMapLayerDemo extends React.Component { }, }); scene.addLayer(layer); - scene.on('loaded', () => { - console.log('scene loaded'); + scene.on('zoom', () => { + console.log(scene.getZoom()); }); this.scene = scene; } diff --git a/stories/Layers/components/heatmap2.tsx b/stories/Layers/components/heatmap2.tsx new file mode 100644 index 0000000000..03a92b9e45 --- /dev/null +++ b/stories/Layers/components/heatmap2.tsx @@ -0,0 +1,78 @@ +import { HeatmapLayer, Scene } from '@antv/l7'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +// @ts-ignore +import * as React from 'react'; + +export default class HeatMapLayerDemo extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + style: 'dark', + pitch: 8.5, + center: [116.49434030056, 39.868073421167621], + zoom: 13, + }), + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json', + ) + .then((res) => res.json()) + .then((data) => { + const layer = new HeatmapLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + }) + .size('count', [0, 1]) + .shape('heatmap3D') + // weight映射通道 + .style({ + intensity: 10, + radius: 20, + opacity: 1.0, + rampColors: { + colors: [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ], + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, + }); + scene.addLayer(layer); + }); + }); + + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/React/components/world_ncov_bubble.tsx b/stories/React/components/world_ncov_bubble.tsx index 1d2d881e58..647854dd7e 100644 --- a/stories/React/components/world_ncov_bubble.tsx +++ b/stories/React/components/world_ncov_bubble.tsx @@ -104,6 +104,9 @@ export default React.memo(function Map() { feature: args.feature, }); } + function hidePopup(args: any): void { + setPopupInfo(undefined); + } return ( <> @@ -235,6 +238,7 @@ export default React.memo(function Map() { }} > + , =1.10.0: + version "1.10.5" + resolved "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e" + integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA== + growly@^1.3.0: version "1.3.0" resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -16088,7 +16098,7 @@ less@3.0.2: request "^2.83.0" source-map "^0.5.3" -less@^3.10.3: +less@^3.10.3, less@^3.9.0: version "3.11.1" resolved "https://registry.npmjs.org/less/-/less-3.11.1.tgz#c6bf08e39e02404fe6b307a3dfffafdc55bd36e2" integrity sha512-tlWX341RECuTOvoDIvtFqXsKj072hm3+9ymRBe76/mD6O5ZZecnlAOVDlWAleF2+aohFrxNidXhv2773f6kY7g== @@ -22033,6 +22043,19 @@ rollup-plugin-buble@^0.19.8: buble "^0.19.8" rollup-pluginutils "^2.3.3" +rollup-plugin-less@^1.1.2: + version "1.1.2" + resolved "https://registry.npmjs.org/rollup-plugin-less/-/rollup-plugin-less-1.1.2.tgz#c4bffacc24928b7f657a7a06e09930a3e2ebdfad" + integrity sha512-tRyUEc7dqzrmwDNKWbKyPN9vxmr2l+4G+2BqqLIccfoowuNwa/IfRMrfs892Mr9EjotDO/KDV1KC+AXXNNCYKA== + dependencies: + babel-runtime "^6.26.0" + fs-extra "^0.30.0" + growl ">=1.10.0" + less "^3.9.0" + mkdirp "^0.5.1" + rollup "^0.34.7" + rollup-pluginutils "^1.5.1" + rollup-plugin-node-resolve@^5.2.0: version "5.2.0" resolved "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz#730f93d10ed202473b1fb54a5997a7db8c6d8523" @@ -22083,6 +22106,14 @@ rollup-plugin-typescript@^1.0.1: resolve "^1.10.0" rollup-pluginutils "^2.5.0" +rollup-pluginutils@^1.5.1: + version "1.5.2" + resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408" + integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg= + dependencies: + estree-walker "^0.2.1" + minimatch "^3.0.2" + rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2: version "2.8.2" resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" @@ -22099,6 +22130,13 @@ rollup@^0.25.8: minimist "^1.2.0" source-map-support "^0.3.2" +rollup@^0.34.7: + version "0.34.13" + resolved "https://registry.npmjs.org/rollup/-/rollup-0.34.13.tgz#a211cdde31f96cb39e7cb4e35becb15ddc3efa19" + integrity sha1-ohHN3jH5bLOefLTjW+yxXdw++hk= + dependencies: + source-map-support "^0.4.0" + rollup@^1.27.14: version "1.32.1" resolved "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4" @@ -22108,6 +22146,13 @@ rollup@^1.27.14: "@types/node" "*" acorn "^7.1.0" +rollup@^2.3.3: + version "2.3.3" + resolved "https://registry.npmjs.org/rollup/-/rollup-2.3.3.tgz#5982df700d7aae8907075ba68122bb57d98e9cd0" + integrity sha512-uJ9VNWk80mb4wDCSfd1AyHoSc9TrWbkZtnO6wbsMTp9muSWkT26Dvc99MX1yGCOTvUN1Skw/KpFzKdUDuZKTXA== + optionalDependencies: + fsevents "~2.1.2" + rst-selector-parser@^2.2.3: version "2.2.3" resolved "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91" @@ -23013,6 +23058,13 @@ source-map-support@^0.3.2: dependencies: source-map "0.1.32" +source-map-support@^0.4.0: + version "0.4.18" + resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f" + integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA== + dependencies: + source-map "^0.5.6" + source-map-support@^0.5.3, source-map-support@^0.5.6, source-map-support@~0.5.12: version "0.5.16" resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"