基於svg繪製北京地鐵圖（官網數據來源）

北京地鐵圖

北京地鐵圖，基於svg開發，支持PC、移動端多種瀏覽器。

• 線上開源地址 https://github.com/StavinLi/beiJingSubway 點個贊吧！

---

項目介紹

• 技術點

1.node代理請求https://map.bjsubway.com/數據

app.use('/', proxy({
    target: 'https://map.bjsubway.com/',
    pathRewrite: {
        '^/apis': '' // 重寫請求，比如我們源訪問的是api/old-path，那麼請求會被解析爲/api/new-path
    },
    changeOrigin: true
}));

2.請求結果XML格式解析

$.ajax({
    url: "/apis/subwaymap/beijing.xml",
    dataType: 'xml',
    type: 'GET',
    timeout: 5000,
    success: function(data) {
        var ls = $(data).find("sw").children()
        ...
    })
});

3.gulp構建工具，文件打包

//監控文件變化
gulp.task('watch', function() {
    gulp.watch(["src/css/*.css", "src/js/*.js"], ['default']);
});

gulp.task('default', function(cb) {
    runSequence('other', ['css', 'js'], 'html')(cb);
})

• 數據來源–北京地鐵官網

項目安裝

git clone https://github.com/StavinLi/beiJingSubway.git

項目運行

1.環境依賴 npm i
2.本地運行 npm run start
3.打包運行 npm run build

目錄結構描述

├── Readme.md                   //help
├── dest                        //發佈包
│   ├── css
│   ├── js                
│   └── *.html        
├── libs                        //第三方文件
├── node_modules                  
├── rev                         //靜態版本json
├── src                         //開發包
└── gulpfile.js

更新記錄

2018.12.21

    -  新增起止點轉換

2018.12.20

    -  新增自定義線路
    -  修復少換乘切換相同換乘次數時，未綜合考慮時間因素
    -  新增耗時、途徑、換乘、票價

2018.12.19

    -  新增站點hover 信息

2018.12.10

    -  require("open") 本地運行打開新窗口
    -  西二旗座標空格導致移動端顯示錯誤

2018.12.07

    -  node 跨求請求xml
    -  跨域 pathRewrite

2018.12.06

    -  init commit

總結注意

1.line 標籤西二旗屬性 lb="西二旗" x="757 " 其中x屬性中空格在移動端造成座標失效，解決辦法： $(this).attr("x")*1