fix: 绘制组件高德地图mousedown事件不能监听的问题

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

packages/draw/src/draw_control.ts

@@ -2,7 +2,7 @@
  * @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-07 15:17:21
  */
 import { Control, IControlOption, PositionType, Scene } from '@antv/l7';
 import { DOM } from '@antv/l7-utils';
@@ -104,7 +104,7 @@ export class DrawControl extends Control {
   }
 
   private onButtonClick = (type: string, e: MouseEvent) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     for (const draw in this.draw) {
       if (draw === type) {
         this.draw[draw].enable();
@@ -115,7 +115,7 @@ export class DrawControl extends Control {
   };
 
   private onDeleteMode = (type: string, e: MouseEvent) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     if (!this.currentDraw) {
       return;
     }

packages/draw/src/modes/draw_mode.ts

@@ -49,7 +49,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 +70,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) {

packages/draw/src/modes/draw_point.ts

@@ -44,7 +44,7 @@ export default class DrawPoint extends DrawFeature {
   };
 
   protected onClick = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.lngLat || e.lnglat;
     const feature = this.createFeature(lngLat);
     this.drawRender.update(featureCollection([feature]));
     this.drawVertexLayer.update(featureCollection([feature]));

packages/draw/src/modes/draw_polygon.ts

@@ -110,7 +110,7 @@ export default class DrawPolygon extends DrawFeature {
   };
 
   protected onClick = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.lngLat || e.lnglat;
     this.endPoint = lngLat;
     this.points.push(lngLat);
     const feature = this.createFeature(this.points);
@@ -123,7 +123,7 @@ export default class DrawPolygon extends DrawFeature {
   };
 
   protected onMouseMove = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.lngLat || e.lnglat;
     if (this.points.length === 0) {
       return;
     }
@@ -134,7 +134,7 @@ export default class DrawPolygon extends DrawFeature {
   };
 
   protected onDblClick = (e: any) => {
-    const lngLat = e.lngLat;
+    const lngLat = e.lngLat || e.lnglat;
     if (this.points.length < 2) {
       return;
     }

packages/draw/src/modes/draw_selected.ts

@@ -36,8 +36,7 @@ export default class DrawSelect extends DrawFeature {
   }
 
   protected onDragStart = (e: IInteractionTarget) => {
-    // @ts-ignore
+    this.scene.setMapStatus({ dragEnable: false });
-    this.scene.map.dragPan.disable();
     this.dragStartPoint = e.lngLat;
   };
   protected getDefaultOptions() {

packages/draw/src/render/draw.ts

@@ -24,7 +24,7 @@ export default class DrawLayer extends BaseRender {
     layer.on('mouseenter', this.onMouseMove);
     layer.on('mouseout', this.onUnMouseMove);
     layer.on('click', this.onClick);
-    layer.on('unmousedown', this.onUnClick);
+    layer.on('unmouseup', this.onUnClick);
     this.isEnableDrag = true;
   }
   public disableDrag() {
@@ -35,7 +35,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('unmouseup', this.onUnClick);
     this.isEnableDrag = false;
   }
 

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

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)

packages/maps/src/amap/map.ts

@@ -109,7 +109,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] {

packages/scene/src/index.ts

@@ -308,7 +308,7 @@ class Scene
     this.mapService.setMapStyle(style);
   }
 
-  public setMapStatus(options: IStatusOptions) {
+  public setMapStatus(options: Partial<IStatusOptions>) {
     this.mapService.setMapStatus(options);
   }
 

stories/Draw/Components/AmapDraw.tsx

@@ -0,0 +1,57 @@
+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', () => {});
+      scene.addControl(drawControl);
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

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('路径', () => <Line />, {})
   .add('绘制组件', () => <DrawControl />, {})
   .add('绘制圆', () => <DrawCircle />, {})
+  .add('高德地图', () => <AMapDraw />, {})
   .add('绘制面', () => <DrawPolygon />, {});