|
|
| （未显示2个用户的4个中间版本） |
| 第1行： |
第1行： |
| [[Category:公共设施]] | | [[Category:公共设施]]<br/> |
| {{未完成}} | | {{未完成}}<br/> |
| <html> | | {{铁路}}<br/> |
| | | 图例:<br/> |
| <head>
| | {{角标|背景颜色=#B02E26|文字颜色=#FFFFFF|内容=1号线}} |
| <style type="">
| | {{角标|背景颜色=#3C44AA|文字颜色=#FFFFFF|内容=2号线}} |
| canvas{
| | {{角标|背景颜色=#FED83D|文字颜色=#000000|内容=3号线}} |
| width: 100%
| | {{角标|背景颜色=#169C9C|文字颜色=#FFFFFF|内容=4号线}} |
| }
| | {{角标|背景颜色=#8932B8|文字颜色=#FFFFFF|内容=5号线}} |
| </style>
| | {{角标|背景颜色=#C74EBD|文字颜色=#FFFFFF|内容=6号线}} |
| <meta charset="utf-8">
| | {{角标|背景颜色=#5E7C16|文字颜色=#FFFFFF|内容=8号线}}<br/> |
| <title>Metro Map!</title>
| |
| </head> | |
| | |
| <body>
| |
| <canvas id="MainMap" width="0" height="0">Oops!</canvas>
| |
| <script>
| |
| window.dataset = {
| |
| "lines": {
| |
| "1": {
| |
| "color": "#B02E26",
| |
| "route": [
| |
| { "SCZCT": "" },
| |
| { "CZHCT": "" },
| |
| { "NNCNL": "" },
| |
| { "SPAWN": "" },
| |
| { "MNTDY": "" },
| |
| { "EYYCT": "" },
| |
| { "LNYCT": "" }
| |
| ]
| |
| },
| |
| "2": {
| |
| "color": "#3C44AA",
| |
| "route": [
| |
| { "WTCCT": "" },
| |
| { "LNYCT": "" },
| |
| { "WUMIN": "" },
| |
| { "XJIAN": "" },
| |
| { "PGNUN": "" }
| |
| ]
| |
| },
| |
| "2支线": {
| |
| "color": "#3C44AA",
| |
| "route": [
| |
| { "WUMIN": "" },
| |
| { "STRHD": "" },
| |
| { "BREAD": "" }
| |
| ]
| |
| },
| |
| "3": {
| |
| "color": "#FED83D",
| |
| "route": [
| |
| { "SPAWN": "" },
| |
| { "NNCNL": "" },
| |
| { "pos": [0, 4], "stat": "planned" },
| |
| { "INITS": "" },
| |
| { "KEMOW": "" },
| |
| { "pos": [8, 6], "stat": "planned" },
| |
| { "YXLAN": "" }
| |
| ],
| |
| "stat": "planned"
| |
| },
| |
| "4": {
| |
| "color": "#169C9C",
| |
| "route": []
| |
| },
| |
| "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" },
| |
| { "ENSHM": "" },
| |
| { "CINDA": "" },
| |
| { "XNMCT": "" },
| |
| { "pos": [-2, 4], "stat": "planned" },
| |
| { "GJHOM": "" },
| |
| { "KEMOW": "" },
| |
| { "pos": [8, 6], "stat": "planned" },
| |
| { "KMRPK": "" },
| |
| { "LINDA": "" },
| |
| { "XYHOM": "" },
| |
| { "BREAD": "" },
| |
| { "ICERF": "" }
| |
| ]
| |
| },
| |
| "8": {
| |
| "color": "#5E7C16",
| |
| "route": []
| |
| }
| |
| },
| |
| "stations": {
| |
| "ACBTF": {
| |
| "label": "古战场",
| |
| "pos": [-8, 2],
| |
| "stat": "planned"
| |
| },
| |
| "BREAD": {
| |
| "label": "面包",
| |
| "pos": [8, -6],
| |
| "stat": "planned"
| |
| },
| |
| "CINDA": {
| |
| "label": "工业区空置域",
| |
| "pos": [-6, 6],
| |
| "stat": "planned"
| |
| },
| |
| "CZHCT": {
| |
| "label": "赐召",
| |
| "pos": [-2, 2],
| |
| "stat": "finished"
| |
| },
| |
| "ENSHM": {
| |
| "label": "满天星家东",
| |
| "pos": [-6, 8],
| |
| "stat": "planned"
| |
| },
| |
| "EYYCT": {
| |
| "label": "漪阳东",
| |
| "pos": [0, -4],
| |
| "stat": "finished"
| |
| },
| |
| "GJHOM": {
| |
| "label": "烧仙草家",
| |
| "pos": [-2, 6],
| |
| "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": "finished"
| |
| },
| |
| "LINDA": {
| |
| "label": "轻工业区",
| |
| "pos": [8, -2],
| |
| "stat": "planned"
| |
| },
| |
| "LNYCT": {
| |
| "label": "临漪",
| |
| "pos": [0, -6],
| |
| "stat": "finished"
| |
| },
| |
| "MNTDY": {
| |
| "label": "定漪山",
| |
| "pos": [0, -2],
| |
| "stat": "finished"
| |
| },
| |
| "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, 12],
| |
| "stat": "planned"
| |
| },
| |
| "SCZCT": {
| |
| "label": "赐召南",
| |
| "pos": [-2, 0],
| |
| "stat": "planned"
| |
| },
| |
| "SPAWN": {
| |
| "label": "主城",
| |
| "pos": [0, 0],
| |
| "stat": "finished"
| |
| },
| |
| "STRHD": {
| |
| "label": "要塞",
| |
| "pos": [6, -6],
| |
| "stat": "planned"
| |
| },
| |
| "SZHCT": {
| |
| "label": "汕州",
| |
| "pos": [-14, 10],
| |
| "stat": "planned"
| |
| },
| |
| "WTCCT": {
| |
| "label": "天策西",
| |
| "pos": [-2, -6],
| |
| "stat": "planned"
| |
| },
| |
| "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 tilelen = 120
| |
| 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 * tilelen), Math.round(y * tilelen)]
| |
| }
| |
| | |
| function drawMap(mapData) {
| |
| let ctx = this.getContext("2d")
| |
| 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": LIGHTGRAY }
| |
| 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
| |
| for (let link in links) {
| |
| let [x1, y1, x2, y2] = link.split(",")
| |
| let linklen = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
| |
| link = links[link]
| |
| for (let rail in link) {
| |
| let lw = 0.1
| |
| let dl = lw * (rail - (link.length - 1) / 2) * 1.1
| |
| let [dx, dy] = [- (y2 - y1) / linklen * dl, (x2 - x1) / linklen * dl]
| |
| let [startx, starty] = canvPos((Number(x1) + Number(dx)), (Number(y1) + Number(dy)))
| |
| let [stopx, stopy] = canvPos((Number(x2) + Number(dx)), (Number(y2) + Number(dy)))
| |
| ctx.beginPath()
| |
| ctx.moveTo(startx, starty)
| |
| ctx.lineTo(stopx, stopy)
| |
| ctx.lineWidth = lw * tilelen
| |
| ctx.lineCap = "square"
| |
| ctx.strokeStyle = link[rail][1]
| |
| ctx.stroke()
| |
| }
| |
| }
| |
| // Draw stations
| |
| for (let station in mapData.stations) {
| |
| station = mapData.stations[station]
| |
| let stationColor = BLACK
| |
| if (station.stat == "planned") stationColor = LIGHTGRAY
| |
| let name = station.label
| |
| let pos = canvPos(station.pos[0], station.pos[1])
| |
| let [x, y] = pos
| |
| ctx.beginPath()
| |
| ctx.lineWidth = 1
| |
| ctx.strokeStyle = stationColor
| |
| ctx.arc(x, y, 0.225 * tilelen, 0, 2 * Math.PI)
| |
| ctx.fillStyle = stationColor
| |
| ctx.fill()
| |
| ctx.stroke()
| |
| ctx.beginPath()
| |
| ctx.arc(x, y, 0.15 * tilelen, 0, 2 * Math.PI)
| |
| ctx.fillStyle = WHITE
| |
| ctx.fill()
| |
| ctx.stroke()
| |
| ctx.font = Math.round(0.3 * tilelen) + "px Arial"
| |
| pos = canvPos(station.pos[0] + 0.2, station.pos[1] + 0.2)
| |
| x = pos[0]
| |
| y = pos[1]
| |
| ctx.fillStyle = stationColor
| |
| ctx.fillText(name, x, y)
| |
| }
| |
| }
| |
| | |
| let minx = 0, miny = 0, maxx = 0, maxy = 0
| |
| | |
| for (let station in dataset.stations) {
| |
| | |
| station = dataset.stations[station]
| |
| let [x, y] = station.pos
| |
| if (x > maxx) { maxx = x }
| |
| else { if (x < minx) { minx = x } }
| |
| if (y > maxy) { maxy = y }
| |
| else { if (y < miny) { miny = y } }
| |
| }
| |
| | |
| // [minx, miny, maxx, maxy] = [minx - 1, miny - 1, maxx + 1, maxy + 1]
| |
| | |
| window.mainMap = document.getElementById("MainMap")
| |
| mainMap.setAttribute("width", (maxx - minx + 3) * tilelen)
| |
| mainMap.setAttribute("height", (maxy - miny + 2) * tilelen)
| |
| | |
| mainMap.drawMap = drawMap
| |
| mainMap.drawMap(dataset)
| |
| </script>
| |
| </body>
| |
| | |
| </html> | |
