xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Scatter</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 -->
    </head>
    <body>
        <style>
            html, body, #main {
                background: #111;
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id="main"></div>
        <div id="data-count">
            <span>LOADED: </span>
            <span id="data-count-number"></span>
        </div>
        <style>
            #data-count {
                font-size: 30px;
                color: #fff;
                position: absolute;
                z-index: 1000;
                left: 10px;
                bottom: 10px;
            }
            #data-count-number {
                font-size: 80px;
            }
        </style>
        <script src="../dist/echarts.js"></script>
        <script src="../map/js/world.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/countup.js"></script>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var dataCount = 0;
            var CHUNK_COUNT = 200;
            // var CHUNK_COUNT = 20;
            // https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
            function fetchData(idx) {
                if (idx >= CHUNK_COUNT) {
                    return;
                }
                // var dataURL = `../../echarts-gl/test/data/gps/gps_${idx}.bin`;
                // var dataURL = `../../data-online/gps/gps_${idx}.bin`;
                var dataURL = `../../echarts-examples/public/data/asset/data/gps/gps_${idx}.bin`;
                var xhr = new XMLHttpRequest();
                xhr.open('GET', dataURL, true);
                xhr.responseType = 'arraybuffer';

                xhr.onload = function (e) {
                    var rawData = new Int32Array(this.response);
                    var data = new Float32Array(rawData.length);
                    var addedDataCount = rawData.length / 2;
                    for (var i = 0; i < rawData.length; i += 2) {
                        data[i] = rawData[i+1] / 1e7;
                        data[i+1] = rawData[i] / 1e7;
                    }

                    chart.appendData({
                        seriesIndex: 0,
                        data: data
                    });

                    var countUp = new CountUp('data-count-number', dataCount, dataCount + addedDataCount, 0, 1);
                    countUp.start();
                    dataCount += addedDataCount;

                    fetchData(idx + 1);
                }

                xhr.send();
            }

            chart.setOption({
                backgroundColor: '#000',
                geo: {
                    map: 'world',
                    roam: true,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    silent: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [{
                    name: '弱',
                    type: 'scatter',
                    progressive: 1e5,
                    coordinateSystem: 'geo',
                    symbolSize: 0.5,
                    blendMode: 'lighter',
                    large: true,
                    itemStyle: {
                        normal: {
                            color: 'rgb(20, 15, 2)'
                        }
                    },
                    postEffect: {
                        enable: true
                    },
                    silent: true,
                    dimensions: ['lng', 'lat'],
                    data: new Float32Array()
                }]
            });

            fetchData(0);
        </script>
    </body>
</html>