编辑讨论页面历史

模板:铁路：修订间差异

（创建页面，内容为“<html> <body> <div id="MainMap"></div> <script> window.dataset = { "lines": { "1": { "color": "#B02E…”）
 
（Update Line 1 & 6）
 
（未显示3个用户的15个中间版本）
第2行： 第2行：


<body>
<body>
     <div id="MainMap"></div>
    <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>
     <script>
         window.dataset = {
         window.dataset = {
第9行： 第47行：
                     "color": "#B02E26",
                     "color": "#B02E26",
                     "route": [
                     "route": [
                         { "SCZCT": "" },
                         { "QIWAN": "" },
                        { "pos": [-6, 12], "stat": "planned" },
                        { "SXSBZ": "" },
                        { "ENSHM": "" },
                        { "CINDA": "" },
                        { "XNMCT": "" },
                        { "GJHOM": "" },
                         { "CZHCT": "" },
                         { "CZHCT": "" },
                         { "NNCNL": "" },
                         { "NNCNL": "" },
第34行： 第78行：
                         { "WUMIN": "" },
                         { "WUMIN": "" },
                         { "STRHD": "" },
                         { "STRHD": "" },
                         { "BREAD": "" }
                         { "BREAD": "" },
                        { "FGLIN": "" }
                     ]
                     ]
                 },
                 },
第45行： 第90行：
                         { "INITS": "" },
                         { "INITS": "" },
                         { "KEMOW": "" },
                         { "KEMOW": "" },
                         { "UKN03": "" },
                         //{ "UKN03": "" },
                         { "YXLAN": "" }
                         { "YXLAN": "" }
                     ],
                     ],
第54行： 第99行：
                     "route": [
                     "route": [
                         { "HINDA": "" },
                         { "HINDA": "" },
                         { "UKN01": "" },
                         //{ "UKN01": "" },
                         { "KMRPK": "" },
                         { "KMRPK": "" },
                         { "SPAWN": "" },
                         { "SPAWN": "" },
                         { "SCZCT": "" },
                         { "SCZCT": "" },
                         { "BAIZE": "" },
                         { "BAIZE": "" },
                         { "STADM": "" },
                         //{ "STADM": "" },
                         { "UKN02": "" }
                         //{ "UKN02": "" }
                    ]
                },
                "4支线": {
                    "color": "#169C9C",
                    "route": [
                        { "STADM": "" },
                        { "ACBTF": "" }
                     ]
                     ]
                 },
                 },
                //"4支线": {
                //      "color": "#169C9C",
                //      "route": [
                //          { "STADM": "" },
                //          { "ACBTF": "" }
                //      ]
                //},
                 "5": {
                 "5": {
                     "color": "#8932B8",
                     "color": "#8932B8",
第89行： 第134行：
                     "color": "#C74EBD",
                     "color": "#C74EBD",
                     "route": [
                     "route": [
                         { "QIWAN": "" },
                         { "CZHCT": "" },
                         { "pos": [-6, 12], "stat": "planned" },
                         { "pos": [-1, 5], "stat": "planned" },
                        { "ENSHM": "" },
                        { "CINDA": "" },
                        { "XNMCT": "" },
                        { "pos": [-2, 4], "stat": "planned" },
                        { "GJHOM": "" },
                         { "KEMOW": "" },
                         { "KEMOW": "" },
                         { "UKN03": "" },
                         { "pos": [8, 6], "stat": "planned" },
                         { "KMRPK": "" },
                         { "KMRPK": "" },
                         { "LINDA": "" },
                         { "LINDA": "" },
第104行： 第144行：
                         { "ICERF": "" }
                         { "ICERF": "" }
                     ]
                     ]
                 },
                 }//,
                 "8": {
                 // "8": {
                    "color": "#5E7C16",
                //    "color": "#5E7C16",
                    "route": [
                //    "route": [
                        { "ENSHM": "" },
                //        { "ENSHM": "" },
                        { "WNSHM": "" },
                //        { "WNSHM": "" },
                        { "pos": [-12, 8], "stat": "planned" },
                //        { "pos": [-12, 8], "stat": "planned" },
                        { "YGHOM": "" }
                //        { "YGHOM": "" }
                    ]
                //    ]
                 }
                 // }
             },
             },
             "stations": {
             "stations": {
第128行： 第168行：
                 "BREAD": {
                 "BREAD": {
                     "label": "面包",
                     "label": "面包",
                    "owner": "732Bread",
                     "pos": [8, -6],
                     "pos": [8, -6],
                     "stat": "planned"
                     "stat": "finished"
                 },
                 },
                 "CINDA": {
                 "CINDA": {
                     "label": "工业区空置域",
                     "label": "缺口空置域",
                     "pos": [-6, 6],
                     "pos": [-6, 6],
                     "stat": "planned"
                     "stat": "finished"
                 },
                 },
                 "CZHCT": {
                 "CZHCT": {
                     "label": "赐召",
                     "label": "赐召",
                    "owner": "Stapx_Steve",
                     "pos": [-2, 2],
                     "pos": [-2, 2],
                     "stat": "finished"
                     "stat": "finished"
                 },
                 },
                 "ENSHM": {
                 "ENSHM": {
                     "label": "满天星家东",
                     "label": "横光",
                     "pos": [-6, 8],
                     "pos": [-6, 8],
                     "stat": "planned"
                     "stat": "planned"
第149行： 第191行：
                     "label": "漪阳东",
                     "label": "漪阳东",
                     "pos": [0, -4],
                     "pos": [0, -4],
                    "stat": "planned"
                },
                "FGLIN": {
                    "label": "枫霖",
                    "pos": [10, -6],
                     "stat": "finished"
                     "stat": "finished"
                 },
                 },
                 "GJHOM": {
                 "GJHOM": {
                     "label": "烧仙草家",
                     "label": "托伊蕾特",
                     "pos": [-2, 6],
                     "pos": [-2, 4],
                     "stat": "planned"
                     "stat": "planned"
                 },
                 },
第179行： 第226行：
                     "label": "烟草公园",
                     "label": "烟草公园",
                     "pos": [8, 0],
                     "pos": [8, 0],
                     "stat": "planned"
                     "stat": "finished"
                 },
                 },
                 "LINDA": {
                 "LINDA": {
第194行： 第241行：
                     "label": "定漪山",
                     "label": "定漪山",
                     "pos": [0, -2],
                     "pos": [0, -2],
                     "stat": "finished"
                     "stat": "planned"
                 },
                 },
                 "MUYLN": {
                 "MUYLN": {
第209行： 第256行：
                     "label": "鸽联",
                     "label": "鸽联",
                     "pos": [4, -10],
                     "pos": [4, -10],
                     "stat": "planned"
                     "stat": "finished"
                 },
                 },
                 "QIWAN": {
                 "QIWAN": {
                    "coord": [416, 64, -3869],
                     "label": "绮湾",
                     "label": "绮湾",
                     "pos": [-2, 12],
                    "owner": "sjfhsjfh",
                     "stat": "planned"
                     "pos": [-2, 16],
                     "stat": "finished"
                 },
                 },
                 "SCZCT": {
                 "SCZCT": {
第226行： 第275行：
                     "stat": "finished"
                     "stat": "finished"
                 },
                 },
                 "STADM": {
                 //"STADM": {
                    "label": "玩家体育场",
                //    "label": "玩家体育场",
                    "pos": [-8, 0],
                //    "pos": [-8, 0],
                    "stat": "planned"
                //    "stat": "planned"
                 },
                 //},
                 "STRHD": {
                 "STRHD": {
                     "label": "要塞",
                     "label": "天德池",
                     "pos": [6, -6],
                     "pos": [6, -6],
                     "stat": "planned"
                     "stat": "finished"
                },
                "SXSBZ": {
                    "label": "山心水背",
                    "pos": [-6, 10],
                    "stat": "finished"
                 },
                 },
                 "SZHCT": {
                 "SZHCT": {
第241行： 第295行：
                     "stat": "planned"
                     "stat": "planned"
                 },
                 },
                 "UKN01": {
                 //"UKN01": {
                    "label": "Unknown01",
                //    "label": "Unknown01",
                    "pos": [10, 0],
                //    "pos": [10, 0],
                    "stat": "planned"
                //    "stat": "planned"
                 },
                 //},
                 "UKN02": {
                 //"UKN02": {
                    "label": "Unknown02",
                //    "label": "Unknown02",
                    "pos": [-8, -4],
                //    "pos": [-8, -4],
                    "stat": "planned"
                //    "stat": "planned"
                 },
                 //},
                 "UKN03": {
                 //"UKN03": {
                    "label": "Unknown03",
                //    "label": "Unknown03",
                    "pos": [8, 6],
                //    "pos": [8, 6],
                    "stat": "planned"
                //    "stat": "planned"
                 },
                 //},
                 "WNSHM": {
                 //"WNSHM": {
                    "label": "满天星家西",
                //    "label": "满天星家西",
                    "pos": [-10, 8],
                //    "pos": [-10, 8],
                    "stat": "finished"
                //    "stat": "finished"
                 },
                 //},
                 "WTCCT": {
                 "WTCCT": {
                     "label": "天策西",
                     "label": "天策西",
第267行： 第321行：
                 },
                 },
                 "WUMIN": {
                 "WUMIN": {
                     "label": "梧鸣",
                     "label": "地下铁",
                     "pos": [2, -6],
                     "pos": [2, -6],
                     "stat": "planned"
                     "stat": "finished"
                 },
                 },
                 "XJIAN": {
                 "XJIAN": {
第282行： 第336行：
                 },
                 },
                 "XYHOM": {
                 "XYHOM": {
                     "label": "逍遥家",
                     "label": "梦渊",
                     "pos": [8, -4],
                     "pos": [8, -4],
                     "stat": "planned"
                     "stat": "planned"
第340行： 第394行：
                 miny = Math.min(miny, y)
                 miny = Math.min(miny, y)
             }
             }
             size = Math.max(Math.abs(maxx) + Math.abs(minx), Math.abs(maxy) + Math.abs(miny)) * 0.55
             size = Math.max(Math.abs(maxx) + Math.abs(minx), Math.abs(maxy) + Math.abs(miny)) * 0.65
             // 计算中心偏移
             // 计算中心偏移
             adx = (minx + maxx) / 2
             adx = (minx + maxx) / 2
第357行： 第411行：
                     }
                     }
                     if (lastpoint != undefined) {
                     if (lastpoint != undefined) {
                         let color = { "finished": mapData.lines[line].color, "planned": LIGHTGRAY }
                         let color = { "finished": mapData.lines[line].color, "planned": mapData.lines[line].color }
                         let stat = "finished"
                         let stat = "finished"
                         if (waypoint.stat == "planned" || lastpoint.stat == "planned") stat = "planned"
                         if (waypoint.stat == "planned" || lastpoint.stat == "planned") stat = "planned"
第451行： 第505行：
                 const point = document.createElementNS('http://www.w3.org/2000/svg','circle')
                 const point = document.createElementNS('http://www.w3.org/2000/svg','circle')
                 point.dataset.raw = station.pos
                 point.dataset.raw = station.pos
                point.dataset.data = JSON.stringify(station)
                 point.setAttribute("cx", 50 + (Number(x) / size * 50) + "%")
                 point.setAttribute("cx", 50 + (Number(x) / size * 50) + "%")
                 point.setAttribute("cy", 50 - (Number(y) / size * 50) + "%")
                 point.setAttribute("cy", 50 - (Number(y) / size * 50) + "%")
第459行： 第514行：
                 point.style.strokeWidth = "0.2rem"
                 point.style.strokeWidth = "0.2rem"


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


                 // <text x="0" y="15" fill="red">I love SVG</text>
                 // <text x="0" y="15" fill="red">I love SVG</text>
第483行： 第538行：


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


         // 初始化
         // 初始化
第493行： 第548行：
         mainMap.setAttribute("viewBox", "0 0 " + view + " " + view)
         mainMap.setAttribute("viewBox", "0 0 " + view + " " + view)
         mainMap.setAttribute("preserveAspectRatio", "xMidYMid meet")
         mainMap.setAttribute("preserveAspectRatio", "xMidYMid meet")
         mainMap.style.width = '100vh'
         mainMap.style.width = '</html>{{{宽度|100%}}}<html>'
        mainMap.style.height = '100%'
       mainMap.style.height = '</html>{{{高度|unset}}}<html>'


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


         div.append(mainMap)
         div.append(mainMap)
第527行： 第582行：


         // 站点悬停事件
         // 站点悬停事件
         function onPointOver(sender) {
         function onPointOver(event, sender) {
            const pop = document.getElementById("pop")
            // 处理元素
             sender.style.r = "1px"
             sender.style.r = "1px"
             sender.style.strokeWidth = "1rem"
             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")
            if (info.owner == undefined) info.owner = "DHW Inf"
            span.innerText = `所属：${info.owner}`
            pop.children[1].append(span)
            span = document.createElement("span")
            if (info.coord == undefined) info.coord = ['?', '?', '?']
            span.innerText = `坐标：${info.coord.join(',')}`
            pop.children[1].append(span)
            span = document.createElement("span")
            span.innerText = `绘图坐标：${info.pos.join(',')}`
            pop.children[1].append(span)
         }
         }
         function onPointLeace(sender) {
         function onPointLeave(sender) {
            const pop = document.getElementById("pop")
            // 处理元素
             sender.style.r = "0.5rem"
             sender.style.r = "0.5rem"
             sender.style.strokeWidth = "0.2rem"
             sender.style.strokeWidth = "0.2rem"
            pop.style.opacity = "0"
         }
         }
     </script>
     </script>
第542行： 第624行：


<noinclude>
<noinclude>
----
----
== 用法 ==
== 用法 ==
第548行： 第631行：
* 高度：地图的显示高度，可以是任何有效的 html 单位。默认 unset。
* 高度：地图的显示高度，可以是任何有效的 html 单位。默认 unset。
* 缩放：缩放级别，数值越小缩放越大。默认 900。
* 缩放：缩放级别，数值越小缩放越大。默认 900。
* 线路：只显示某条线路某条线路。默认 undefined。
* 线路：只显示某条线路。默认 undefined。


== 例子 ==
== 例子 ==
因为设计原因，此模板无法在同一个页面上加载两次。
因为设计原因，此模板无法在同一个页面上加载两次。
  <nowiki>{{铁路|宽度=50%|缩放=700|线路=1}}</nowiki>
  <nowiki>{{铁路|宽度=50%|缩放=700|线路=1}}</nowiki>
== 关于增加站点 ==
你可以在代码开头参数列表中添加站点，在站点列表内添加你的站点并根据和主城（0, 0）的相对关系设置距离坐标，可选的选项还有所有者 "owner" 和实际坐标 "coord"，记得使用正确的js对象语法<del>，缩进也给我写好啊喂</del>。在添加完毕后将站点添加到线路列表内即可。
添加完毕记得预览一下检查是否有问题。
如果搞不明白可以叫管理（小声
</noinclude>
</noinclude>

2023年2月9日 (四) 09:28的最新版本



用法[编辑]

你需要传入一些参数，包括：

  • 宽度：地图的显示宽度，可以是任何有效的 html 单位。默认 100%。
  • 高度：地图的显示高度，可以是任何有效的 html 单位。默认 unset。
  • 缩放：缩放级别，数值越小缩放越大。默认 900。
  • 线路：只显示某条线路。默认 undefined。

例子[编辑]

因为设计原因，此模板无法在同一个页面上加载两次。 

{{铁路|宽度=50%|缩放=700|线路=1}}

关于增加站点[编辑]

你可以在代码开头参数列表中添加站点，在站点列表内添加你的站点并根据和主城（0, 0）的相对关系设置距离坐标，可选的选项还有所有者 "owner" 和实际坐标 "coord"，记得使用正确的js对象语法，缩进也给我写好啊喂。在添加完毕后将站点添加到线路列表内即可。 添加完毕记得预览一下检查是否有问题。 如果搞不明白可以叫管理（小声