d3 交互地铁线路图

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

d3.js 地铁轨道交通项目实战

上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们先看一下百度官方线路图. 就是这样的,今天我们就来完成它的大部分需求,以及地铁公司爸爸提出来的需求. 需求如下:1.按照不同颜色显示地铁各线路,显示对应站点.2.用户可以点击手势缩放和平移(此项目为安卓开发).3.用户在线路menu里点击线路,对应线路平移值屏幕中心并高亮.4.根据后台数据,渲染问题

北京地铁出行线路规划系统项目总结(Java+Flask+Vue实现)

北京地铁出行线路规划系统项目总结 GitHub仓库地址:https://github.com/KeadinZhou/SE-Subway Demo地址:http://10.66.2.161:8080/ (校内网) 项目需求实现一个帮助进行地铁出行路线规划的命令行程序地铁线路图数据需要与执行程序解耦支持查询单条线路的所有站点支持查询任意两站之间通过最少站数的路线算法设计项目中最主要的点在于:找出两个站点之间通过最少站数的路线.该点对应的经典模型是"在一个无向图中找出两点之间的最短路径&q

基于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项目后,可以交接工作,续航时间更长.一节更比六节长. 在心理上相互鼓励相

北京地铁换乘算法(二维坐标系，图的深度搜索)开源下载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

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

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

Dijkstra算法_北京地铁换乘_android实现-附带源码.apk

Dijkstra算法_北京地铁换乘_android实现 android 2.2+ 源码下载 apk下载直接上图片如下: Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法能得出最短路径的最优解,但由于它遍历计算的节点很多,所以效率低. Dijkstra算法是很有代表性的最短路算法,在很多专业课程中都作为基本内容有详细的介绍,如数据结构,图论,运筹学等等.

Java_地铁购票系统

定义了两个类,在Subway类中定义三个私有数据变量,线路号,经过站点,换乘站.以及4个方法分别实现从txt文件中导入线路信息:输出线路信息:查询两个站点经过站点数,并输出经过站点以及在某站换乘几号线:计算票价.在SubwayManger中打印界面并根据用户选择调用相关的函数. Subway: package subway; import java.util.*; import java.io.*; import java.math.*; class Subway { private Strin

基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

前言通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及的一款应用.虽然这个 Demo 是结合 OpenLayers3 的,其实还可推广到与 ArcGIS.百度地图以及 GoogleMap 等众多 GIS 地图引擎融合. 代码生成创建地图 OpenLayers 是一个用于开发 WebGIS 客户端的 JavaScript 包.OpenLayers

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

电信资源管理系统:基于 H5 叠加 OpenLayers3 GIS

前言通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及的一款应用.虽然这个 Demo 是结合 OpenLayers3 的,其实还可推广到与 ArcGIS.百度地图以及 GoogleMap 等众多 GIS 地图引擎融合. http://www.hightopo.com/demo/openlayers/ 代码生成创建地图 OpenLayers 是一

BUAA_OO第四单元总结性博客作业——UML(Floyd实现规则检查？）

一.架构设计 1.UML第一次作业——类图第一次作业基于不同element在UML规格中的从属关系来设计架构.继承了UmlInteraction接口的MyUmlInteraction类是主要的交互层.在其构造函数中对加入进来的每一个element进行分析,判断它的ElementType并根据parentId以及其他解析出的性质决定它的存储位置. 对于不同的ElementType,我将其分为三类: 第一类是有所述其他元素的,代表java中具体的类的element,如UmlClass,UmlOpe

IOS ScrollView放大缩小点击位置并居中

项目中的一个优化案例,提升用户体验,对地铁线路图点击放大.缩小,并且点击位置居中: 正常ScrollView 我们点击某一点比如屏幕右侧,想要点的位置向左移动到中心位置,很简单只有算出该点位置距中心位置的距离:point.x - contentOffset.x -SCREEN_WIDTH*0.5,然后问设置contentOffset.x+相应的距离即可.上下也同理. 但是这里要处理的双击放大的同时,也要实现上面的效果.经过单步调试,查看 - (void)scrollViewDidScroll:

d3 交互地铁线路图

热门专题