264Echarts - GL 散点图(10 million Bulk GPS points)

简介: 264Echarts - GL 散点图(10 million Bulk GPS points)
效果图

源代码
var dataCount = 0;
var CHUNK_COUNT = 230;
// https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
function fetchData(idx) {
    if (idx >= CHUNK_COUNT) {
        return;
    }
    var dataURL = `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;
        }
        myChart.appendData({
            seriesIndex: 0,
            data: data
        });
        fetchData(idx + 1);
    }
    xhr.send();
}
option = {
    backgroundColor: '#000',
    title: {
        text: '10000000 GPS Points',
            left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        silent: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '弱',
        type: 'scatterGL',
        progressive: 1e6,
        coordinateSystem: 'geo',
        symbolSize: 1,
        zoomScale: 0.002,
        blendMode: 'lighter',
        large: true,
        itemStyle: {
            color: 'rgb(20, 15, 2)'
        },
        postEffect: {
            enable: true
        },
        silent: true,
        dimensions: ['lng', 'lat'],
        data: new Float32Array()
    }]
};
fetchData(0);


目录
相关文章
|
8月前
|
定位技术
94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)
94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)
23 0
|
8月前
269Echarts - GL 关系图(1w 节点 2w7 边的NPM 依赖图)
269Echarts - GL 关系图(1w 节点 2w7 边的NPM 依赖图)
35 0
|
8月前
268Echarts - GL 关系图(GraphGL - Large Internet)
268Echarts - GL 关系图(GraphGL - Large Internet)
26 0
|
8月前
|
异构计算
267Echarts - GL 关系图(GraphGL GPU Layout)
267Echarts - GL 关系图(GraphGL GPU Layout)
36 0
|
8月前
266Echarts - GL 矢量场图(Global Wind Visualization 2)
266Echarts - GL 矢量场图(Global Wind Visualization 2)
35 0
|
8月前
266Echarts - GL 矢量场图(Global wind visualization)
266Echarts - GL 矢量场图(Global wind visualization)
33 0
|
8月前
265Echarts - GL 矢量场图(Flow on the cartesian)
265Echarts - GL 矢量场图(Flow on the cartesian)
29 0
|
8月前
261Echarts - 3D 路径图(Flights GL)
261Echarts - 3D 路径图(Flights GL)
27 0
|
8月前
215Echarts - 拖拽(Try Dragging these Points)
215Echarts - 拖拽(Try Dragging these Points)
25 0
|
8月前
135Echarts - 路径图(Use lines to draw 1 million ny streets.)
135Echarts - 路径图(Use lines to draw 1 million ny streets.)
17 0