|
|
@ -136,7 +136,11 @@ export default { |
|
|
|
for (let n of nodes) { |
|
|
|
|
|
|
|
const aryId = n.id.split('_') |
|
|
|
const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 |
|
|
|
|
|
|
|
let svgWidth = window.innerWidth - 10 |
|
|
|
let roadRatio = svgWidth * 0.83736 / 154.585 |
|
|
|
// const distance = (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 |
|
|
|
const distance = svgWidth * 0.06989 + (Number(aryId[0].replace(/\.\d+/, "").replace("+", ".").replace(/[Kk]/, "")) - 54.394) * roadRatio; //K54+394 开始到K208+979计算的比例尺 |
|
|
|
if (n.data.nowBg) { |
|
|
|
n.data.nowBg = this.getState(n.data.extNode) ? normalBg : faultBg; |
|
|
|
} |
|
|
@ -385,10 +389,12 @@ export default { |
|
|
|
window.offsetRatio = 0.0755; |
|
|
|
|
|
|
|
// 收费站/服务区标签 |
|
|
|
this.list.forEach(item => this.allInstance += item.distance); |
|
|
|
// this.list.forEach(item => this.allInstance += item.distance); |
|
|
|
let svgWidth = window.innerWidth - 50 |
|
|
|
for (let index in this.list) { |
|
|
|
const info = this.list[index]; |
|
|
|
info.distance = actualLocationList[index].intervalDistance * ratio; |
|
|
|
// info.distance = actualLocationList[index].intervalDistance * ratio; |
|
|
|
info.distance = svgWidth * actualLocationList[index].intervalDistance; |
|
|
|
await this.drawTag(info, graph); |
|
|
|
} |
|
|
|
//文字覆盖问题修复 |
|
|
@ -405,11 +411,12 @@ export default { |
|
|
|
graph.getCellById("K190+495_底部文字").translate(10, 0); |
|
|
|
|
|
|
|
}, |
|
|
|
async drayLine(text, graph, isFoot = false) { |
|
|
|
let x = this.translateX + 141; |
|
|
|
async drayLine(info, graph, isFoot = false) { |
|
|
|
let text = info.line |
|
|
|
let x = info.distance + 10; |
|
|
|
|
|
|
|
const ipxDiff = window.screen.width === 3840?135:0; |
|
|
|
x = x+ipxDiff |
|
|
|
// const ipxDiff = window.screen.width === 3840?135:0; |
|
|
|
// x = x+ipxDiff |
|
|
|
if (isFoot) { |
|
|
|
graph.addNode({ |
|
|
|
...rect, x: x, y: 30, height: 161 |
|
|
@ -439,7 +446,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
async drawTag(info, graph) { |
|
|
|
this.translateX += info.distance; |
|
|
|
this.translateX = info.distance; |
|
|
|
let type = "3"; |
|
|
|
if (info.name.indexOf("枢纽") !== -1) { |
|
|
|
type = "0"; |
|
|
@ -449,14 +456,16 @@ export default { |
|
|
|
type = "1"; |
|
|
|
} |
|
|
|
if (type === "0") { |
|
|
|
await this.drayLine(info.line, graph, info.isFoot); |
|
|
|
await this.drayLine(info, graph, info.isFoot); |
|
|
|
if (info.name === "东平湖枢纽") { |
|
|
|
const r = -150; |
|
|
|
const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: 1205, y: 2, height: 85, zIndex: 1 }); |
|
|
|
let ratio = window.innerWidth * 0.626 |
|
|
|
const nodeLine = graph.addNode({ ...rect, shape: 'rect', x: ratio, y: 2, height: 85, zIndex: 1 }); |
|
|
|
nodeLine.rotate((r * Math.PI)); |
|
|
|
|
|
|
|
let test = ratio + 50 |
|
|
|
graph.addNode({ |
|
|
|
label: "S33济徐高速", x: 1275, y: 22, attrs: { |
|
|
|
label: "S33济徐高速", x: test, y: 22, attrs: { |
|
|
|
label: { |
|
|
|
fontSize: 12, |
|
|
|
fill: "#37B5D4", |
|
|
@ -470,17 +479,17 @@ export default { |
|
|
|
const imageNode = graph.addNode({ |
|
|
|
shape: 'image', imageUrl: require(`./images/${info.icon || `tag${type}`}.png`), x: this.translateX, y: this.translateY, width: 21, height: 117 |
|
|
|
}); |
|
|
|
imageNode.translate(width * 0.07, 0); |
|
|
|
// imageNode.translate(width * 0.07, 0); |
|
|
|
|
|
|
|
const ipxDiff = window.screen.width === 3840?-10:0; |
|
|
|
// const ipxDiff = window.screen.width === 3840?-10:0; |
|
|
|
for (var i = 0; i < info.name.length; i++) { // |
|
|
|
const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX+ipxDiff, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); |
|
|
|
imageLabelNode.translate(width * window.offsetRatio, 50 + y); |
|
|
|
const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); |
|
|
|
imageLabelNode.translate(10, 50 + y); |
|
|
|
} |
|
|
|
|
|
|
|
// 修改文字位置 |
|
|
|
const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" }); |
|
|
|
buttomLabelNode.translate(width * window.offsetRatio, 0); |
|
|
|
buttomLabelNode.translate(10, 0); |
|
|
|
|
|
|
|
}, |
|
|
|
loadImage(url) { |
|
|
|