Day1.绘制上海地铁网络图

需求

1.网络图适配iOS、android、web、大屏
2.线路高亮

技术选择

vue + d3

方法设计

1.初始化
var metro = function (info) {}

2.创建路线
var createPaths = function (lines) {}

3.创建站点
var createStations = function(stations) {}

4.显示遮盖层
var showTransparentCover = function () {}

5.线路高亮
var showSingleLinebeforeCover = function () {}

数据结构

1.SHMetro.info

{"info": {"id": "","name": "","width": "","height": "","bgColor": ""}
}

2.lines

{"lines": [{"line_id": "1","name_en": "line1","name_cn": "1号线","type": "1","width": "20","color": "#FF0000","path": "M1343,4152L1404,4095L1467,4030L1535,3962L1634,3860L1784,3707L1877,3421L2042,3242L2121,3164L2305,2981L2526,2986L2880,2900L2938,2729L2824,2568L2707,2463L2718,2290L2718,2036L2718,1872L2718,1709L2718,1545L2718,1383L2718,1219L2718,1056L2718,892L2718,729L2718,567L2718,403L2718,240"},]}

3.stations

{"stations": [{"stat_id": "0111","name_en": "Xinzhuang","name_cn": "莘庄","pinyin": "xz","lines": "1,5","x": "1343","y": "4152","type": "1"},]}

预览

问题

1.线路不够精致
可以用Ai优化

2.动态绘制加载缓慢
可以导出绘制后的路网图，减少逻辑运算，提高加载速度

Day1.绘制上海地铁网络图相关推荐

Day2.上海地铁网络图路径显示
Day2.上海地铁网络图路径显示需求1.1 1.点击站点选择起点.终点 2.路径算法 3.高亮路径,显示换乘站方法设计: 1.var createStartWidget = function () ...
html绘制LR graph,[LR]用R绘制上海地铁
使用Leaflet绘制上海地铁地图直接上代码,如下: library(leaflet) library(data.table) library(dplyr) stations stations #地 ...
使用Leaflet绘制上海地铁地图
library(leaflet) library(data.table) library(dplyr) stations <- fread('https://raw.githubusercont ...
如何便捷绘制上海地铁图？
地铁图的首要目标是方便大家查找路线和目的地,因此直观便捷更重要.过度的.花里胡哨的地图设计反而会适得其反. 有个个人网站上传的地铁图(传送门在下方)就非常直观,而且背景加上了地理图,大家一眼就能看出某 ...
html5地图连线原理,基于html5技术绘制上海地铁图 – 双车道路况信息
上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现交通图介绍路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太 ...
基于html5绘制上海地铁图 - 路况信息展示
为什么80%的码农都做不了架构师?>>> 前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现交通图介 ...
html5制作线路图,HTML5绘制上海地铁线路图
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 上海2012地铁图效果示例讲解首先需要解决 ...
绘制地铁线路html,基于HTML5技术绘制上海地铁图
某市政项目用到地铁图展现,展现地铁站点以及相关信息流,使用Qunee组件能够很好的解决这类需求,作出优美的展示,下面以上海2012地铁图为例,效果以下:node 示例讲解首先须要解决数据问题,能够从 ...
php线路图,HTML5绘制上海地铁线路图-大前端
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解首先需要解决数据问题,可以从维基百科 ...

Day1.绘制上海地铁网络图

需求

技术选择

方法设计

数据结构

预览

问题

Day1.绘制上海地铁网络图相关推荐

最新文章

热门文章