尝试利用三维地图和二维地图进行西湖人流可视化大屏
数据来源来西湖周边道路数据以及自己创建的随机人流数据value，以及消费数据
整体封包，修改set及根目录的html文件即可进行修改
html代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CityMap - ECHARTS-GL</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div id="main"></div>
<script src="js/echarts.js"></script>
<script src="js/echarts-gl.min.js"></script>
<script src="js/mapbox-gl.js"></script>
<script src="js/jquery.min.js"></script>
<script src="data/building.js"></script>
<script src="data/route.js"></script>
<script src="set/settings.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
mapboxgl.accessToken = mapAccessToken;
myChart.showLoading();
echarts.registerMap('buildings', building);
console.log(routes);
var regionsData = building.features.map(function (feature) {
return {
name: feature.properties.name,
value: feature.properties.value,
height: feature.properties.height
};
});
if(colorOrWidth == 0){
var dataAll = routes.features.map(function(theD){
return{
coords:theD.geometry.coordinates,
lineStyle:{
color:theColor,
width:theWidth,
opacity:theOpac
}
}
})
};
if(colorOrWidth == 1){
var dataAll = routes.features.map(function(theD){
return{
coords:theD.geometry.coordinates,
lineStyle:{
color: theColorRamp[theD.properties.value-1],
width:theWidth,
opacity:theOpac
}
}
})
}
if(colorOrWidth == 2){
var dataAll = routes.features.map(function(theD){
return{
coords:theD.geometry.coordinates,
lineStyle:{
width: theD.properties.value * theWidthRatio,
color:theColor,
opacity:theOpac
}
}
})
}
if(colorOrWidth == 3){
var dataAll = routes.features.map(function(theD){
return{
coords:theD.geometry.coordinates,
lineStyle:{
color: theColorRamp[theD.properties.value-1],
width: theD.properties.value * theWidthRatio,
opacity:theOpac
}
}
})
}
myChart.hideLoading();
var date = ['2018.10.1', '2018.10.2', '2018.10.3', '2018.10.4', '2018.10.5', '2018.10.6', '2018.10.7', '2018.10.8', '2018.10.9', '2018.10.10', '2018.10.11', '2018.10.12', '2018.10.13', '2018.10.14', '2018.10.15', '2018.10.16', '2018.10.17', '2018.10.18', '2018.10.19', '2018.10.20', '2018.10.21', '2018.10.22', '2018.10.23', '2018.10.24', '2018.10.25', '2018.10.26', '2018.10.27', '2018.10.28', '2018.10.29', '2018.10.30', '2018.10.31'];
var kll = [2764.171729, 9064.269711, 4412.30571, 5610.112855, 18369.26879, 26506.26829, 1223.867154, 7309.593254, 9333.950981, 6152.334537, 8037.230281, 19114.88628, 26882.14649, 4703.719153, 1106.045662, 3413.341476, 7535.002544, 7743.171613, 10556.71218, 21988.34458, 2093.63983, 1268.391509, 422.9891014, 1763.083181, 8829.28388, 4766.906367, 19489.72965, 5831.421905, 3563.324077, 5213.65975, 76.48746149];
var xf = [
[3441.367771, 670.0164981],
[3262.112443, 497.8245012],
[3447.925405, 378.9298017],
[2796.806923, 546.9328532],
[2441.665759, 472.6657022],
[3039.9952, 370.9157619],
[2517.013108, 266.5969842],
[2424.529272, 629.0714093],
[2330.347328, 537.907472],
[3260.018232, 483.2564252],
[3270.170549, 505.9962748],
[3282.059053, 337.265357],
[2546.438473, 430.8992092],
[2783.413004, 517.6096351],
[2859.776665, 691.7967468],
[3802.907274, 578.8544119],
[3438.079693, 629.7335845],
[2862.116574, 526.5141957],
[3146.569302, 340.7409617],
[2638.894415, 661.9214104],
[3030.769498, 265.3515996],
[3183.137708, 553.6289435],
[3251.547254, 517.7961951],
[3027.97914, 500.0315313],
[2237.006375, 648.8114548],
[2518.46174, 322.4747011],
[2889.954377, 270.4599939],
[3121.873514, 579.3067879],
[3539.707768, 431.3762153],
[3601.750444, 562.1010964],
[3381.998669, 524.608057],
[2858.132048, 531.6684795],
[3210.357209, 571.6454435],
[2931.473882, 509.6010767],
[2841.88603, 509.9935109],
[2675.335099, 558.055768],
[2173.393004, 612.2562513],
[3034.304713, 502.4768119],
[2627.415008, 474.3233453],
[3392.486399, 485.3631188],
[2802.779109, 420.2119805],
[3474.714125, 257.4609804],
[4171.592072, 535.4645302],
[2671.14687, 637.3825198],
[3309.950238, 505.0524948],
[2382.562376, 574.0551544],
[1636.331238, 416.6776832],
[3420.893327, 554.8613776],
[2988.04237, 423.8700958],
[3445.02496, 467.3061764],
[2428.041554, 410.0075166],
[3497.265983, 571.5502905],
[3302.528267, 431.9783279],
[3356.434649, 421.7958972],
[3034.486128, 500.4114717],
[3242.224786, 391.1950224],
[2887.35647, 524.8358631],
[3203.199679, 392.4727091],
[3438.887043, 500.5906591],
[3213.972575, 632.2554653],
[3338.01155, 550.5405077],
[2941.583225, 401.5833734],
[3743.235102, 444.3003242],
[3913.702876, 584.2098518],
[3386.471448, 539.3870378],
[3642.811639, 304.6715246],
[3218.160038, 479.6278233],
[3504.84227, 750.7216649],
[2894.264991, 427.1458069],
[2710.150438, 517.1807349],
[2896.024863, 492.2946986],
[3259.148935, 424.8880813],
[2224.713333, 550.8309946],
[3108.312293, 568.4892928],
[2301.753458, 517.0037988],
[3257.530966, 449.4178875],
[2639.297189, 547.4460484],
[1517.901676, 470.4083031],
[3400.355337, 383.1989424],
[3301.476828, 650.0765374],
[1966.075142, 493.0569535],
[2383.382441, 495.2786761],
[3540.988024, 486.9672743],
[3489.632307, 473.1076907],
[3198.679998, 704.4125674],
[3142.426426, 467.895235],
[2671.324798, 528.2037424],
[2745.026871, 406.5841428],
[3228.97559, 535.2401715],
[3066.92901, 543.6863262],
[3522.181136, 595.822247],
[3456.210117, 515.263437],
[2181.42268, 606.56172],
[2441.417007, 565.2606803],
[3750.18537, 619.4828215],
[3443.069745, 411.372982],
[3684.14486, 547.6725198],
[2927.987271, 585.2007772],
[2736.020966, 494.4066732],
[2582.449266, 530.7454083],
[4059.701788, 453.1806502],
[3531.096354, 451.9608209],
[2421.824922, 594.984937],
[3479.593304, 633.5984272],
[3713.667831, 448.3016785],
[3151.469559, 600.384958],
[3330.04456, 468.1558902],
[3478.388513, 492.4942112],
[3343.334495, 387.3390073],
[3334.329799, 662.8668563],
[2439.110894, 669.6389884],
[3138.7646, 477.8747007],
[3138.227593, 427.017117],
[2805.617213, 438.3968085],
[2217.150464, 532.0031241],
[3573.165705, 554.0897065],
[4400.865753, 458.4931564],
[2602.249509, 390.894016],
[2790.92516, 545.5983834],
[2395.273819, 454.4114097],
[3101.162059, 560.5433765],
[2421.836987, 462.6976279],
[3640.964205, 741.1382967],
[3853.142944, 657.8661627],
[3149.862279, 415.8049986],
[3314.194892, 461.4339943],
[2279.33432, 481.3243998],
[2772.610182, 675.7462501],
[2265.431629, 418.2839852],
[2177.094405, 704.9691035],
[2766.343794, 477.0172039],
[3799.84417, 538.9106506],
[3044.661351, 486.593847],
[2828.706116, 529.9442669],
[3370.958256, 502.2213737],
[2666.10104, 560.8134518],
[2153.431372, 465.3597949],
[3116.160418, 200.9650709],
[3697.188183, 654.522717],
[2785.942076, 447.9037471],
[1996.500165, 418.0203238],
[2160.272332, 544.3669883],
[2682.281834, 567.0031111],
[3717.854001, 361.3414648],
[2504.068818, 585.7321311],
[2452.398695, 515.2055613],
[2637.149392, 748.0791673],
[2760.113429, 397.6812357],
[2789.651265, 562.4797504],
[3363.913349, 600.5534136],
[2922.620224, 553.5869659],
[3112.636548, 426.6579047],
[4501.737564, 421.9820567],
[3004.95964, 603.0966465],
[2953.015276, 206.1445865],
[3245.999052, 529.3412514],
[3205.931907, 372.0288427],
[3140.077068, 541.205031],
[3569.214738, 653.392462],
[2498.241698, 627.3799854],
[3352.906509, 740.1264957],
[2506.159108, 576.6295509],
[3518.854112, 480.1528821],
[3691.812558, 503.0390082],
[3924.685889, 656.9052062],
[2978.76659, 559.5336284],
[3417.124534, 260.4106094],
[2722.619594, 626.4886099],
[2993.897688, 539.3693746],
[2926.279918, 449.2676183],
[3404.072654, 438.6586212],
[3762.440941, 455.4755489],
[3070.56006, 578.186774],
[2962.620133, 418.5994923],
[2673.816307, 603.7521445],
[2906.859565, 416.9237897],
[2564.236027, 427.4633483],
[3098.06869, 529.0464359],
[2870.40569, 408.7752223],
[3399.236149, 526.130121],
[3270.420455, 530.2795394],
[2309.239043, 581.941453],
[2812.092427, 534.1890297],
[2500.902347, 385.2335201],
[2496.320098, 675.4261127],
[2935.726796, 650.07676],
[2624.033947, 628.6429946],
[2712.011673, 579.6508756],
[2492.095054, 464.6549598],
[2922.478737, 400.894584],
[3465.648655, 460.024991],
[3262.164787, 454.0802632],
[2879.462628, 532.7128332],
[2620.215101, 353.7785952],
[2364.083189, 623.0221511],
[2416.781992, 372.9095645],
[2913.795439, 527.222949],
[2475.725421, 384.3838851],
[2855.377326, 440.9372006],
[2786.485464, 385.4289048],
[3973.647309, 489.4746323],
[3714.001246, 460.7086264],
[3059.087833, 378.4997094],
[2336.081835, 650.852947],
[3291.024106, 347.7735677],
[2413.314013, 310.0147345],
[2655.306933, 433.8459309],
[3071.05334, 537.9151767],
[2986.496901, 553.2190729],
[1936.514237, 643.6810328],
[3270.942592, 495.6210053],
[3825.429402, 490.461292],
[3176.821424, 689.8992125],
[3287.066639, 383.4080543],
[2844.35167, 278.2601896],
[2555.743763, 661.8105979],
[2473.671433, 474.0063082],
[2809.19443, 670.2263749],
[2571.925255, 501.0937738],
[2908.480145, 586.4866425],
[2293.363715, 342.2000479],
[3165.438434, 582.2193837],
[3220.706777, 550.6535248],
[3235.616072, 503.2624737],
[2825.770769, 658.4759787],
[2103.086087, 496.1464084],
[2426.948569, 357.044491],
[3543.978093, 483.3430325],
[2921.14149, 670.3505739],
[2121.811261, 459.5264799],
[2860.614112, 394.4697017],
[2640.089559, 529.2517123],
[3514.870486, 545.0802934],
[3409.429259, 627.2968417],
[2684.643495, 667.6227736],
[2472.867104, 479.4481039],
[3398.851171, 403.7672772],
[3791.025863, 618.1243401],
[3241.346771, 597.896186],
[2706.189865, 342.0924178],
[3578.347642, 534.3128487],
[1794.208159, 488.0133368],
[3610.192822, 534.978292],
[2679.754545, 439.3937432],
[3922.202759, 415.1725839],
[2329.596173, 543.7320251],
[3779.725805, 596.0601637],
[2599.939987, 386.665099],
[3382.926414, 391.2051093],
[3430.991323, 444.6945723],
[3308.445583, 648.9030497],
[3227.959654, 562.3693583],
[2379.174604, 460.0185535],
[2821.694496, 560.5850206],
[3089.878511, 399.0791221],
[2958.522928, 629.1069492],
[2826.945238, 363.5953326],
[3446.992717, 521.5715107],
[2775.304062, 386.8256243],
[2763.970494, 610.1254179],
[3693.374916, 457.4569401],
[4065.287149, 429.1267759],
[3174.623924, 553.2356194],
[1837.5986, 395.7852244],
[2476.838081, 495.4956316],
[3576.860244, 469.8912623],
[3643.305612, 619.3478239],
[3449.994074, 534.107906],
[3567.809675, 521.2972832],
[2335.545685, 576.3202405],
[3513.678545, 574.9813185],
[3097.246677, 475.9471641],
[2717.339251, 530.3836674],
[2652.91575, 586.423918],
[2562.25377, 633.3454721],
[2990.09517, 349.0843991],
[3100.183373, 498.945227],
[2721.814629, 339.7949861],
[3683.620298, 401.4859479],
[2978.908991, 647.0589745],
[2832.196929, 580.6946305],
[2851.334895, 703.8562008],
[3186.17743, 458.7752851],
[3799.066856, 500.1181397],
[2173.961833, 610.3532761],
[1838.331242, 451.5206347],
[2178.999339, 403.3009786],
[2976.743436, 639.7876034],
[3541.074891, 524.0472117],
[3568.91124, 678.5390665],
[3027.869684, 504.7567008],
[3315.290714, 405.1446646],
[2412.603928, 479.8270654],
[2955.473994, 566.9282421],
[2562.787469, 376.605255],
[2826.964106, 602.4687257],
[2328.544433, 493.4883794],
[3170.84093, 629.3265033],
[2598.123748, 560.7947292],
[3808.061488, 418.2417468],
[3634.89706, 497.0091395],
[3369.546904, 495.2372504],
[4575.250213, 509.5650422],
[2680.035089, 435.5633266],
[3479.737684, 472.2099187],
[2640.637029, 553.5952837],
[3285.443395, 571.9176765],
[3443.856619, 404.6144757],
[2591.196553, 489.6505152],
[2994.366403, 422.0390342],
[2772.269203, 434.4372808],
[2609.368175, 724.9713883],
[2525.659973, 341.3294303],
[3189.904479, 421.9773385],
[2188.689455, 369.9789762],
[2383.107454, 469.9174415],
[3418.101368, 419.6788378],
[3694.651041, 557.7176813],
[4177.005955, 513.8581538],
[3078.680111, 472.2756922],
[3808.91696, 622.9557585],
[2727.756028, 365.2549402],
[2314.186728, 472.2142581],
[2606.703396, 624.9981478],
[3421.715942, 578.6471547],
[2844.638758, 410.7674331],
[3393.589769, 511.1216322],
[2516.489463, 403.8550051],
[3420.131123, 513.7848091],
[2767.414048, 557.0200942],
[2668.175145, 544.3439441],
[3184.410467, 403.4904388],
[2956.490848, 481.6219872],
[3351.628325, 592.4801544],
[3055.52183, 527.4652759],
[1884.353512, 542.6243851],
[3749.087819, 410.143944],
[2245.693032, 473.2988094],
[3098.838296, 355.6646588],
[2994.225636, 592.9477516],
[2844.440802, 475.0135746],
[2940.438501, 540.8842274],
[2810.56403, 552.0810936],
[1747.595282, 616.4950546],
[2066.015988, 459.5062304],
[2765.986543, 617.7526636],
[2496.320199, 462.8389174],
[3434.033749, 427.0044823],
[2296.543238, 618.7984055],
[2959.753057, 449.0730819],
[1929.73919, 388.1665863],
[3683.195223, 550.4014932],
[2635.956798, 447.8653404],
[3378.944763, 530.5651366],
[2963.290628, 479.0659844],
[1833.155053, 482.0887187],
[3108.743333, 584.5337782],
[3218.845016, 476.8151438],
[2217.888855, 603.5257754],
[2783.251168, 711.2883596],
[3289.844815, 444.7942387],
[3227.703961, 477.4188442],
[3833.923148, 387.2617218],
[2728.190927, 452.2526107],
[3251.328351, 389.7509428],
[3214.847184, 417.058983],
[2993.966939, 511.4746971],
[3368.008462, 603.0198358],
[2867.342014, 554.8278428],
[2689.01886, 532.4279908],
[2421.78363, 467.9879133],
[3116.889103, 354.3344312],
[2938.800951, 480.1177138],
[2246.518768, 488.9430096],
[2532.942851, 278.6425896],
[2749.549577, 407.7522795],
[3266.92644, 527.2953703],
[3033.019244, 427.1259508],
[3789.269032, 297.6922465],
[2156.257012, 502.5426041],
[3087.734283, 547.228198],
[2979.983807, 655.3643287],
[3227.307038, 416.5837227],
[1834.634106, 362.2776396],
[3232.621419, 484.4748645],
[3301.163135, 644.7881516],
[2640.499178, 473.9981267],
[1645.938013, 491.413146],
[3077.126655, 469.0054992],
[2894.807266, 696.3259797],
[3296.796416, 551.5913646],
[3226.828861, 329.060757],
[2454.555968, 456.0912652],
[2991.386059, 512.3043768],
[2774.400763, 570.8271057],
[2727.617628, 559.6171223],
[3605.293273, 583.2313076],
[3214.10556, 473.0459918],
[2434.268489, 514.8032307],
[2458.701961, 452.649887],
[2544.98442, 624.013864],
[3531.56491, 398.8976548],
[2314.38711, 672.1710232],
[2534.445518, 438.6017604],
[2692.14175, 468.9358007],
[2876.927348, 412.7967485],
[3103.703166, 468.00583],
[3232.358136, 650.009002],
[2757.24901, 527.4737934],
[3020.305323, 563.3498007],
[3021.233616, 602.8275807],
[3365.612982, 351.0127562],
[4448.94297, 459.9712747],
[3620.107161, 481.6573968],
[2661.290958, 637.2232017],
[3285.969107, 432.7913002],
[2878.623215, 628.3532013],
[2782.5611, 336.1931564],
[4263.229574, 485.4304159],
[2981.542486, 385.0714562],
[3233.324789, 454.8262915],
[3143.10632, 574.0554805],
[2619.094122, 610.6304879],
[2737.124329, 579.1220926],
[3764.328905, 597.0964398],
[3948.916972, 465.6198461],
[3976.424655, 694.4115452],
[2806.491503, 614.3978046],
[3564.979653, 362.2920023],
[3459.123078, 409.8158049],
[2863.991938, 698.9747837],
[2952.240014, 467.2170855],
[2880.990296, 410.3903758],
[3083.761168, 573.5438452],
[3087.892144, 671.31717],
[2707.581438, 453.4173781],
[2590.148147, 469.5451137],
[2820.5692, 536.7684752],
[3637.877041, 479.8672294],
[2533.316437, 590.3098643],
[2648.719901, 636.5890531],
[3000.76716, 638.7230558],
[3388.790588, 689.5259216],
[2947.555571, 444.2554511],
[2979.773082, 390.2315904],
[3760.731895, 541.8780939],
[3166.472663, 407.6788796],
[3757.826059, 511.7267626],
[3115.79739, 507.0314416],
[2745.455233, 390.1024325],
[2933.514311, 602.451797],
[3633.288856, 533.2143651],
[3222.995383, 472.0774059],
[3668.016457, 527.6189003],
[2785.888568, 653.5895691],
[3626.214181, 349.967629],
[3259.216488, 612.2818525],
[3608.680391, 546.4166028],
[3317.497334, 407.7961812],
[2621.104325, 511.9675129],
[3170.126266, 557.273389],
[2570.16358, 551.7165008],
[2949.458863, 384.3674828],
[4077.155459, 619.5711638],
[2609.293773, 443.3396334],
[2142.491056, 499.1234968],
[3970.720775, 453.3364587],
[2714.892769, 452.5105308],
[3972.407454, 642.0021993],
[3366.551399, 447.8829649],
[3480.223458, 550.7603794],
[2563.004596, 447.5581259],
[3113.253067, 366.4997685],
[2843.947554, 640.1136233],
[2319.145777, 574.6155681],
[3161.512203, 612.4241462],
[1945.804677, 555.1480399],
[3396.268488, 605.6582456],
[3393.083647, 395.9955861],
[3464.660123, 622.9014939],
[3118.364112, 510.5055893],
[3007.850638, 498.529535],
[3335.739235, 615.6519967],
[3354.507954, 408.6720679],
[3128.295572, 446.3031354],
[2452.589383, 192.6537825],
[2943.542799, 398.752874],
[2677.526101, 531.5127507],
[3388.911425, 437.1863944],
[2654.833992, 509.1069564],
[2652.193647, 470.0340189],
[3050.180121, 554.1097205],
[3308.037213, 590.9616077],
[3408.094437, 341.1903054],
[2900.093326, 397.175203],
[3571.03969, 452.2445455],
[3380.15106, 523.3607239],
[3919.982375, 513.0653016],
[3938.507575, 475.9582474],
[2551.575084, 516.2323568]
];
myChart.setOption({
title: {
text: '智慧城市数字监测大屏',
textStyle:{//文字样式
fontSize:80,//文字大小
color:'rgba(255,255,255,0.6)'//文字颜色：r红g绿b蓝a透明度
},
},
grid: [
{x: '6%', y: '22%', width: '20%', height: '70%'},//第一个图位置 x横向距离，y竖向距离，width宽度，height高度
{x: '55%', y: '62%', width: '40%', height: '30%'},//第二个图位置
],
tooltip: {//提示框
axisPointer: {//全局提示框设置
type: 'cross',//cross为十字框
lineStyle:{//线的类型
type:'dashed',//dashed为虚线
width : 1,//线的粗细
color: 'gray'
}
}
},
xAxis: [//x轴的设置
{
show:false,//是否显示x轴
gridIndex: 0,//选择哪个x轴gridIndex 0为第一个
},
{
name:'消费金额¥',//这里设置了可以在轴旁显示名称
nameTextStyle:{//name的文字样式
fontSize:15,
color:'rgba(255,255,255,0.6)'
},
nameLocation:'start',//名称显示位置
gridIndex: 1 ,
min:1300,//轴的最小值
splitLine:{//辅助线，默认为true
show:false//是否显示辅助线
},
axisLine:{//轴线
lineStyle:{//轴线的样式
color:'rgba(255,255,255,0.6)'
}
}
}
],
yAxis: [
{
name:'西湖人口流量数据',
nameTextStyle:{
fontSize:15,
color:'rgba(255,255,255,0.6)'
},
type : 'category',//type一个是category一个value
gridIndex: 0,
inverse:true, //是否逆序
boundaryGap:false,//是否轴的刻度中心点为起始
data:date,
nameLocation:'start',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0.6)',
}
}
},
{
name:'住宿金额¥',
nameTextStyle:{
fontSize:15,
color:'rgba(255,255,255,0.6)'
},
gridIndex: 1,
position: 'right',
max:1000,
splitLine:{
show:false
},
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0.6)',
}
}
},
],
mapbox: {
center: theCenter,//中心经纬度
zoom: theZoom,//高度
pitch: thePitch,//视角角度
bearing: theBear,//地图旋转角度
style: mapStyle,//地图样式
postEffect: {
enable: true,//是否开启特效
screenSpaceAmbientOcclusion: {//环境光效
enable: true,
intensity: 1.2,
radius: 6,
quality: 'high'
},
screenSpaceReflection: {
enable: true
}
},
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high'
},
ambient: {
intensity: 0.1
},
ambientCubemap: {
texture: theAC,
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
}
},
series: [{
type: 'map3D',//数据的显示样式三维地图
coordinateSystem: 'mapbox',//坐标系样式
map: 'buildings',//地图引入
data: regionsData,
shading: 'realistic',//综合显示
instancing: true,//
silent: true,
realisticMaterial: {//材质
detailTexture: theDT,//纹理贴图
metalness: theMetal,//材质类型
roughness: theRough//材质的粗糙程度
}//整体见set文件
},
{
type: 'lines3D',
name: 'ok',
effect: {
show: effectShow,//是否显示
constantSpeed: theSpeed,//轨迹速度
trailWidth: theEffWidth,//轨迹宽度
trailLength: theEffLength,//轨迹长度
trailOpacity: theEffOpac//轨迹透明度
},//详情见set
coordinateSystem: 'mapbox',
blendMode: 'lighter',
//blendMode: 'source-over',
polyline: true,
// lineStyle:{
// color: theColor,
// width: theWidth,
// opacity: theOpac
// },
data: dataAll
},
{
type:'bar',
name:'人口流量数据',
xAxisIndex:0,
yAxisIndex:0,
data:kll,
itemStyle:{//展示样式
normal:{//普通状态下的显示
color:'rgba(255,255,255,0.6)',
},
emphasis:{//高亮下的样式
color:'white',
opacity:0.8
}
},
},
{
type:'scatter',
name:'消费数据散点图',
xAxisIndex:1,
yAxisIndex:1,
data:xf,
symbolSize:8,//点的大小
itemStyle:{
normal:{
color:'rgba(255,255,255,0.6)',
},
emphasis:{
color:'white',
opacity:0.8,
symbol:'emptycircle',//点的高亮样式
symbolSize:20
}
},
}]
});
</script>
</body>
</html>
set文件代码如下：
// 路线属性
var colorOrWidth = 2 ; // 0代表既不用色彩也不用宽度来表示值，1代表用色彩，2代表用宽度，3代表二者皆用
var theColorRamp = ['#313695']; // 路线颜色
var theWidthRatio = 0.005 // 宽度与值的比值
// 固定属性，当该属性没有和值相关，会自动设成如下值
var theColor = 'rgb(300,40,0)'; // 路线颜色
var theWidth = 1 // 路线粗细
var theOpac = 0.1; // 透明度 0-1
// 地图相关
var theCenter = [120.1401329041,30.2472787522]; // 中心点坐标
var theZoom = 13.5; //视角远近 数字
var theBear = 90; // 地图旋转角度，正北为0，正东为90，正西为270，以此类推
var thePitch = 45; // 地图俯瞰角度，0为顶视图，60以上效果甚微
// mapStyle 与 mapAccessToken 另见说明
var mapStyle = 'mapbox://styles/yipeiz/cjb788d051eue2rp5hhq2jw2h';
var mapAccessToken = 'pk.eyJ1IjoieWlwZWl6IiwiYSI6ImNpeWF3MDdvZDAwZDkzMXA5NXlsN2FwM3IifQ.y9QTjGM10eunho1JKQnt-g';
// 动画效果
var effectShow = true; // 是否展示动画
var theSpeed = 50; // 尾迹速度
var theEffWidth = 1; // 尾迹宽度
var theEffLength= 10; // 尾迹长度
var theEffOpac = 1; // 尾迹透明度
// 建筑相关
var theRough = 0.5; // 表面粗糙度
var theMetal = 0.2; // 金属质感
var theDT = 'asset/woods.jpg'; // 表面贴图，不需要贴图改为 ‘’即可
var theAC = 'asset/globe_light2.hdr'; // 环境光贴图
最终成果：