增加画车道方法

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

@@ -81,34 +81,111 @@ export default {
       }
       this.aMapIns.add(acPolylines);
 
-      //济菏高速
+      //济菏高速里程桩数据
       let lczDatas = [];
       for (let key in lcz) {
         lczDatas.push([lcz[key].lng, lcz[key].lat]);
       }
 
-      let jhgsPl = drawingLine(this.AMap, lczDatas, 3);
-      this.aMapIns.add(jhgsPl);
+      //低缩放级别显示的道路
+      let jhgsPl1 = drawingLine(this.AMap, lczDatas, 3, 0);
+      this.aMapIns.add(jhgsPl1);
+
+      //高缩放级别显示的车道
+      let jhgsPl2 = drawJHPath(this.AMap, lczDatas, 1, 60);
+
+      //地图缩放事件,缩放到一定级别显示道路
+      this.aMapIns.on('zoomend', () => {
+        this.aMapIns.getZoom() > 19.5 ? this.aMapIns.add(jhgsPl2) : this.aMapIns.remove(jhgsPl2);
+      });
+      this.aMapIns.on('zoomstart', () => {
+        this.aMapIns.remove(jhgsPl2);
+      });
+
     });
 
     //画线
-    function drawingLine(AMap, datas, bWeight = 1, olColor = "#00B3CC") {
+    function drawingLine(AMap, datas, borderWeight = 1,strokeWeight = 0, olColor = "#00B3CC") {
       return new AMap.Polyline({
         path: datas,
         isOutline: true,
         outlineColor: olColor,
-        borderWeight: bWeight,
-        strokeColor: "#3366FF",
-        strokeOpacity: 1,
-        strokeWeight: 0,
-        // 折线样式还支持 'dashed'
-        strokeStyle: "solid",
+        borderWeight: borderWeight,//轮廓线宽度
+        strokeWeight: strokeWeight, // 线宽
+        strokeColor: '#394851',   // 线颜色
+        // strokeColor: "#3366FF",
+        strokeOpacity: 1,// 线透明度
+        strokeStyle: "solid",// 折线样式还支持 'dashed'
         // strokeStyle是dashed时有效
-        strokeDasharray: [10, 5],
+        // strokeDasharray: [10, 5],
         lineJoin: "round",
         lineCap: "round",
-        zIndex: 50,
+        zIndex: 50
+      });
+    }
+
+    //画车道
+    // let jhPolyline;
+    function drawJHPath(AMap, lczPointList,borderWeight = 1,strokeWeight = 60) {
+      return new AMap.Polyline({
+        path: lczPointList,            // 设置线覆盖物路径
+        showDir: true,
+        dirImg: createCanvas(),
+        isOutline: true,
+        outlineColor: '#C4C6C7',
+        borderWeight: 2,//轮廓线宽度
+        strokeWeight: strokeWeight, // 线宽
+        strokeOpacity: 1,         // 线透明度
+        draggable: false, //是否可移动
+        strokeStyle: "solid",
+        // strokeDasharray: [10, 2, 10],
+        strokeColor: '#394851',   // 线颜色
       });
+
+    }
+
+    //画车道线
+    function createCanvas() {
+        let canvasDir = document.createElement('canvas')
+        let width = 150;
+        let height = 150;
+
+        canvasDir.width = width;
+        canvasDir.height = height;
+        var context = canvasDir.getContext('2d');
+        context.strokeStyle = '#C4C6C7';
+        context.lineJoin = 'round';
+        context.lineWidth = 5;
+
+        //左边实线
+        // context.moveTo(5, 0);
+        // context.lineTo(5, height);
+        //左边虚线
+        context.moveTo(35, 0);
+        context.lineTo(35, 50);
+        context.moveTo(35, 100);
+        context.lineTo(35, 150);
+        //中间虚线
+        context.moveTo(75, 20);
+        context.lineTo(75, 70);
+        context.moveTo(75, 120);
+        context.lineTo(75, 170);
+        //右边虚线
+        context.moveTo(115, 0);
+        context.lineTo(115, 50);
+        context.moveTo(115, 100);
+        context.lineTo(115, 150);
+        //最右侧实线
+        // context.moveTo(width - 5, 0);
+        // context.lineTo(width - 5, height);
+        
+        context.stroke();
+
+        // 绘制一个填充矩形
+        // context.fillStyle = "red";
+        // context.fillRect(0, 0, width, height);
+
+        return canvasDir;
       }
 
     // this.aMapIns.enableAutoResize();