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.動態繪制加載緩慢
可以匯出繪制后的路網圖，減少邏輯運算，提高加載速度
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/260094.html
標籤：其他
上一篇：洛谷P1614 愛與愁的心痛