绘制图例

src/utils/MapHelper/help.js

@@ -110,16 +110,16 @@ function convertImageToCanvas(image, fu) {
   canvas.height = image.height;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(image, 0, 0);
-  fu(canvas, ctx)
-  // this.drawLegends(canvas, ctx);
+  if (typeof fu == 'function')
+    fu(canvas, ctx)
+  else drawLegends(canvas, ctx, fu);
   return canvas;
 }
 // 绘制图例
-function drawLegends(canvas, ctx) {
-  var legends = this.sdh;
+function drawLegends(canvas, ctx, legends) {
   var padding = 10; // 图例与边缘的间距
   var lineHeight = 30; // 每行图例的高度
-  var labW = 120;
+  var labW = 200;
   var x = canvas.width - padding - labW; // 图例的起始X坐标
   var y = canvas.height - legends.length * lineHeight - padding; // 图例的起始Y坐标
   // 绘制颜色块
@@ -132,20 +132,22 @@ function drawLegends(canvas, ctx) {
   );
   legends.forEach(function (legend, index) {
     // 绘制文本
-    ctx.fillStyle = "black";
-    ctx.fillText(
-      legend.scS + "小时",
-      x,
-      y + index * lineHeight + lineHeight / 2
-    );
-    // 绘制颜色块
-    ctx.fillStyle = legend.fill;
-    ctx.fillRect(
-      x + (labW / 3) * 2,
-      y + index * lineHeight,
-      30,
-      lineHeight
-    );
+    if (legend.scS) {
+      ctx.fillStyle = "black";
+      ctx.fillText(legend.scS, x, y + index * lineHeight + lineHeight / 2);
+      // 绘制颜色块
+      ctx.fillStyle = legend.fill;
+      ctx.fillRect(
+        x + (labW / 3) * 2,
+        y + index * lineHeight,
+        30,
+        lineHeight
+      );
+    } else {
+      ctx.fillStyle = "black";
+      let text = `${legend.name}:${legend.value}${legend.unit}`;
+      ctx.fillText(text, x, y + index * lineHeight + lineHeight / 2);
+    }
   });
 }