基于svg开发绘制地铁图

中国地铁图

中国地铁图，基于svg开发，支持PC、移动端多种浏览器。覆盖北上广多个城市。

• 线上开源地址 https://github.com/StavinLi/the-subway-of-china 点个赞吧！
• 项目预览 https://stavinli.github.io/the-subway-of-china/src/index.html

---

项目介绍

• 技术点

1.svg 全程绘制

var { lb, lc, lbx, lby } = l_xmlattr
var path = $.svg('path').appendTo('#g-box')
path.attr({
    d: $.trim(dStr),
    lb: lb
}).css("stroke", "#" + lc.split("x")[1]);
var text = $.svg('text').appendTo('#g-box').html(lb).addSvgClass("subway-name")
text.attr({
    x: lbx - 10,
    y: lby + 15,
}).css("fill", "#" + lc.split("x")[1]);

2.调用svg-pan-zoom.js以及hammer.js缩放

window.panZoom = svgPanZoom('#mobile-svg', {
 zoomEnabled: true,
    controlIconsEnabled: false,
    fit: 1,
    center: 1,
    customEventsHandler: eventsHandler
});

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

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

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

• 数据来源–百度地图接口

var BMapSub = {}
BMapSub._rd = {};
var timeStamp = (Math.random() * 100000).toFixed(0);
var checkUrl = "https://api.map.baidu.com/?qt=subways&c=" + cityCode + "&format=json&ak="+ 密匙 +"&v=3.0&from=jsapi&callback=BMapSub._rd._cbk" + timeStamp
$.getScript(checkUrl)

项目安装

git clone https://github.com/StavinLi/the-subway-of-china.git

项目运行

1.环境依赖 node v6.10.2
2.运行 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=

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)