94Echarts - 地理坐标/地图（Use lines to draw 1 million ny streets.）

效果图

源代码

var CHUNK_COUNT = 32;

var dataCount = 0;

function fetchData(idx) {
    if (idx >= CHUNK_COUNT) {
        return;
    }
    var dataURL = `data/asset/data/links-ny/links_ny_${idx}.bin`;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', dataURL, true);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function (e) {
        var rawData = new Float32Array(this.response);
        var data = new Float64Array(rawData.length - 2);
        var offsetX = rawData[0];
        var offsetY = rawData[1];
        var off = 0;
        var addedDataCount = 0;
        for (var i = 2; i < rawData.length;) {
            var count = rawData[i++];
            data[off++] = count;
            for (var k = 0; k < count; k++) {
                var x = rawData[i++] + offsetX;
                var y = rawData[i++] + offsetY;
                data[off++] = x;
                data[off++] = y;

                addedDataCount++;
            }
        }

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

        dataCount += addedDataCount;

        fetchData(idx + 1);
    }

    xhr.send();
}

option = {
    progressive: 20000,
    backgroundColor: '#111',
    geo: {
        center: [-74.04327099998152, 40.86737600240287],
        zoom: 360,
        map: 'world',
        roam: true,
        silent: true,
        itemStyle: {
            normal: {
                color: 'transparent',
                borderColor: 'rgba(255,255,255,0.1)',
                borderWidth: 1
            }
        }
    },
    series: [{
        type: 'lines',

        coordinateSystem: 'geo',

        blendMode: 'lighter',

        dimensions: ['value'],

        data: new Float64Array(),
        polyline: true,
        large: true,

        lineStyle: {
            color: 'orange',
            width: 0.5,
            opacity: 0.3
        }
    }]
}

fetchData(0);

标签：draw,million,++,true,streets,xhr,rawData,var,data
来源： https://blog.51cto.com/u_15294985/3000582