基于svg绘制北京地铁图（官网数据来源）

北京地铁图

北京地铁图，基于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绘制北京地铁图（官网数据来源）相关推荐

基于html5绘制上海地铁图 - 路况信息展示
为什么80%的码农都做不了架构师?>>> 前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现交通图介 ...
cufflinks基于QuantFig绘制高级金融图
cufflinks基于QuantFig绘制高级金融图 # import cufflinks as cfcf.set_config_file(offline=True, world_readable=T ...
实现美图官网活动卡片——html、css
实现美图官网活动卡片--html.css 通过使用HTML+CSS实现美图官网的卡片样式单行文字溢出不换行结尾省略号 p{whhite-space:normal;text-overflow:elli ...
python爬虫网络数据包_Python爬虫之多线程图虫网数据爬取（十六）
Python爬虫之多线程图虫网数据爬取(十六) 发布时间:2019-05-14 10:11, 浏览次数:289 , 标签: Python 原创不易,转载前请注明博主的链接地址:Blessy_Zhu h ...
【Python 实战基础】如何绘制树状图展示Python数据分析师的知识结构
目录一.实战场景二.主要知识点文件读写基础语法字符串处理文件生成数据构建三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景:如何绘制树状图展示Python ...
scrapy爬虫实战——米哈游官网数据爬取
项目总览前言项目建立爬虫代码编写爬虫运行导出到Excel 后记前言 scrapy是一个强大的爬虫框架,熟练地使用它几乎可以随心所欲地抓取任何网页上想要获得的数据.笔者初学爬虫,需要项目练手 ...
绘制地铁线路html,基于HTML5技术绘制上海地铁图
某市政项目用到地铁图展现,展现地铁站点以及相关信息流,使用Qunee组件能够很好的解决这类需求,作出优美的展示,下面以上海2012地铁图为例,效果以下:node 示例讲解首先须要解决数据问题,能够从 ...
自动绘图html,基于HTML5技术绘制上海地铁图
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解首先需要解决数据问题,可以从维基百科 ...
html5地图连线原理,基于html5技术绘制上海地铁图 – 双车道路况信息
上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现交通图介绍路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太 ...

基于svg绘制北京地铁图（官网数据来源）

北京地铁图

项目介绍

项目安装

项目运行

目录结构描述

更新记录

2018.12.21

2018.12.20

2018.12.19

2018.12.10

2018.12.07

2018.12.06

总结注意

基于svg绘制北京地铁图（官网数据来源）相关推荐

最新文章

热门文章