缩放情况下，pc端除了grid以外修改好了。从鼠标的当前位置开始缩放

src/graphic/Coordinate.js

@@ -84,8 +84,16 @@ export default class Coordinate {
     this.setCenter(canvas);
   }
 
-  updateZoom(zoom) {
+  updateZoom(screenPosition, zoom) {
+    let position = this.getXYFromScreen(screenPosition);
     this.zoom = zoom;
+    this.center.x =
+      position.x -
+      ((screenPosition.x - this.width / 2) * defaultZoom) / this.zoom;
+
+    this.center.y =
+      position.y -
+      ((this.height / 2 - screenPosition.y) * defaultZoom) / this.zoom;
   }
 
   moveTo(zoom, screenPosition) {

src/graphic/Layer.js

@@ -221,10 +221,10 @@ export default class Layer {
         //   (mathUtil.getDistance(point1, point2) /
         //     mathUtil.getDistance(this.StorePage1, this.StorePage2)) *
         //   coordinate.zoom;
-        let zoom =
-          coordinate.zoom +
-          mathUtil.getDistance(point1, point2) -
-          mathUtil.getDistance(this.StorePage1, this.StorePage2);
+        let dis1 = mathUtil.getDistance(point1, point2) / 100;
+        let dis2 = mathUtil.getDistance(this.StorePage1, this.StorePage2) / 100;
+        let zoom = coordinate.zoom + dis1 - dis2;
+        console.log("缩放距离：" + dis1 + "," + dis2);
         this.zoomVector(zoom);
         return;
       }
@@ -272,15 +272,10 @@ export default class Layer {
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
-        coordinate.center.x =
-          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
-        coordinate.center.y =
-          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
+        coordinate.center.x = coordinate.center.x - dx;
+        coordinate.center.y = coordinate.center.y + dy;
 
-        dataService.setGridForPan(
-          (dx * coordinate.defaultZoom) / coordinate.zoom,
-          (dy * coordinate.defaultZoom) / coordinate.zoom
-        );
+        dataService.setGridForPan(dx, dy);
         needAutoRedraw = true;
         break;
       case LayerEvents.AddRoad:
@@ -851,16 +846,23 @@ export default class Layer {
         ? (e.wheelDelta / 120) * 20
         : (-(e.detail || 0) / 3) * 20;
       const zoom = coordinate.zoom + delta;
-      this.zoomVector(zoom);
+      let X = e.offsetX || e.layerX;
+      let Y = e.offsetY || e.layerY;
+      this.zoomVector(
+        {
+          x: X,
+          y: Y,
+        },
+        zoom
+      );
     }
   }
 
-  zoomVector(zoom) {
+  zoomVector(position, zoom) {
     if (zoom < minZoom || zoom > maxZoom) {
       return;
     }
-
-    coordinate.updateZoom(zoom);
+    coordinate.updateZoom(position, zoom);
     dataService.setGridForZoom(
       coordinate.width,
       coordinate.height,

src/graphic/Service/DataService.js

@@ -68,8 +68,8 @@ export class DataService {
   }
 
   setGridForPan(dx, dy) {
-    this.grid.startX += dx;
-    this.grid.startY += dy;
+    this.grid.startX += dx * coordinate.ratio;
+    this.grid.startY += dy * coordinate.ratio;
     this.grid.step1 =
       (this.grid.defalutstep1 * coordinate.zoom) / coordinate.defaultZoom;
     this.grid.step2 =
@@ -83,9 +83,8 @@ export class DataService {
   }
 
   setGridForZoom(w, h, zoom) {
-    console.log("setGridForZoom:" + zoom);
     this.grid.startX = w / 2 - (zoom * w) / 2;
-    this.grid.startY = w / 2 - (zoom * h) / 2;
+    this.grid.startY = h / 2 - (zoom * h) / 2;
     this.grid.step1 = this.grid.defalutstep1 * zoom;
     this.grid.step2 = this.grid.defalutstep2 * zoom;
     while (this.grid.startX > 0) {