Beijing bus route map About Data The first and second numbers in the data are 10000 times the latitude and longitude of the first point and the following numbers are the interpolation between the subsequent points and the first point For example the 10000 times the latitude and longitude of the first point is 1164383 401471 and the third and fourth The numbers 11 and 13 are the difference between the longitude and latitude of the second point and the longitude and latitude of the first point respectively document body style height 600px let url https notebook xbdev net var resources lines bus json 1164383 401471 11 13 1 49 26 14 99 170 4 36 87 2 16 141 2 15 47 6 168 9 2 22 74 4 138 10 12 152 9 55 17 111 13 176 20 38 1 57 31 54 28 85 5 126 13 62 1 34 84 1 3 218 15 6 78 2 4 52 70 1 7 142 99 2 21 5 229 150 16 23 0 180 168 1 4 257 82 0 33 22 78 20 1164311 399594 8 1 33 0 56 1 29 3 30 27 8 5 21 14 3 2 1 1 4 3 13 13 21 19 9 9 16 9 93 6 8 50 100 1 1 0 171 3 1 0 0 1 0 8 0 15 1 8 0 28 0 4 1 11 0 19 0 12 2 22 1 26 1 25 0 25 1 24 0 4 2 25 0 1 0 7 1 28 2 25 17 30 0 1 0 2 2 55 44 1 0 32 1 0 48 3 11 0 12 34 0 7 24 9 0 12 1 12 0 1 7 0 8 0 8 0 41 1 1 10 0 4 1 5 0 6 0 3 2 21 1 12 0 8 0 2 2 0 31 6 6 0 51 2 0 1 70 0 7 13 7 5 30 22 1 1 1163521 398776 16 1 55 2 47 1 0 1 0 0 0 4 0 8 0 1 1 7 0 11 1 16 0 4 0 15 1 45 0 1 1 16 1 54 0 29 0 1 0 2 0 1 0 2 0 4 0 37 1 7 0 7 0 18 107 0 2 0 30 0 129 2 56 2 36 1 22 1 53 1 47 2 7 0 8 0 8 0 41 1 2 1 17 0 4 0 10 0 33 1 7 0 18 0 1 32 0 2 37 0 1 0 1163823 399822 54 2 1 26 2 29 1 1 47 0 2 0 12 5 1 25 1 10 0 8 0 1 1 26 1 11 1 20 1 31 1 0 72 2 57 13 0 18 1 5 0 6 0 1 0 8 0 15 1 8 0 28 0 4 1 11 0 19 0 12 2 22 1 26 1 25 0 25 1 24 0 4 2 25 0 1 1 0 13 0 56 1 14 1 65 1 3 0 19 0 52 0 23 1 3 3 60 4 86 1 8 0 12 0 41 0 46 0 5 0 19 1 0 50 0 13 0 5 0 7 1 13 1 13 0 1 1 41 1 4 1 7 1 10 0 3 0 2 1 39 0 10 2 15 1 16 0 6 1 17 0 1 1164057 399753 18 34 6 33 49 2 82 2 48 1 2 45 2 105 65 1 2 19 27 17 6 74 0 22 141 2 59 0 59 1 77 0 1 75 279 1 0 41 2 119 1 21 30 1 let pass await fetch url let text await pass text let json JSON parse text process json function process data let hStep 300 data length 1 let busLines concat apply data map function busLine idx let prevPt let points for let i 0 i busLine length i 2 let pt busLine i busLine i 1 if i 0 pt prevPt 0 pt 0 prevPt 1 pt 1 prevPt pt points push pt 0 1e4 pt 1 1e4 return coords points lineStyle Math round hStep idx get min max let min 10000 10000 let max 10000 10000 for let i 0 i busLines length i let points busLines i coords for let k 0 k points length k min 0 Math min min 0 points k 0 min 1 Math min min 1 points k 1 max 0 Math max max 0 points k 0 max 1 Math max max 1 points k 1 console log busLines draw busLines min max function draw busLines min max console log min min console log max max var canvas document createElement canvas canvas width 500 canvas height 500 document body appendChild canvas var theContext canvas getContext 2d theContext strokeRect 0 0 500 500 let scalex 300 let scaley 300 var offsetx min 0 1 012 max 0 min 0 0 5 var offsety min 1 1 035 max 1 min 1 0 5 for let i 0 i busLines length i let points busLines i coords theContext beginPath theContext strokeStyle busLines i lineStyle theContext moveTo points 0 0 offsetx scalex points 0 1 offsety scaley for let k 1 k points length k theContext lineTo points k 0 offsetx scalex points k 1 offsety scaley theContext stroke console log ready
7 6 74 0 22 141 2 59 0 59 1 77 0 1 75 279 1 0 41 2 119 1 21 30 1 let pass await fetch url let text await pass text let json JSON parse text process json function process data let hStep 300 data length 1 let busLines concat apply data map function busLine idx let prevPt let points for let i 0 i busLine length i 2 let pt busLine i busLine i 1 if i 0 pt prevPt 0 pt 0 prevPt 1 pt 1 prevPt pt points push pt 0 1e4 pt 1 1e4 return coords points lineStyle Math round hStep idx get min max let min 10000 10000 let max 10000 10000 for let i 0 i busLines length i let points busLines i coords for let k 0 k points length k min 0 Math min min 0 points k 0 min 1 Math min min 1 points k 1 max 0 Math max max 0 points k 0 max 1 Math max max 1 points k 1 console log busLines draw busLines min max function draw busLines min max console log min min console log max max var canvas document createElement canvas canvas width 500 canvas height 500 document body appendChild canvas var theContext canvas getContext 2d theContext strokeRect 0 0 500 500 let scalex 300 let scaley 300 var offsetx min 0 1 012 max 0 min 0 0 5 var offsety min 1 1 035 max 1 min 1 0 5 for let i 0 i busLines length i let points busLines i coords theContext beginPath theContext strokeStyle busLines i lineStyle theContext moveTo points 0 0 offsetx scalex points 0 1 offsety scaley for let k 1 k points length k theContext lineTo points k 0 offsetx scalex points k 1 offsety scaley theContext stroke console log ready