`
hiuman
  • 浏览: 52150 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

canvas写的地铁地图

阅读更多
根据的是百度提供的坐标,canvas的坐标是大的坐标在后面,所以跟实际生活方向相反。
所以canvas里的北方在下方,实际生活中北方在上方。
因为根据的是真实坐标,所以跟广州地铁提供的地图不一样。
左侧地图一种写法,右侧地图另一种写法。
左侧可以下拉菜单选择线路查看路线,还可以查询站名属于哪个路线;右侧是全地图。
暂时没有其他功能……欢迎指点。


看代码可以戳链接:
https://github.com/littleHiuman/GZsubway-canvas

可以戳相册地址看高清图:http://hiuman.iteye.com/picture/136749

附上超级大图……:



  • 大小: 76.3 KB
分享到:
评论

相关推荐

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

    前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个...

    .Net+WPF绘制地铁路线图

    本文将深入探讨如何使用WPF、C#和相关的绘图技术来绘制地铁路线图,同时涉及JSON文件的序列化,以及矢量图形的绘制,包括Path、Line、Rectangle和Ellipse等元素的运用。 首先,我们需要理解地铁路线图的基本结构。...

    js画地铁图

    在“js画地铁图”这个主题中,我们将探讨如何利用JavaScript来创建互动式的地铁线路图。 首先,理解地铁图的构成至关重要。地铁图通常包括线路、站点、换乘站以及方向指示等元素。为了用JavaScript绘制,我们需要将...

    Android 北京地铁导航源码.zip

    6. 路径动画:为了让用户更直观地理解路线,应用可能还包含地图和路径动画效果。这部分可能涉及到OpenGL ES或者Android的Canvas和Animation API。通过动画,可以提升用户的使用体验。 7. 性能优化:对于大型城市如...

    纯jquery+css绘画地图线路图插件Subway Map

    这个插件在HTML5开发环境中尤其适用,能够帮助开发者轻松创建出具有专业外观的线路图,例如地铁线路图、电路图或其他网络路径图。在现代网页应用中,这种插件能够提供直观且交互式的地图展示,提升用户体验。 该...

    echarts省市区离线地图

    ECharts是由百度开发的开源图表库,它支持丰富的图表类型,如柱状图、折线图、饼图等,并且具有高度可定制性和交互性。ECharts基于HTML5 Canvas技术,可以无缝地融入到Web应用中,提供高性能的数据可视化解决方案。 ...

    html5 svg实现科技感十足的地铁线路图动画特效源码.zip

    在这个项目中,HTML5的Canvas或者SVG元素可能被用来绘制地铁线路图的静态部分,包括线路、站点和连接线。同时,CSS3的过渡(transition)和动画(animation)属性可能会被用来添加动态效果,如列车在轨道上的移动,...

    跑酷游戏源码

    这款源码可能是针对“地铁跑酷”或“天天跑酷”这类流行的跑酷游戏风格而设计的,旨在让开发者学习如何构建类似的游戏。 在Unity中,游戏开发通常包括场景设计、角色动画、物理系统、碰撞检测、脚本编写等多个方面...

    SimpleMetro:只是一个简单的 javascript 地铁 ui 库

    它的特点是简洁,专为那些希望在网页应用中实现类似地铁站地图布局效果的开发者设计。"简单地铁" 这个名字暗示了这个库的目标是提供一种直观、易于理解和使用的 UI 解决方案。 **描述详解:** 描述中提到,...

    capmetro-busmap:首都地铁公交线路实时可视化

    在JavaScript的世界里,此类应用通常会利用WebGL、SVG或者Canvas等技术来绘制地图和动态展示数据。项目可能使用了流行的前端框架,如React或Vue.js,用于构建用户界面,同时结合地理信息系统(GIS)库,如Leaflet或...

    wpf图形编辑程序

    在【压缩包子文件的文件名称列表】中,“MetroStopStation”可能是一个示例项目或者资源文件,可能包含了一个模拟地铁站图标的图形元素,或者是用于演示如何在WPF应用程序中实现类似地铁站地图的编辑功能。...

    基于ECharts智慧交通数据可视化大屏源码

    4. **公交/地铁线路**:显示公共交通线路,方便公众规划出行路线。 5. **停车场信息**:实时显示停车场的空位情况,帮助驾驶员找到合适的停车位。 **三、ECharts在智慧交通中的应用** 1. **地图集成**:ECharts内置...

    最新 Html5 中文 api

    4. **SVG矢量图**:Scalable Vector Graphics(SVG)是一种用于描述二维图形的XML语言,它可以创建清晰、可缩放的图形,特别适合于图标、流程图和复杂图形的展示。 5. **Web Workers**:Web Workers允许在后台线程...

    subway

    同时,`<canvas>`元素可以用来绘制动态的地铁线路图,结合JavaScript进行实时更新。 接下来,我们可能需要CSS(Cascading Style Sheets)来美化和布局页面。通过设置`display`, `position`, `flexbox`或`grid`属性...

    metroEticket:二维码票

    "metroEticket:二维码票"项目是一个基于H5技术实现的地铁电子票务系统,它融合了二维码技术和路径规划算法,为用户提供便捷的出行服务。在这个项目中,我们可以看到几个关键的技术点,主要包括H5开发、二维码生成与...

    trainsimulator:火车模拟器-Istanbul M2 Metro Line

    5. **游戏逻辑**:列车的行驶速度、路线规划、信号灯系统、时刻表管理等游戏规则,都由JavaScript代码编写,并与Phaser的事件系统相结合。 6. **声音和音乐**:Phaser支持音频播放,游戏中可能会有地铁行驶声、到站...

Global site tag (gtag.js) - Google Analytics