refactor: amap draw 事件问题

This commit is contained in:
thinkinggis 2020-04-07 20:18:43 +08:00
parent 23f3cd824b
commit 3e46dfb33a
20 changed files with 131 additions and 23 deletions

View File

@ -0,0 +1,4 @@
---
title: Draw Component
order: 2
---

View File

@ -0,0 +1,4 @@
---
title: 地图绘制组件
order: 2
---

View File

@ -23,6 +23,6 @@ order: 4
```jsx
import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```
[popup 使用完整demo](../../../examples/react/covid#covid_bubble)

View File

@ -26,3 +26,4 @@ import { Popup } from '@antv/l7-react';
<Popup option={{}} lnglat={[]} />;
```
[popup 使用完整demo](../../../examples/react/covid#covid_bubble)

View File

@ -1,9 +1,12 @@
# `draw`
地图绘制组件,支持点、线、面的绘制编辑,
## 使用
## Usage
l7-draw 需要引用
```
const draw = require('l7-draw');
import { DrawControl } from '@antv/l7-draw';
```
CDN 版本引用

View File

@ -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"
}
}

View File

@ -3,26 +3,43 @@ 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(),
postcss({
plugins: [
url({ url: 'inline' })
]
}),
commonjs({
namedExports: {
eventemitter3: [ 'EventEmitter' ],
lodash: [ 'merge' ]
}
}),
buble({
transforms: { generator: false }
})
}),
terser()
],
output: [
{
format: 'umd',
name: 'L7-Draw',
file: pkg.unpkg,
sourcemap: true
sourcemap: true,
globals: {
'@antv/l7': 'L7'
}
}
]
};

View File

@ -2,10 +2,9 @@
* @Author: lzxue
* @Date: 2020-04-03 19:24:16
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-04-07 15:17:21
* @Last Modified time: 2020-04-07 20:15:45
*/
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,
@ -99,23 +98,23 @@ 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();
} else {
this.draw[draw].disable();
// this.draw[draw].emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
}
}
};
private onDeleteMode = (type: string, e: MouseEvent) => {
// e.stopPropagation();
e.stopPropagation();
if (!this.currentDraw) {
return;
}

View File

@ -47,6 +47,9 @@ export default class DrawCircle extends DrawFeature {
}
protected onDragStart = (e: IInteractionTarget) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
}
this.startPoint = e.lngLat;
this.setCursor('grabbing');
this.initCenterLayer();

View File

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

View File

@ -44,6 +44,9 @@ export default class DrawPoint extends DrawFeature {
};
protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
}
const lngLat = e.lngLat || e.lnglat;
const feature = this.createFeature(lngLat);
this.drawRender.update(featureCollection([feature]));

View File

@ -110,6 +110,9 @@ export default class DrawPolygon extends DrawFeature {
};
protected onClick = (e: any) => {
if (this.drawStatus !== 'Drawing') {
this.drawRender.emit('unmouseup', null);
}
const lngLat = e.lngLat || e.lnglat;
this.endPoint = lngLat;
this.points.push(lngLat);

View File

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

View File

@ -44,7 +44,7 @@ export default class DrawLayer extends BaseRender {
return;
}
const layer = this.drawLayers[0];
layer.on('unclick', this.onUnClick);
layer.on('unmouseup', this.onUnClick);
this.isEnableDrag = true;
}
@ -53,7 +53,7 @@ export default class DrawLayer extends BaseRender {
return;
}
const layer = this.drawLayers[0];
layer.off('unclick', this.onUnClick);
layer.off('unmouseup', this.onUnClick);
this.isEnableDrag = false;
}

View File

@ -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"
},

View File

@ -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 * from '@antv/l7-utils';
export const version = '2.1.11';

View File

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

View File

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

View File

@ -35,7 +35,9 @@ export default class AMapDraw extends React.Component {
delete: true,
},
});
scene.on('click', () => {});
scene.on('click', () => {
console.log('click');
});
scene.addControl(drawControl);
});
}

View File

@ -10886,6 +10886,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
estree-walker@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
estree-walker@^0.6.1:
version "0.6.1"
resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
@ -13412,6 +13417,11 @@ grid-index@^1.1.0:
resolved "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
growl@>=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"