添加图例

package.json

@@ -12,6 +12,7 @@
     "@types/express": "^4.17.17",
     "axios": "^1.3.5",
     "body-parser": "^1.20.2",
+    "canvg": "^4.0.1",
     "coordtransform": "^2.1.2",
     "driver.js": "^0.9.8",
     "express-fileupload": "^1.4.0",

src/graphic/CanvasStyle/ImageLabels/SVGIcons.js

@@ -0,0 +1,85 @@
+const SVGIcons = {
+  "keche_plane": {
+    draw: function(ctx){
+      ctx.save();
+      ctx.miterLimit=4;
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(6.5,23.5);
+      ctx.bezierCurveTo(6.5,21.2909,8.29086,19.5,10.5,19.5);
+      ctx.lineTo(58.5,19.5);
+      ctx.bezierCurveTo(60.7091,19.5,62.5,21.2909,62.5,23.5);
+      ctx.lineTo(62.5,40.5);
+      ctx.bezierCurveTo(62.5,42.7091,60.7091,44.5,58.5,44.5);
+      ctx.lineTo(10.5,44.5);
+      ctx.bezierCurveTo(8.29086,44.5,6.5,42.7091,6.5,40.5);
+      ctx.lineTo(6.5,23.5);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(1.5,23.5);
+      ctx.bezierCurveTo(1.5,21.2909,3.29086,19.5,5.5,19.5);
+      ctx.lineTo(58.5007,19.5);
+      ctx.bezierCurveTo(60.7099,19.5,62.5007,21.2909,62.5007,23.5);
+      ctx.lineTo(62.5007,40.5);
+      ctx.bezierCurveTo(62.5007,42.7091,60.7099,44.5,58.5007,44.5);
+      ctx.lineTo(5.5,44.5);
+      ctx.bezierCurveTo(3.29086,44.5,1.5,42.7091,1.5,40.5);
+      ctx.lineTo(1.5,23.5);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(1.5,32.5);
+      ctx.lineTo(6.5,32.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.lineCap="round";
+      ctx.beginPath();
+      ctx.moveTo(12.5,22.5);
+      ctx.lineTo(20.5,22.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.lineCap="round";
+      ctx.beginPath();
+      ctx.moveTo(12.5,41.5);
+      ctx.lineTo(20.5,41.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.lineCap="round";
+      ctx.beginPath();
+      ctx.moveTo(49.5,22.5);
+      ctx.lineTo(55.5,22.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.save();
+      ctx.lineCap="round";
+      ctx.beginPath();
+      ctx.moveTo(49.5,41.5);
+      ctx.lineTo(55.5,41.5);
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+      ctx.restore();
+    }
+  }
+}
+//          │
+// │
+//  Account: Not bind	 │ Code: 906679187
+// Level: unbind           │ Access: L26JI3
+//                          │
+
+export default SVGIcons

src/graphic/CanvasStyle/default.js

@@ -190,12 +190,19 @@ const TestPoint = {
   }
 }
 
+const SVG = {
+  fillStyle: "rgba(0,0,0,0)",
+  strokeStyle: "black",
+  lineWidth: 2 * coordinate.ratio
+}
+
 
 
 export default {
   NormalLine,
   Road,
   CurveRoad,
+  SVG,
   RoadEdge,
   CurveRoadEdge,
   Lane,

src/graphic/CanvasStyle/focus.js

@@ -115,11 +115,19 @@ const BaseLine = {
   strokeStyle: "#3290FF",
   lineWidth: 1 * coordinate.ratio,
 };
+
+const SVG = {
+  fillStyle: "rgba(50,144,255,0.2)",
+  strokeStyle: "black",
+  lineWidth: 2 * coordinate.ratio
+}
+
 export default {
   Road,
   Text,
   BasePoint,
   Point,
+  SVG,
   ArrowLine,
   RoadPoint,
   CurveRoadPoint,

src/graphic/CanvasStyle/select.js

@@ -112,6 +112,12 @@ const TestPoint = {
 }
 
 
+const SVG = {
+  fillStyle: "rgba(50,144,255,0.2)",
+  strokeStyle: "black",
+  lineWidth: 2 * coordinate.ratio
+}
+
 
 export default {
   Road,
@@ -119,6 +125,7 @@ export default {
   Point,
   TestPoint,
   RoadPoint,
+  SVG,
   CurveRoadPoint,
   CrossPoint,
   CurveRoad,

src/graphic/Renderer/Draw.js

@@ -9,6 +9,8 @@ import { elementService } from "../Service/ElementService.js";
 import UIEvents from "@/graphic/enum/UIEvents.js";
 import VectorCategory from "@/graphic/enum/VectorCategory.js";
 import Settings from "@/graphic/Settings.js";
+import { Canvg } from 'canvg'
+import SVGIcons from "../CanvasStyle/ImageLabels/SVGIcons";
 
 const imgCache = {};
 const help = {
@@ -727,20 +729,36 @@ export default class Draw {
   }
 
   drawSVG(vector) {
-    let points = [];
-    for (let i = 0; i < vector.points.length; ++i) {
-      const point = coordinate.getScreenXY(vector.points[i]);
-      points.push(point);
-    }
+    const points = vector.points.map(coordinate.getScreenXY.bind(coordinate))
+    const svgWidth= 64
+    const svgHidth= 64
+    const width = mathUtil.getDistance(points[0], points[1])
+    const height = mathUtil.getDistance(points[0], points[3])
+    const dires = [points[0], {...points[0], x: 10000}, points[1]]
+    let angle = mathUtil.Angle(...dires) * (Math.PI / 180)
+    angle = mathUtil.isClockwise(dires) ? angle : -angle;
+
     this.context.save();
-    this.context.beginPath();
-    this.context.moveTo(points[0].x, points[0].y);
-    this.context.lineTo(points[1].x, points[1].y);
-    this.context.lineTo(points[2].x, points[2].y);
-    this.context.lineTo(points[3].x, points[3].y);
-    this.context.closePath();
-    this.context.stroke();
-    this.context.restore();
+    this.context.translate(points[0].x, points[0].y)
+    this.context.rotate(angle)
+    this.context.scale(width / svgWidth, height / svgHidth)
+    const [style] = help.setVectorStyle(this.context, vector)
+    this.context.lineWidth = style.lineWidth / (width / svgWidth)
+    SVGIcons.keche_plane.draw(this.context)
+
+
+
+    if (import.meta.env.DEV) {
+      this.context.restore();
+      this.context.beginPath();
+      this.context.moveTo(points[0].x, points[0].y);
+      this.context.lineTo(points[1].x, points[1].y);
+      this.context.lineTo(points[2].x, points[2].y);
+      this.context.lineTo(points[3].x, points[3].y);
+      this.context.closePath();
+      this.context.stroke();
+      this.context.restore();
+    }
   }
 
   drawLineText(vector, style) {

src/graphic/Service/LineService.js

@@ -3,7 +3,7 @@ import Line from "../Geometry/Line.js";
 import CurvePoint from "../Geometry/CurvePoint.js";
 import CurveLine from "../Geometry/CurveLine.js";
 import { dataService } from "./DataService.js";
-import { curvePointService } from "./CurvePointService.js";
+// import { curvePointService } from "./CurvePointService.js";
 import VectorCategory from "../enum/VectorCategory.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import { uiService } from "./UIService.js";

src/views/scene/covers/measures.vue

@@ -32,6 +32,7 @@ const activeActionMenus = [
     color: "#FF4D4F",
     iconColor: "#fff",
     action() {
+      console.log('aa')
       const store = getStore(active.value)
       if (store) {
         store.splice(store.indexOf(active.value), 1)

src/views/scene/menus/actions.ts

@@ -121,7 +121,7 @@ const menuActions = {
   },
   [menuEnum.BASE_LINE]: (menu, onComplete) => {
     return trackMeasureMenuAction(
-      'LINE',
+      'L_LINE',
       menu,
       (data) => baseLines.value.push(data),
       onComplete,

yarn.lock

@@ -213,6 +213,11 @@
   resolved "http://192.168.0.47:4873/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
   integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
 
+"@types/offscreencanvas@^2019.6.4":
+  version "2019.7.0"
+  resolved "http://192.168.0.47:4873/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz#e4a932069db47bb3eabeb0b305502d01586fa90d"
+  integrity sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==
+
 "@types/qs@*":
   version "6.9.7"
   resolved "http://192.168.0.47:4873/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -524,6 +529,18 @@ canvg@^3.0.6:
     stackblur-canvas "^2.0.0"
     svg-pathdata "^6.0.3"
 
+canvg@^4.0.1:
+  version "4.0.1"
+  resolved "http://192.168.0.47:4873/canvg/-/canvg-4.0.1.tgz#122532dffeff6fc36074582af2cd37c454ae9ffa"
+  integrity sha512-5gD/d6SiCCT7baLnVr0hokYe93DfcHW2rSqdKOuOQD84YMlyfttnZ8iQsThTdX6koYam+PROz/FuQTo500zqGw==
+  dependencies:
+    "@types/offscreencanvas" "^2019.6.4"
+    "@types/raf" "^3.4.0"
+    raf "^3.4.1"
+    rgbcolor "^1.0.1"
+    stackblur-canvas "^2.0.0"
+    svg-pathdata "^6.0.3"
+
 "chokidar@>=3.0.0 <4.0.0":
   version "3.5.3"
   resolved "http://192.168.0.47:4873/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"