the-subway-of-china
中国地铁图
项目介绍
中国地铁图，支持PC、移动端多种浏览器。覆盖北上广多个城市。
-
技术点
- svg绘制
- 调用svg-pan-zoom.js以及hammer.js缩放
- gulp文件打包
-
数据来源
- 百度地图
项目运行
-
环境依赖
- node v6.10.2
-
部署步骤
- npm install //安装node运行环境
- gulp //前端编译
目录结构描述
├── Readme.md //help
├── dest //发布包
│ ├── css
│ ├── js
│ └── *.html
├── libs //第三方文件
├── node_modules
├── rev //静态版本json
├── src //开发包
└── gulpfile.js
页面预览
- 在线预览 点个赞吧！
更新记录
2018.7.17
- first-init 新增gitHub预览设置
2018.7.23
- gulp打包上线
2018.7.24
- 解决cnpm install 后node_modules包无法push，改用npm install
- 更改依赖配置，新增版本号?v=
- 新增gulp-sourcemaps地图
2018.7.30
- indexOf()==-1替换为includes()：返回布尔值，表示是否找到了参数字符串。
2018.12.06
- 修复香港地区地铁图无法显示问题
- 字体类型Helvetica, Arial, sans-serif-->黑体
- 标签替换ellipse-->circle
- 样式stroke-width调整： path 4 --> 5 ; cicle 2.5 --> 1
项目总结
- 1.stroke color -->加“#”
- 2.svg image标签路径赋值 -->image[0].href.baseVal = ;
- 3.pc微信内置浏览器不显示-->es6兼容
- 4.中转站存在text内容及image相同重叠问题 -->repeatStr.includs(uid)