完成补充的需求：背景图片有范围约束，文字与基准线对准（来自3d截图）

src/graphic/Geometry/Img.js

@@ -10,6 +10,7 @@ export default class Img extends Geometry {
     this.display = true;
     this.center = null;
     this.imageData = null;
+    this.bounding = null;
     this.geoType = VectorType.Img;
     this.setId(vectorId);
     this.setSrc(src);
@@ -35,4 +36,26 @@ export default class Img extends Geometry {
       };
     });
   }
+
+  setBounding() {
+    const width = this.imageData.width;
+    const height = this.imageData.height;
+    this.bounding = [];
+    this.bounding[0] = {
+      x: this.center.x - width / 2,
+      y: this.center.y + height / 2,
+    };
+    this.bounding[1] = {
+      x: this.center.x + width / 2,
+      y: this.center.y + height / 2,
+    };
+    this.bounding[2] = {
+      x: this.center.x + width / 2,
+      y: this.center.y - height / 2,
+    };
+    this.bounding[3] = {
+      x: this.center.x - width / 2,
+      y: this.center.y - height / 2,
+    };
+  }
 }

src/graphic/Geometry/Text.js

@@ -11,12 +11,21 @@ export default class Text extends Geometry {
     super();
     this.center = center;
     this.value = "固定点";
+    this.angle = 0;
     this.color = Style.Text.fillStyle;
     this.fontSize = Style.Text.fontSize;
     this.geoType = VectorType.Text;
     this.setId(vectorId);
   }
 
+  getAngle() {
+    return this.angle;
+  }
+
+  setAngle(angle) {
+    this.angle = angle;
+  }
+
   setValue(value) {
     this.value = value;
   }

src/graphic/Layer.js

@@ -38,6 +38,7 @@ import { curveRoadService } from "./Service/CurveRoadService";
 import VectorCategory from "./enum/VectorCategory";
 import Settings from "./Settings";
 import { uiService } from "./Service/UIService";
+import { imageService } from "./Service/ImageService";
 
 const minDragDis = 10;
 const minZoom = 20;
@@ -285,13 +286,21 @@ export default class Layer {
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
-        coordinate.center.x =
+        let center = {};
+        center.x =
           coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
-        coordinate.center.y =
+        center.y =
           coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
-
-        dataService.setGridForPan();
-        needAutoRedraw = true;
+        let tempCenter = {};
+        mathUtil.clonePoint(tempCenter, coordinate.center);
+        mathUtil.clonePoint(coordinate.center, center);
+        let inScreen = imageService.backgroundImgVertexsInScreenXY();
+        if (!inScreen) {
+          dataService.setGridForPan();
+          needAutoRedraw = true;
+        } else {
+          mathUtil.clonePoint(coordinate.center, tempCenter);
+        }
         break;
       case LayerEvents.AddRoad:
         needAutoRedraw = true;
@@ -981,9 +990,20 @@ export default class Layer {
     if (zoom < minZoom || zoom > maxZoom) {
       return;
     }
+
+    let tempCenter = {};
+    mathUtil.clonePoint(tempCenter, coordinate.center);
+    let tempZoom = coordinate.zoom;
     coordinate.updateZoom(position, zoom);
-    dataService.setGridForZoom();
-    this.renderer.autoRedraw();
+
+    let inScreen = imageService.backgroundImgVertexsInScreenXY();
+    if (!inScreen) {
+      dataService.setGridForZoom();
+      this.renderer.autoRedraw();
+    } else {
+      mathUtil.clonePoint(coordinate.center, tempCenter);
+      coordinate.zoom = tempZoom;
+    }
   }
 
   //测试用

src/graphic/Load.js

@@ -21,7 +21,7 @@ export default class Load {
     this.layer.initLocation();
     if (dataLocal) {
       if (dataLocal.backgroundImg) {
-        let bgImg = imageService.create(
+        let bgImg = imageService.createBackgroundImg(
           dataLocal.backgroundImg.src,
           dataLocal.backgroundImg.vectorId
         );
@@ -31,6 +31,7 @@ export default class Load {
         try {
           if (dataLocal.backgroundImg.src) {
             await bgImg.setImageData();
+            bgImg.setBounding();
           }
         } catch (e) {}
       }
@@ -61,15 +62,6 @@ export default class Load {
           } catch (e) {}
         }
       }
-      if (dataLocal.texts) {
-        for (let key in dataLocal.texts) {
-          let text = textService.create(dataLocal.texts[key].center, key);
-          text.setValue(dataLocal.texts[key].value);
-          text.setFontSize(dataLocal.texts[key].fontSize);
-          text.setColor(dataLocal.texts[key].color);
-          text.setDisplay(dataLocal.texts[key].display);
-        }
-      }
       if (dataLocal.points) {
         for (let key in dataLocal.points) {
           let point = pointService.create(dataLocal.points[key], key);
@@ -80,6 +72,7 @@ export default class Load {
           point.setDisplay(dataLocal.points[key].display);
         }
       }
+
       if (dataLocal.lines) {
         for (let key in dataLocal.lines) {
           let line = lineService.createByPointId(
@@ -100,6 +93,16 @@ export default class Load {
           }
         }
       }
+      if (dataLocal.texts) {
+        for (let key in dataLocal.texts) {
+          let text = textService.create(dataLocal.texts[key].center, key);
+          text.setValue(dataLocal.texts[key].value);
+          text.setFontSize(dataLocal.texts[key].fontSize);
+          text.setColor(dataLocal.texts[key].color);
+          text.setDisplay(dataLocal.texts[key].display);
+          text.setAngle(dataLocal.texts[key].angle || 0);
+        }
+      }
       if (dataLocal.hasOwnProperty("currentId")) {
         dataService.setCurrentId(dataLocal.currentId);
       }
@@ -108,11 +111,15 @@ export default class Load {
       }
     } else if (data3d) {
       if (data3d.backImage) {
-        let bgImg = imageService.create(data3d.backImage, data3d.vectorId);
+        let bgImg = imageService.createBackgroundImg(
+          data3d.backImage,
+          data3d.vectorId
+        );
         bgImg.setCenter(coordinate.center);
         try {
           if (bgImg.src) {
             await bgImg.setImageData();
+            bgImg.setBounding();
           }
         } catch (e) {}
         if (data3d.meterPerPixel) {
@@ -120,7 +127,7 @@ export default class Load {
         }
         const width = bgImg.imageData.width;
         const height = bgImg.imageData.height;
-
+        let angle = 0;
         if (data3d.baseLines) {
           for (let i = 0; i < data3d.baseLines.length; ++i) {
             //理论上基准线只能有一条
@@ -130,6 +137,15 @@ export default class Load {
               VectorCategory.Line.BaseLine
             );
             Settings.baseLineId = baseLine.vectorId;
+
+            //文字要和基准线的方向一致
+            if (typeof baseLine.a != "undefined") {
+              angle = Math.atan(baseLine.a);
+            } else if (baseLine.hasOwnProperty("x")) {
+              angle = Math.PI / 2;
+            } else {
+              angle = 0;
+            }
           }
         }
         if (data3d.measures) {
@@ -160,6 +176,16 @@ export default class Load {
             point.setCategory(VectorCategory.Point.FixPoint);
           }
         }
+        if (data3d.texts) {
+          for (let key in data3d.texts) {
+            let text = textService.create(data3d.texts[key].center, key);
+            text.setValue(data3d.texts[key].value);
+            text.setFontSize(data3d.texts[key].fontSize);
+            text.setColor(data3d.texts[key].color);
+            text.setDisplay(data3d.texts[key].display);
+            text.setAngle(data3d.texts[key].angle || 0);
+          }
+        }
       }
     }
     if (Settings.baseLineId) {

src/graphic/Service/ImageService.js

@@ -1,15 +1,43 @@
 import Img from "../Geometry/Img.js";
 import { dataService } from "./DataService.js";
 import { mathUtil } from "../Util/MathUtil";
+import { coordinate } from "../Coordinate.js";
 
 export default class ImageService {
   constructor() {}
 
-  create(src, vectorId) {
+  createBackgroundImg(src, vectorId) {
     let img = new Img(src, vectorId);
     dataService.addBackgroundImg(img);
     return img;
   }
+
+  //判断背景图片是否在屏幕外
+  backgroundImgVertexsInScreenXY() {
+    function isInScreen(position) {
+      if (
+        (position.x > 0 && position.x < coordinate.width) ||
+        (position.y > 0 && position.y < coordinate.height)
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+
+    let bgImg = dataService.getBackgroundImg();
+    let vertexs = [];
+    vertexs[0] = coordinate.getScreenXY(bgImg.bounding[0]);
+    vertexs[1] = coordinate.getScreenXY(bgImg.bounding[1]);
+    vertexs[2] = coordinate.getScreenXY(bgImg.bounding[2]);
+    vertexs[3] = coordinate.getScreenXY(bgImg.bounding[3]);
+    let flag =
+      isInScreen(vertexs[0]) ||
+      isInScreen(vertexs[1]) ||
+      isInScreen(vertexs[2]) ||
+      isInScreen(vertexs[3]);
+    return flag; //true表示在屏幕内，false表示在屏幕外
+  }
 }
 
 const imageService = new ImageService();