地铁维修线路图 JavaScript

d3.js 绘制北京市地铁线路状况图(部分)

地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件包括两部分,一部分是站点信息,另一部分就是线路信息,由于时间问题,我只写了5条线路(10号线站点太tm多了): 然后就是构造类文件,不多说: 之后就是主要的操作线路图的逻辑,还画了一个天安门. 好了废话不多说,下面上代码 1.主要代码 <!DOCTYPE html> <html lang=&

HTML5大数据可视化效果（二）可交互地铁线路图

前言最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的地铁线路图,能拖能拽的,还和电子地图做了交互.哥决定把小弟的成果纳入“HTML5大数据可视化效果”系列,以示鼓励(P.S. 其实还挺有压力的,后浪推前浪,新人赶旧人.我们这些老鸟也得注意,免得让00后给抢了饭碗) 效果图对比网上的地铁图还是很多的,小弟选了这张比较新的做参考.想当年哥来魔都打拼时,

基于 HTML5 Canvas 的交互式地铁线路图

前言前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友.当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步. 效果图 http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多,要全部展示

快速开发 HTML5 交互式地铁线路图

前言前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友.当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步. 效果图 http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多,要全部展示

canves绘制北京地铁线路图，包括线路绘制，优先路线，单路径选择。

canves绘制北京地铁线路图,包括线路绘制,优先路线,单路径选择. 即将推出,后台涵盖各种语言,php,C#,java,nodejs等.

R语言绘制沈阳地铁线路图

##使用leaflet绘制地铁线路图,要求 ##(1)图中绘制地铁线路 library(dplyr) library(leaflet) library(data.table) stations<-read.csv("C:\\Users\\BIGDATA\\Desktop\\文件\\BigData\\R语言\\相关作业文档\\3\\第五次实训课数据\\systation.csv"); stations <- arrange(stations,line,line_id) lin

结对开发项目--石家庄地铁web版

一.功能要求 1.数据库设计:将石家庄地铁线路图的各个线路,各个站点,换乘信息等用数据库的形式保存起来,应该保存的信息有 {线路号,线路的各个站名,车站的换乘信息}. 2.站点查询:用户可以输入任一一条线路或输入出发地和目的地信息,可以查询到相关内容. 二.合作对象及开发日志合作对象:符满迪.何祺祺开发日志: 日期开始时间结束时间中断时间净时间备注 2019.3.30 9:00 16:00 11:30 3.5h 设计数据库,实现地图的建立 2019.4.2 8:00 9:35 无

javascript开源大全

javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJS Flash视频播放器-JW-PLAYER jQuery表单插件-jQuery.form jQuery-File-Upload 可视化HT

基于ionic+angulajs的混合开发实现地铁APP

基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一.项目简介在该项目中的地铁app是基于ionic+angularjs开发的一款软件,其中使用了高德地图的开放接口(地铁JS API)网址为:http://lbs.amap.com/api/subway-api/subway-summary/.在该app中主要实现了,地铁线路图的整体展示,起点终点设置

假期实践作业：从IT角度看地铁

实习时间:2016/02/23——2016/02/26 实习地点:京港地铁14号线实习报告: 大学四年过得真快,转眼就大三了,大学前两年半的生活可谓多姿多彩,从不懂计算机到对编程感兴趣,期待得最多的就是考试能有个好成绩!在java课上也编出来了一个小游戏算是个不小的收货,这次寒假老师留了个假期实践作业,我认为实践主要是为了增长我们的社会知识 ,锻炼我们的能力,为我们以后走上社会打基础,这次假期本来打算和同学一起去奶茶店打工,中途还去办了健康证,但是由于奶茶店装修延误了,所以没去成,但是塞

结对编程-地铁续（有种上个学期OO的既视感）

我们组比较特殊..三人结对 github:https://github.com/qingchanghan/WPFUI_Metro po一张照片: 石浩然,韩青长.陈彦吉 (台式机真的很高端,分屏贼帅) 1.结对编程的优点和缺点: 优点: 随时沟通交流,当遇到复杂的代码逻辑时,两个人比一个人能更好地理清代码思路. 一个人乱了另一个人不会乱,或者很难出现两个人一起乱,正确率整体.代码质量很高. 可以实现编程接力,在确定好todo项目后,可以交接工作,续航时间更长.一节更比六节长. 在心理上相互鼓励相

二、JavaScript语言--JS实践--商城分类导航效果

商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

【javascript基础】5、创建对象

前言今天从家里回到了学校,在家呆了十天,胖了几斤的重量,又折腾回学校了,春节回家真是艰辛的路途.随便扯扯我的往返行程:为了省钱我没有选择直飞到长春往返都是到北京转的,这样我和女朋友可以节省4000块左右.1月24号深圳-飞机-北京(飞机晚点1个小时),到北京已经凌晨两点多,机场大巴就剩两个了,做一个大巴到了市里在打的到同学那100块没了,到同学那(天通苑附近)都三点了,吃饭喝酒(一瓶牛栏山+2瓶啤酒)到了五点,睡觉到十点,起床去打了两个小时的篮球,回来没吃饭地铁去车站,差一点没有赶上动车去长春

javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById("TabMenuCon72").style.display="

【读书笔记】读《JavaScript设计模式》之装饰者模式

一.定义装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装饰者提供比继承更有弹性的替代方案). 装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的. 二.举例 2.1 装饰者是一种实现继承的替代方案.当脚本运行时,在子类中添加行为会影响原有类所有的实例,而装饰者却不然.取而代之的是它能给不同对象各自添加新

【读书笔记】读《JavaScript设计模式》之工厂模式

一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它使用一个方法来决定究竟要实例化哪个具体的类.这里介绍简单工厂模式(动态选择并生成实例)及真正的工厂模式(亦称工厂方法),后者使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型. 一.简单工厂拿生产自行车举例子,先看它的类及对应的方法—— var Bicycle =

Jquery动画效果--地铁站名指示等效果

源码参考:源码爱好者--jQuery仿地铁线路指示灯效果,经修改和美化,特此记录一下. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

TWaver初学实战——基于HTML5的交互式地铁图

每天坐地铁,经常看地铁图,有一天突然想到,地铁图不也是一种拓扑结果吗?TWaver到底能与地铁图擦出怎样的火花呢? 想到就干,先到网上找幅参考图.各种风格的地铁图还挺多,甚至有大学生自主设计制作,受到地铁相关人士的认可和赞扬.不过看到他花了3周时间,我就比较同情他了,如果学会了TWaver,我保他连3天都不用就可以完成,而且还是纯矢量.可交互.有动态效果.无失真缩放的拓扑图. 我们就以上面这幅地铁图为模版来进行制作. 一.数据整理俗话说兵马未动粮草先行,没有数据再好的创意也白搭.

ylbtech-SubwayNav(地铁线路导航)-数据库设计

ylbtech-DatabaseDesgin:ylbtech-SubwayNav(地铁线路导航)-数据库设计 DatabaseName:SubwayNav(地铁线路导航) Type:线路导航 1.A,数据库关系图(Database Diagram) 1.B,数据库设计脚本(Database Design Script) 1.B.1,SubwayNav.sql 第一版 -- ============================================= -- ylb:地铁线路导航系统

北京地铁换乘算法(二维坐标系，图的深度搜索)开源下载Android源码、性能最优解

距离2012年11月2日下午2:05:31 已经过去158751270这么多秒了,不小心暴露了我的当前时间. java代码贴出来. private static long gettimelong() { long result = new Date().getTime() - new Date("2012/11/02 14:05:31").getTime(); return result / 1000; } 接下来是介绍北京地体换乘算法的最优解,比如程序随便运行一下是这样的result

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心

地铁维修线路图 JavaScript

热门专题