模板:铁路

2022-09-24T13:10:02Z

Xiaolong：

<html>

<body>
<style>
.pop {
box-shadow: 0px 0px 10px -1px #c9c9c9;
background: #FFF;
width: 200px;
min-height: 40px;
border-radius: 7px;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s;
pointer-events:none;
opacity: 0;
overflow: hidden;
}
.pop > div:first-child {
height: 30px;
background: #4188F1;
line-height: 30px;
padding: 0 10px;
color: #fff;
font-weight: bold;
font-size: 0.9rem;
}
.pop > div:last-child {
padding: 5px 10px;
display: flex;
flex-direction: column;
}
.pop > div:last-child > span {
font-size: 0.8rem;
}
</style>
<div id="MainMap">
<div id="pop" class="pop">
<div></div>
<div></div>
</div>
</div>
<script>
window.dataset = {
"lines": {
"1": {
"color": "#B02E26",
"route": [
{ "SCZCT": "" },
{ "CZHCT": "" },
{ "NNCNL": "" },
{ "SPAWN": "" },
{ "MNTDY": "" },
{ "EYYCT": "" },
{ "LNYCT": "" }
]
},
"2": {
"color": "#3C44AA",
"route": [
{ "WTCCT": "" },
{ "LNYCT": "" },
{ "WUMIN": "" },
{ "XJIAN": "" },
{ "PGNUN": "" }
],
"stat": "planned"
},
"2支线": {
"color": "#3C44AA",
"route": [
{ "WUMIN": "" },
{ "STRHD": "" },
{ "BREAD": "" },
{ "FGLIN": "" }
]
},
"3": {
"color": "#FED83D",
"route": [
{ "SPAWN": "" },
{ "NNCNL": "" },
{ "pos": [0, 4], "stat": "planned" },
{ "INITS": "" },
{ "KEMOW": "" },
//{ "UKN03": "" },
{ "YXLAN": "" }
],
"stat": "planned"
},
"4": {
"color": "#169C9C",
"route": [
{ "HINDA": "" },
//{ "UKN01": "" },
{ "KMRPK": "" },
{ "SPAWN": "" },
{ "SCZCT": "" },
{ "BAIZE": "" },
//{ "STADM": "" },
//{ "UKN02": "" }
]
},
//"4支线": {
// "color": "#169C9C",
// "route": [
// { "STADM": "" },
// { "ACBTF": "" }
// ]
//},
"5": {
"color": "#8932B8",
"route": [
{ "SCZCT": "" },
{ "CZHCT": "" },
{ "XNMCT": "" },
{ "MUYLN": "" },
{ "pos": [-8, 4], "stat": "planned" },
{ "ACBTF": "" },
{ "pos": [-12, 2], "stat": "planned" },
{ "YGHOM": "" },
{ "pos": [-12, 8], "stat": "planned" },
{ "pos": [-14, 8], "stat": "planned" },
{ "SZHCT": "" }
]
},
"6": {
"color": "#C74EBD",
"route": [
{ "QIWAN": "" },
{ "pos": [-6, 12], "stat": "planned" },
{ "SXSBZ": "" },
{ "ENSHM": "" },
{ "CINDA": "" },
{ "XNMCT": "" },
{ "pos": [-2, 4], "stat": "planned" },
{ "GJHOM": "" },
{ "KEMOW": "" },
{ "pos": [8, 6], "stat": "planned" },
{ "KMRPK": "" },
{ "LINDA": "" },
{ "XYHOM": "" },
{ "BREAD": "" },
{ "ICERF": "" }
]
}//,
// "8": {
// "color": "#5E7C16",
// "route": [
// { "ENSHM": "" },
// { "WNSHM": "" },
// { "pos": [-12, 8], "stat": "planned" },
// { "YGHOM": "" }
// ]
// }
},
"stations": {
"ACBTF": {
"label": "古战场",
"pos": [-8, 2],
"stat": "planned"
},
"BAIZE": {
"label": "白泽",
"pos": [-4, 0],
"stat": "planned"
},
"BREAD": {
"label": "面包",
"pos": [8, -6],
"stat": "finished"
},
"CINDA": {
"label": "缺口空置域",
"pos": [-6, 6],
"stat": "finished"
},
"CZHCT": {
"label": "赐召",
"pos": [-2, 2],
"stat": "finished"
},
"ENSHM": {
"label": "横光",
"pos": [-6, 8],
"stat": "planned"
},
"EYYCT": {
"label": "漪阳东",
"pos": [0, -4],
"stat": "planned"
},
"FGLIN": {
"label": "枫霖",
"pos": [10, -6],
"stat": "planned"
},
"GJHOM": {
"label": "托伊蕾特",
"pos": [-2, 6],
"stat": "planned"
},
"HINDA": {
"label": "重工业区",
"pos": [12, 0],
"stat": "planned"
},
"ICERF": {
"label": "冰道",
"pos": [10, -8],
"stat": "planned"
},
"INITS": {
"label": "元始",
"pos": [4, 4],
"stat": "planned"
},
"KEMOW": {
"label": "科魔",
"pos": [4, 6],
"stat": "planned"
},
"KMRPK": {
"label": "烟草公园",
"pos": [8, 0],
"stat": "planned"
},
"LINDA": {
"label": "轻工业区",
"pos": [8, -2],
"stat": "planned"
},
"LNYCT": {
"label": "临漪",
"pos": [0, -6],
"stat": "finished"
},
"MNTDY": {
"label": "定漪山",
"pos": [0, -2],
"stat": "planned"
},
"MUYLN": {
"label": "暮阳陵",
"pos": [-6, 4],
"stat": "planned"
},
"NNCNL": {
"label": "北运河北",
"pos": [0, 2],
"stat": "finished"
},
"PGNUN": {
"label": "鸽联",
"pos": [4, -10],
"stat": "planned"
},
"QIWAN": {
"label": "绮湾",
"pos": [-2, 16],
"stat": "planned"
},
"SCZCT": {
"label": "赐召南",
"pos": [-2, 0],
"stat": "planned"
},
"SPAWN": {
"label": "主城",
"pos": [0, 0],
"stat": "finished"
},
//"STADM": {
// "label": "玩家体育场",
// "pos": [-8, 0],
// "stat": "planned"
},
"STRHD": {
"label": "天德池",
"pos": [6, -6],
"stat": "finished"
},
"SXSBZ": {
"label": "山心水背",
"pos": [-6, 10],
"stat": "planned"
},
"SZHCT": {
"label": "汕州",
"pos": [-14, 10],
"stat": "planned"
},
//"UKN01": {
// "label": "Unknown01",
// "pos": [10, 0],
// "stat": "planned"
//},
//"UKN02": {
// "label": "Unknown02",
// "pos": [-8, -4],
// "stat": "planned"
//},
//"UKN03": {
// "label": "Unknown03",
// "pos": [8, 6],
// "stat": "planned"
//},
//"WNSHM": {
// "label": "满天星家西",
// "pos": [-10, 8],
// "stat": "finished"
//},
"WTCCT": {
"label": "天策西",
"pos": [-2, -6],
"stat": "finished"
},
"WUMIN": {
"label": "地下铁",
"pos": [2, -6],
"stat": "planned"
},
"XJIAN": {
"label": "薪涧",
"pos": [4, -8],
"stat": "planned"
},
"XNMCT": {
"label": "星眸",
"pos": [-4, 4],
"stat": "finished"
},
"XYHOM": {
"label": "梦渊",
"pos": [8, -4],
"stat": "planned"
},
"YGHOM": {
"label": "叶光",
"pos": [-12, 6],
"stat": "finished"
},
"YXLAN": {
"label": "垭西兰",
"pos": [8, 8],
"stat": "planned"
}
}
}
</script>
<script>
const BLACK = "#000000"
const LIGHTGRAY = "#AAAAAA"
const WHITE = "#FFFFFF"

function canvPos(x, y) {
x = - Number(minx) + Number(x) + 1
y = Number(maxy) - Number(y) + 1
return [Math.round(x), Math.round(y)]
}

function drawMap(mapData, lineGet) {
// 处理只显示单条的情况
if(!(lineGet == undefined || mapData["lines"][lineGet] == undefined)) {
// 处理线路列表
const lineShow = mapData["lines"][lineGet]
mapData["lines"] = {}
mapData["lines"][lineGet] = lineShow
// 处理站点列表（删除不需要的站点）
for (let station in mapData.stations) {
let get = false
for(let site in mapData["lines"][lineGet]["route"]) {
if(Object.keys(mapData["lines"][lineGet]["route"][site]) == station) {
get = true
break
}
}
if(!get) {
delete mapData.stations[station]
}
}
}
// 计算全图大小
for (let station in mapData.stations) {
station = mapData.stations[station]
let [x, y] = station.pos
maxx = Math.max(maxx, x)
maxy = Math.max(maxy, y)
minx = Math.min(minx, x)
miny = Math.min(miny, y)
}
size = Math.max(Math.abs(maxx) + Math.abs(minx), Math.abs(maxy) + Math.abs(miny)) * 0.65
// 计算中心偏移
adx = (minx + maxx) / 2
ady = (miny + maxy) / 2
// 开始显示
let links = []
for (let line in mapData.lines) {
let lastpoint = undefined
for (let waypoint in mapData.lines[line].route) {
waypoint = mapData.lines[line].route[waypoint]
if (waypoint.pos == undefined) {
waypoint = mapData.stations[Object.keys(waypoint)[0]]
}
else {
if (waypoint.stat == undefined) { waypoint.stat = "finished" }
}
if (lastpoint != undefined) {
let color = { "finished": mapData.lines[line].color, "planned": mapData.lines[line].color }
let stat = "finished"
if (waypoint.stat == "planned" || lastpoint.stat == "planned") stat = "planned"
if (mapData.lines[line].stat == "planned") stat = "planned"
if (links[[lastpoint.pos, waypoint.pos]] != undefined) {
links[[lastpoint.pos, waypoint.pos]].push([line, color[stat]])
}
else {
if (links[[waypoint.pos, lastpoint.pos]] != undefined) {
links[[waypoint.pos, lastpoint.pos]].push([line, color[stat]])
}
else links[[lastpoint.pos, waypoint.pos]] = [[line, color[stat]]]
}
}
lastpoint = waypoint
}
}

/* Draw lines */
// 构建线条图层
const gLine = document.createElementNS('http://www.w3.org/2000/svg','g')
gLine.id = "LineList"
gLine.style.transform = "translateX(" + adx / size * 50 + "%)"
gLine.style.transform = "translateY(" + ady / size * 50 + "%)"
for (let link in links) {
let [x1, y1, x2, y2] = link.split(",")
let linklen = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
linkInfo = links[link]
for (let rail in linkInfo) {
let dl = (rail - (linkInfo.length - 1) / 2) * 0.25
let [dx, dy] = [- (y2 - y1) / linklen * dl, (x2 - x1) / linklen * dl]
let [startx, starty] = [
50 + (Number(x1) / size * 50) + "%",
50 - (Number(y1) / size * 50) + "%"
]
let [stopx, stopy] = [
50 + (Number(x2) / size * 50) + "%",
50 - (Number(y2) / size * 50) + "%"
]

const line = document.createElementNS('http://www.w3.org/2000/svg','line')
line.dataset.raw = link
line.dataset.name = linkInfo[rail][0]
line.setAttribute("x1", startx)
line.setAttribute("y1", starty)
line.setAttribute("x2", stopx)
line.setAttribute("y2", stopy)
line.style.strokeWidth = "0.25rem"
line.style.strokeLinecap = "round"
line.style.stroke = linkInfo[rail][1]
line.style.transition = "stroke-width .3s"
// 偏移
let move = ""
if(dx > 0) {
move += "translateX(0.15rem) "
} else if(dx < 0) {
move += "translateX(-0.15rem) "
}
if(dy > 0) {
move += "translateY(0.15rem) "
} else if(dy < 0) {
move += "translateY(-0.15rem) "
}
line.style.transform = move

// 鼠标事件
line.onmouseover = function() { onLineHover(line) }
line.onmouseleave = function() { onLineLeave(line) }

if(gLine.children.length == 0) {
gLine.append(line)
} else {
gLine.insertBefore(line, gLine.firstChild)
}
}
}
this.append(gLine)

/* Draw stations */
// 构建站点图层
const gSite = document.createElementNS('http://www.w3.org/2000/svg','g')
gSite.style.transform = "translateX(" + adx / size * 50 + "%)"
gSite.style.transform = "translateY(" + ady / size * 50 + "%)"
for (let station in mapData.stations) {
station = mapData.stations[station]
let stationColor = BLACK
if (station.stat == "planned") stationColor = LIGHTGRAY
let name = station.label
let [x, y] = station.pos

// <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
const point = document.createElementNS('http://www.w3.org/2000/svg','circle')
point.dataset.raw = station.pos
point.dataset.data = JSON.stringify(station)
point.setAttribute("cx", 50 + (Number(x) / size * 50) + "%")
point.setAttribute("cy", 50 - (Number(y) / size * 50) + "%")
point.style.transition = "r .3s, stroke-width .3s"
point.style.r = "0.5rem"
point.style.fill = WHITE
point.style.stroke = stationColor
point.style.strokeWidth = "0.2rem"

point.onmouseover = function() { onPointOver(event, point) }
point.onmouseleave = function() { onPointLeace(point) }

// <text x="0" y="15" fill="red">I love SVG</text>
const text = document.createElementNS('http://www.w3.org/2000/svg','text')
text.setAttribute("x", 50 + (Number(x) / size * 50) + "%")
text.setAttribute("y", 50 - (Number(y) / size * 50) + "%")
text.style.transform = "translateX(0.7rem) translateY(-0.7rem)"
text.style.fontSize = "0.6rem"
text.style.fill = BLACK
text.innerHTML = name

if(gSite.children.length == 0) {
gSite.append(point)
gSite.append(text)
} else {
gSite.insertBefore(point, gSite.firstChild)
gSite.insertBefore(text, gSite.firstChild)
}
}
this.append(gSite)
}

// 整图大小
let minx = 0, miny = 0, maxx = 0, maxy = 0, size = 0, adx = 0, ady = 0, view = </html>{{{缩放|900}}}<html>

// 初始化
const div = document.getElementById("MainMap") // SVG 框架
// 生成 SVG
// <svg width="100vh" height="100%" view-box="0 0 2048 2048">
window.mainMap = document.createElementNS('http://www.w3.org/2000/svg','svg')
mainMap.setAttribute('version','1.1')
mainMap.setAttribute("viewBox", "0 0 " + view + " " + view)
mainMap.setAttribute("preserveAspectRatio", "xMidYMid meet")
mainMap.style.width = '</html>{{{宽度|100%}}}<html>'
mainMap.style.height = '</html>{{{高度|unset}}}<html>'

mainMap.drawMap = drawMap
mainMap.drawMap(dataset, </html>{{{线路|undefined}}}<html>)

div.append(mainMap)
</script>
<script>
// 线段悬停事件
function onLineHover(sender) {
// 线名
const name = sender.dataset.name
// 寻找所有线段
const list = document.getElementById("LineList").children
for(let i=0; i<=list.length; i++) {
if(!(list[i] == undefined || list[i].dataset.name != name)) {
list[i].style.strokeWidth = "0.4rem"
}
}
}
function onLineLeave(sender) {
// 线名
const name = sender.dataset.name
// 寻找所有线段
const list = document.getElementById("LineList").children
for(let i=0; i<=list.length; i++) {
if(!(list[i] == undefined || list[i].dataset.name != name)) {
list[i].style.strokeWidth = "0.25rem"
}
}
}

// 站点悬停事件
function onPointOver(event, sender) {
const pop = document.getElementById("pop")
// 处理元素
sender.style.r = "1px"
sender.style.strokeWidth = "1rem"
pop.style.opacity = "1"
// 获取鼠标位置
const x = event.pageX
const y = event.pageY
// 移动 div
pop.style.top = y + "px"
pop.style.left = (x + 10) + "px"
// 填充信息
pop.children[1].innerHTML = ""
const info = JSON.parse(sender.dataset.data)
pop.children[0].innerText = info.label
let span = document.createElement("span")
span.innerText = "所属：" + info.user
pop.children[1].append(span)
span = document.createElement("span")
span.innerText = "坐标：" + info.point
pop.children[1].append(span)
}
function onPointLeace(sender) {
const pop = document.getElementById("pop")
// 处理元素
sender.style.r = "0.5rem"
sender.style.strokeWidth = "0.2rem"
pop.style.opacity = "0"
}
</script>
</body>

</html>

<noinclude>

----
== 用法 ==
你需要传入一些参数，包括：
* 宽度：地图的显示宽度，可以是任何有效的 html 单位。默认 100%。
* 高度：地图的显示高度，可以是任何有效的 html 单位。默认 unset。
* 缩放：缩放级别，数值越小缩放越大。默认 900。
* 线路：只显示某条线路。默认 undefined。

== 例子 ==
因为设计原因，此模板无法在同一个页面上加载两次。
<nowiki>{{铁路|宽度=50%|缩放=700|线路=1}}</nowiki>

== 关于增加站点 ==
你可以在代码开头参数列表中添加站点，在站点列表内添加你的站点并根据和主城（0, 0）的相对关系设置距离坐标。在添加完毕后将站点添加到线路列表内即可。
如果搞不明白可以叫管理（小声

</noinclude>

DHW WIKI - 用户贡献 [zh-cn]

模板:铁路