中国地铁图,基于svg开发,支持PC、移动端多种浏览器。覆盖北上广多个城市。
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
- first-init 新增gitHub预览设置
- gulp打包上线
- 解决cnpm install 后node_modules包无法push,改用npm install
- 更改依赖配置,新增版本号?v=
- indexOf()==-1替换为includes():返回布尔值,表示是否找到了参数字符串。
- 修复香港地区地铁图无法显示问题
- 字体类型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)