北京地鐵圖

北京地鐵圖，基于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

總結

以上是生活随笔為你收集整理的基于svg绘制北京地铁图（官网数据来源）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。