Day 1.上海地下鉄のネットワーク図を描く

Day 1.上海地下鉄のネットワーク図を描く
需要
1.ネットワーク図はiOS、android、web、大画面の2.回線が明るい
技術選択
vue+d 3
方法の設計
1.初期化var metro=function｛｝
2.ルートを作成するvar createPaths=function{}
3.サイトvar createStation=functionを作成します{}
4.カバー層を表示するvar show TransparentCover=function(){}
5.回線の明るいvar showSingle Line beforeCover=function(){}
データ構造
1.SHMetro.info

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

2.ライン

{
    "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.ダイナミック描画のロードが緩やかで、描画後のロードマップを導き出すことができ、論理演算を減少させ、ロード速度を向上させる.