支持移动端

src/graphic/Layer.js

@@ -90,11 +90,19 @@ export default class Layer {
   };
 
   onMouseDown(e) {
-    this.startX = e.offsetX || e.layerX;
-    this.startY = e.offsetY || e.layerY;
+    if (e instanceof TouchEvent) {
+      this.startX = e.touches[0].pageX;
+      this.startY = e.touches[0].pageY;
 
-    this.lastX = e.offsetX || e.layerX;
-    this.lastY = e.offsetY || e.layerY;
+      this.lastX = e.touches[0].pageX;
+      this.lastY = e.touches[0].pageY;
+    } else {
+      this.startX = e.offsetX || e.layerX;
+      this.startY = e.offsetY || e.layerY;
+
+      this.lastX = e.offsetX || e.layerX;
+      this.lastY = e.offsetY || e.layerY;
+    }
 
     let position = coordinate.getXYFromScreen({
       x: this.startX,
@@ -170,8 +178,42 @@ export default class Layer {
   }
 
   onMouseMove(e) {
-    const X = e.offsetX || e.layerX;
-    const Y = e.offsetY || e.layerY;
+    let X = e.offsetX || e.layerX;
+    let Y = e.offsetY || e.layerY;
+
+    if (e instanceof TouchEvent) {
+      X = e.touches[0].pageX;
+      Y = e.touches[0].pageY;
+      //切换到缩放
+      if (e.touches.length > 1) {
+        //记录开始的两个触摸点的坐标
+        if (this.StorePage1 == null || this.StorePage2 == null) {
+          this.onMouseUp(e);
+          this.StorePage1 = { x: ev.touches[0].pageX, y: ev.touches[0].pageY };
+          this.StorePage2 = { x: ev.touches[1].pageX, y: ev.touches[1].pageY };
+          return;
+        }
+        const point1 = {
+          x: ev.touches[0].pageX,
+          y: ev.touches[0].pageY,
+        };
+        const point2 = {
+          x: ev.touches[1].pageX,
+          y: ev.touches[1].pageY,
+        };
+
+        // let zoom =
+        //   (mathUtil.getDistance(point1, point2) /
+        //     mathUtil.getDistance(this.StorePage1, this.StorePage2)) *
+        //   coordinate.defaultZoom;
+        let zoom =
+          coordinate.defaultZoom +
+          mathUtil.getDistance(this.StorePage1, this.StorePage2) -
+          mathUtil.getDistance(point1, point2);
+        this.zoomVector(zoom);
+        return;
+      }
+    }
 
     let dx = X - this.lastX;
     let dy = Y - this.lastY;
@@ -197,6 +239,8 @@ export default class Layer {
     // 是否需要重绘
     let needAutoRedraw = false;
     let point = null;
+    this.lastX = X;
+    this.lastY = Y;
     const draggingItem = stateService.getDraggingItem();
 
     switch (eventName) {
@@ -220,8 +264,6 @@ export default class Layer {
           (dx * coordinate.defaultZoom) / coordinate.zoom,
           (dy * coordinate.defaultZoom) / coordinate.zoom
         );
-        this.lastX = X;
-        this.lastY = Y;
         needAutoRedraw = true;
         break;
       case LayerEvents.AddRoad:
@@ -359,8 +401,6 @@ export default class Layer {
             (dy * coordinate.defaultZoom) / coordinate.zoom
           );
         }
-        this.lastX = X;
-        this.lastY = Y;
         break;
       case LayerEvents.MoveRoadPoint:
         point = dataService.getRoadPoint(draggingItem.vectorId);
@@ -463,8 +503,6 @@ export default class Layer {
           (dx * coordinate.defaultZoom) / coordinate.zoom,
           (dy * coordinate.defaultZoom) / coordinate.zoom
         );
-        this.lastX = X;
-        this.lastY = Y;
         break;
       case LayerEvents.MoveCurveRoadPoint:
         if (!draggingItem || !draggingItem.vectorId) {
@@ -514,8 +552,6 @@ export default class Layer {
           );
           needAutoRedraw = true;
         }
-        this.lastX = X;
-        this.lastY = Y;
         break;
       case LayerEvents.MovePoint:
         if (draggingItem != null) {
@@ -542,8 +578,6 @@ export default class Layer {
               (dx * coordinate.defaultZoom) / coordinate.zoom,
               (dy * coordinate.defaultZoom) / coordinate.zoom
             );
-            this.lastX = X;
-            this.lastY = Y;
           } else if (
             draggingItem.state == 0 ||
             draggingItem.state == 1 ||
@@ -591,8 +625,13 @@ export default class Layer {
     if (e.button == 2) {
       return;
     }
-    const X = e.offsetX || e.layerX;
-    const Y = e.offsetY || e.layerY;
+    let X = e.offsetX || e.layerX;
+    let Y = e.offsetY || e.layerY;
+
+    if (e instanceof TouchEvent) {
+      X = this.lastX;
+      Y = this.lastY;
+    }
 
     let eventName = stateService.getEventName();
     const draggingItem = stateService.getDraggingItem();
@@ -783,18 +822,22 @@ export default class Layer {
         ? (e.wheelDelta / 120) * 20
         : (-(e.detail || 0) / 3) * 20;
       const zoom = coordinate.zoom + delta;
-      if (zoom < 14) {
-        return;
-      }
+      this.zoomVector(zoom);
+    }
+  }
 
-      coordinate.updateZoom(zoom);
-      dataService.setGridForZoom(
-        coordinate.width,
-        coordinate.height,
-        (coordinate.res * coordinate.zoom) / coordinate.defaultZoom
-      );
-      this.renderer.autoRedraw();
+  zoomVector(zoom) {
+    if (zoom < 14) {
+      return;
     }
+
+    coordinate.updateZoom(zoom);
+    dataService.setGridForZoom(
+      coordinate.width,
+      coordinate.height,
+      (coordinate.res * coordinate.zoom) / coordinate.defaultZoom
+    );
+    this.renderer.autoRedraw();
   }
 
   //测试用