diff --git a/build/bundle.ts b/build/bundle.ts
index c63cf8c7f1..b9ee3d8191 100644
--- a/build/bundle.ts
+++ b/build/bundle.ts
@@ -1,2 +1,10 @@
// @ts-ignore
export * from '@antv/l7';
+// import * as L7 from '@antv/l7';
+// export default L7;
+
+// import { Scene } from '@antv/l7';
+// // export { Scene };
+// export default {
+// Scene,
+// };
diff --git a/packages/core/src/services/interaction/IInteractionService.ts b/packages/core/src/services/interaction/IInteractionService.ts
index 396021e854..98173b740c 100644
--- a/packages/core/src/services/interaction/IInteractionService.ts
+++ b/packages/core/src/services/interaction/IInteractionService.ts
@@ -4,6 +4,7 @@ export enum InteractionEvent {
Click = 'click',
Select = 'select',
Active = 'active',
+ Drag = 'drag',
}
export interface IInteractionTarget {
x: number;
diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts
index 897971229d..3416ce94db 100644
--- a/packages/core/src/services/interaction/InteractionService.ts
+++ b/packages/core/src/services/interaction/InteractionService.ts
@@ -5,6 +5,12 @@ import { TYPES } from '../../types';
import { ILogService } from '../log/ILogService';
import { ILngLat, IMapService } from '../map/IMapService';
import { IInteractionService, InteractionEvent } from './IInteractionService';
+const DragEventMap: { [key: string]: string } = {
+ panstart: 'dragstart',
+ panmove: 'dragging',
+ panend: 'dragend',
+ pancancel: 'dragcancle',
+};
/**
* 由于目前 L7 与地图结合的方案为双 canvas 而非共享 WebGL Context,事件监听注册在地图底图上。
* 除此之外,后续如果支持非地图场景,事件监听就需要注册在 L7 canvas 上。
@@ -61,7 +67,7 @@ export default class InteractionService extends EventEmitter
// hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
// hammertime.get('pinch').set({ enable: true });
hammertime.on('dblclick click', this.onHammer);
- // hammertime.on('panstart panmove panend', this.onHammer);
+ hammertime.on('panstart panmove panend pancancel', this.onDrag);
// hammertime.on('press pressup', this.onHammer);
// $containter.addEventListener('touchstart', this.onTouch);
$containter.addEventListener('mousemove', this.onHover);
@@ -81,6 +87,7 @@ export default class InteractionService extends EventEmitter
if ($containter) {
$containter.removeEventListener('mousemove', this.onHover);
this.hammertime.off('dblclick click', this.onHammer);
+ this.hammertime.off('panstart panmove panend pancancel', this.onDrag);
// $containter.removeEventListener('touchstart', this.onTouch);
// $containter.removeEventListener('click', this.onHover);
$containter.removeEventListener('mousedown', this.onHover);
@@ -89,16 +96,26 @@ export default class InteractionService extends EventEmitter
$containter.removeEventListener('contextmenu', this.onHover);
}
}
+ private onDrag = (target: HammerInput) => {
+ const interactionTarget = this.interactionEvent(target);
+ interactionTarget.type = DragEventMap[interactionTarget.type];
+ this.emit(InteractionEvent.Drag, interactionTarget);
+ };
private onHammer = (target: HammerInput) => {
+ const interactionTarget = this.interactionEvent(target);
+ this.emit(InteractionEvent.Hover, interactionTarget);
+ };
+
+ private interactionEvent(target: HammerInput) {
const { type, pointerType } = target;
let clientX;
let clientY;
if (pointerType === 'touch') {
- clientY = target.pointers[0].clientY;
- clientX = target.pointers[0].clientX;
+ clientY = Math.floor(target.pointers[0].clientY);
+ clientX = Math.floor(target.pointers[0].clientX);
} else {
- clientY = (target.srcEvent as MouseEvent).y;
- clientX = (target.srcEvent as MouseEvent).x;
+ clientY = Math.floor((target.srcEvent as MouseEvent).y);
+ clientX = Math.floor((target.srcEvent as MouseEvent).x);
}
const $containter = this.mapService.getMapContainer();
@@ -108,21 +125,8 @@ export default class InteractionService extends EventEmitter
clientY -= top;
}
const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
- this.emit(InteractionEvent.Hover, { x: clientX, y: clientY, lngLat, type });
- };
- private onTouch = (target: TouchEvent) => {
- if (target.targetTouches.length > 1) {
- return;
- }
- const touch = target.targetTouches[0];
- // @ts-ignore
- this.onHover({
- x: touch.clientX,
- y: touch.clientY,
- type: 'touch',
- });
- };
-
+ return { x: clientX, y: clientY, lngLat, type };
+ }
private onHover = ({ x, y, type }: MouseEvent) => {
const $containter = this.mapService.getMapContainer();
if ($containter) {
diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts
index c3f44056c3..795dc3d841 100644
--- a/packages/core/src/services/interaction/PickingService.ts
+++ b/packages/core/src/services/interaction/PickingService.ts
@@ -110,7 +110,7 @@ export default class PickingService implements IPickingService {
const { enableHighlight, enableSelect } = layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;
- const yInDevicePixel = y * window.devicePixelRatio;
+ const yInDevicePixel = (height - (y + 1)) * window.devicePixelRatio;
if (
xInDevicePixel > width ||
xInDevicePixel < 0 ||
@@ -123,7 +123,7 @@ export default class PickingService implements IPickingService {
pickedColors = readPixels({
x: Math.floor(xInDevicePixel / PICKSCALE),
// 视口坐标系原点在左上,而 WebGL 在左下,需要翻转 Y 轴
- y: Math.floor((height - (y + 1) * window.devicePixelRatio) / PICKSCALE),
+ y: Math.floor(yInDevicePixel / PICKSCALE),
width: 1,
height: 1,
data: new Uint8Array(1 * 1 * 4),
diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts
index 35d1bb4097..e5397232f9 100644
--- a/packages/core/src/services/scene/ISceneService.ts
+++ b/packages/core/src/services/scene/ISceneService.ts
@@ -22,4 +22,8 @@ export const SceneEventList: string[] = [
'maploaded',
'resize',
'destroy',
+ 'dragstart',
+ 'dragging',
+ 'dragend',
+ 'dragcancel',
];
diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts
index d78c9d72e4..77601a6271 100644
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@@ -14,7 +14,11 @@ import { IMarkerService } from '../component/IMarkerService';
import { IPopupService } from '../component/IPopupService';
import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService';
import { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService';
-import { IInteractionService } from '../interaction/IInteractionService';
+import {
+ IInteractionService,
+ IInteractionTarget,
+ InteractionEvent,
+} from '../interaction/IInteractionService';
import { IPickingService } from '../interaction/IPickingService';
import { ILayer, ILayerService } from '../layer/ILayerService';
import { ILogService } from '../log/ILogService';
@@ -24,7 +28,7 @@ import { IShaderModuleService } from '../shader/IShaderModuleService';
import { ISceneService } from './ISceneService';
/**
- * will emit `loaded` `resize` `destroy` event
+ * will emit `loaded` `resize` `destroy` event panstart panmove panend
*/
@injectable()
export default class Scene extends EventEmitter implements ISceneService {
@@ -157,6 +161,10 @@ export default class Scene extends EventEmitter implements ISceneService {
this.popupService.initPopup();
// 地图初始化之后 才能初始化 container 上的交互
this.interactionService.init();
+ this.interactionService.on(
+ InteractionEvent.Drag,
+ this.addSceneEvent.bind(this),
+ );
this.logger.debug(`map ${this.id} loaded`);
});
@@ -311,4 +319,8 @@ export default class Scene extends EventEmitter implements ISceneService {
this.cameraService.update(viewport);
this.render();
};
+
+ private addSceneEvent(target: IInteractionTarget) {
+ this.emit(target.type, target);
+ }
}
diff --git a/packages/draw/README.md b/packages/draw/README.md
index 994ebcb15f..ea24ac57c5 100644
--- a/packages/draw/README.md
+++ b/packages/draw/README.md
@@ -1,11 +1,9 @@
# `draw`
-> TODO: description
## Usage
```
const draw = require('draw');
-// TODO: DEMONSTRATE API
```
diff --git a/packages/draw/rollup.config.js b/packages/draw/rollup.config.js
new file mode 100644
index 0000000000..1bedfcb696
--- /dev/null
+++ b/packages/draw/rollup.config.js
@@ -0,0 +1,33 @@
+import pkg from './package.json';
+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';
+
+export default {
+ input: './src/index.ts',
+ plugins: [
+ typescript({
+ exclude: 'node_modules/**',
+ typescript: require('typescript')
+ }),
+ resolve(),
+ commonjs(),
+ buble({
+ transforms: { generator: false }
+ })
+ ],
+ output: [
+ {
+ format: 'cjs',
+ file: pkg.main,
+ sourcemap: true
+ },
+ {
+ format: 'es',
+ file: pkg.module,
+ sourcemap: true
+ }
+ ]
+};
+
diff --git a/packages/draw/src/index.ts b/packages/draw/src/index.ts
new file mode 100644
index 0000000000..eab6ddf26c
--- /dev/null
+++ b/packages/draw/src/index.ts
@@ -0,0 +1 @@
+export { default as DrawSource } from './source';
diff --git a/packages/draw/src/modes/draw_feature.ts b/packages/draw/src/modes/draw_feature.ts
new file mode 100644
index 0000000000..0d7400c1c6
--- /dev/null
+++ b/packages/draw/src/modes/draw_feature.ts
@@ -0,0 +1,30 @@
+import { Feature, FeatureCollection } from '@turf/helpers';
+import DrawSource from '../source';
+
+export interface IDrawOption {
+ data: FeatureCollection;
+}
+
+export default abstract class DrawFeature {
+ private source: DrawSource;
+ constructor(options: IDrawOption) {
+ const { data } = options;
+ this.source = new DrawSource(data);
+ }
+
+ protected onDragStart() {
+ throw new Error('not imp');
+ }
+
+ protected onDragging() {
+ throw new Error('not imp');
+ }
+
+ protected onDragEnd() {
+ throw new Error('not imp');
+ }
+
+ protected onClick() {
+ throw new Error('not imp');
+ }
+}
diff --git a/packages/draw/src/source.ts b/packages/draw/src/source.ts
new file mode 100644
index 0000000000..2a4ea89495
--- /dev/null
+++ b/packages/draw/src/source.ts
@@ -0,0 +1,41 @@
+import { Feature, FeatureCollection } from '@turf/helpers';
+export default class DrawSource {
+ private data: FeatureCollection;
+ constructor(data?: FeatureCollection) {
+ this.data = data || this.getDefaultData();
+ }
+
+ public addFeature(feature: any) {
+ this.data.features.push(feature);
+ }
+
+ public getFeature(id: string): Feature | undefined {
+ const result = this.data.features.find((fe: Feature) => {
+ return fe?.properties?.id === id;
+ });
+
+ return result;
+ }
+ public removeFeature(feature: Feature) {
+ const index = this.getFeatureIndex(feature);
+ if (index !== undefined) {
+ this.data.features.splice(index, 1);
+ }
+ }
+ public updateFeature(feature: Feature) {
+ this.removeFeature(feature);
+ this.addFeature(feature);
+ }
+ private getDefaultData(): FeatureCollection {
+ return {
+ type: 'FeatureCollection',
+ features: [],
+ };
+ }
+
+ private getFeatureIndex(feature: Feature): number | undefined {
+ return this.data.features.findIndex((fe) => {
+ return fe?.properties?.id === feature?.properties?.id;
+ });
+ }
+}
diff --git a/packages/draw/src/util/constant.ts b/packages/draw/src/util/constant.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/draw/src/util/theme.ts b/packages/draw/src/util/theme.ts
new file mode 100644
index 0000000000..2bbd9f2990
--- /dev/null
+++ b/packages/draw/src/util/theme.ts
@@ -0,0 +1,71 @@
+const FillStyle = {
+ // 正常显示样式
+ normal_fill: {
+ type: 'PolygonLayer',
+ shape: 'fill',
+ color: '#3bb2d0',
+ style: {
+ opacity: 0.1,
+ },
+ },
+ // xai'm'z
+ active_fill: {
+ type: 'PolygonLayer',
+ shape: 'fill',
+ color: '#fbb03b',
+ style: {
+ opacity: 0.1,
+ },
+ },
+};
+const PointStyle = {
+ normal_point: {
+ type: 'PointLayer',
+ shape: 'circle',
+ color: '#3bb2d0',
+ size: 3,
+ style: {
+ stroke: '#fff',
+ strokeWidth: 2,
+ },
+ },
+ mid_point: {
+ type: 'PointLayer',
+ shape: 'circle',
+ color: '#fbb03b',
+ size: 3,
+ style: {},
+ },
+ active_point: {
+ type: 'PointLayer',
+ shape: 'circle',
+ color: '#fbb03b',
+ size: 5,
+ style: {
+ stroke: '#fff',
+ strokeWidth: 2,
+ },
+ },
+};
+const LineStyle = {
+ normal_line: {
+ type: 'LineLayer',
+ shape: 'line',
+ size: 1,
+ color: '#3bb2d0',
+ style: {
+ opacity: 1,
+ },
+ },
+ active_line: {
+ type: 'LineLayer',
+ shape: 'line',
+ color: '#fbb03b',
+ size: 1,
+ style: {
+ opacity: 1,
+ lineType: 'dash',
+ dashArray: [2, 2],
+ },
+ },
+};
diff --git a/packages/l7/demo/polygon.html b/packages/l7/demo/polygon.html
index bcc6bf0e65..2cd1559adb 100644
--- a/packages/l7/demo/polygon.html
+++ b/packages/l7/demo/polygon.html
@@ -28,7 +28,7 @@
-
+