diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue index f8c2caf7..c537e0b4 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue @@ -81,36 +81,113 @@ 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(); }, methods: {