北京地鐵圖

北京地鐵圖，基于svg開發(fā)，支持PC、移動(dòng)端多種瀏覽器。

• 線上開源地址 https://github.com/StavinLi/beiJingSubway 點(diǎn)個(gè)贊吧！

---

項(xiàng)目介紹

• 技術(shù)點(diǎn)

1.node代理請求https://map.bjsubway.com/數(shù)據(jù)

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

2.請求結(jié)果XML格式解析

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

3.gulp構(gòu)建工具，文件打包

//監(jiān)控文件變化 gulp.task('watch', function() {gulp.watch(["src/css/*.css", "src/js/*.js"], ['default']); });gulp.task('default', function(cb) {runSequence('other', ['css', 'js'], 'html')(cb); })

• 數(shù)據(jù)來源–北京地鐵官網(wǎng)

項(xiàng)目安裝

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

項(xiàng)目運(yùn)行

1.環(huán)境依賴 npm i
2.本地運(yùn)行 npm run start
3.打包運(yùn)行 npm run build

目錄結(jié)構(gòu)描述

├── Readme.md //help ├── dest //發(fā)布包 │ ├── css │ ├── js │ └── *.html ├── libs //第三方文件 ├── node_modules ├── rev //靜態(tài)版本json ├── src //開發(fā)包 └── gulpfile.js

更新記錄

2018.12.21

- 新增起止點(diǎn)轉(zhuǎn)換

2018.12.20

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

2018.12.19

- 新增站點(diǎn)hover 信息

2018.12.10

- require("open") 本地運(yùn)行打開新窗口- 西二旗坐標(biāo)空格導(dǎo)致移動(dòng)端顯示錯(cuò)誤

2018.12.07

- node 跨求請求xml- 跨域 pathRewrite

2018.12.06

- init commit

總結(jié)注意

1.line 標(biāo)簽西二旗屬性 lb="西二旗" x="757 " 其中x屬性中空格在移動(dòng)端造成坐標(biāo)失效，解決辦法： $(this).attr("x")*1

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。