优化首页高速路径及车道线

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue

@@ -98,12 +98,9 @@ export default {
       let jhgsPl2 = drawJHPath(this.AMap, lczDatas, 1, 60);
 
       //地图缩放事件,缩放到一定级别显示道路
-      this.aMapIns.on('zoomend', () => {
+      this.aMapIns.on('zoomchange', () => {
         this.aMapIns.getZoom() > 19.5 ? this.aMapIns.add(jhgsPl2) : this.aMapIns.remove(jhgsPl2);
       });
-      this.aMapIns.on('zoomstart', () => {
-        this.aMapIns.remove(jhgsPl2);
-      });
 
     });
 
@@ -160,34 +157,48 @@ export default {
       context.lineJoin = 'round';
       context.lineWidth = 5;
 
-      //左边实线
+      //左边(行进方向)应急车道实线
       // context.moveTo(5, 0);
       // context.lineTo(5, height);
-      //左边虚线
+      //左侧第一车道
+      //虚线
       context.moveTo(35, 0);
-      context.lineTo(35, 50);
+      context.lineTo(35, 40);
-      context.moveTo(35, 100);
+      context.moveTo(35, 55);
+      context.lineTo(35, 95);
+      context.moveTo(35, 110);
       context.lineTo(35, 150);
-      //中间虚线
+      //实线
-      context.moveTo(75, 20);
+      // context.moveTo(35, 0);
-      context.lineTo(75, 70);
+      // context.lineTo(35, height);
-      context.moveTo(75, 120);
+      //中间
-      context.lineTo(75, 170);
+      //虚线
-      //右边虚线
+      context.moveTo(75, 0);
+      context.lineTo(75, 40);
+      context.moveTo(75, 55);
+      context.lineTo(75, 95);
+      context.moveTo(75, 110);
+      context.lineTo(75, 150);
+      //实线
+      // context.moveTo(75, 0);
+      // context.lineTo(75, height);
+      //右边
+      //虚线
       context.moveTo(115, 0);
-      context.lineTo(115, 50);
+      context.lineTo(115, 40);
-      context.moveTo(115, 100);
+      context.moveTo(115, 55);
+      context.lineTo(115, 95);
+      context.moveTo(115, 110);
       context.lineTo(115, 150);
+      //实线
+      // context.moveTo(115, 0);
+      // context.lineTo(115, height);
       //最右侧实线
       // context.moveTo(width - 5, 0);
       // context.lineTo(width - 5, height);
 
       context.stroke();
 
-      // 绘制一个填充矩形
-      // context.fillStyle = "red";
-      // context.fillRect(0, 0, width, height);
-
       return canvasDir;
     }