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

简介: 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);
目录
相关文章
|
4天前
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
5 0
Echarts地图实现:山东省会员活跃度
|
4天前
|
JSON JavaScript 前端开发
Echarts地图实现:杭州市困难人数分布
使用ECharts实现杭州困难人数分布地图,结合地区与散点图,动态展示数据变化。支持进入下级区域并返回。预览包含动画效果。关键代码涉及地图初始化、数据加载及事件处理。需`hangzhou-map.json`数据文件。完整代码和资源见链接。
13 0
Echarts地图实现:杭州市困难人数分布
|
7天前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
7天前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
2月前
|
定位技术
echarts 地图点位
在使用ECharts的点击事件绑定中,观察到每次点击会递增一次后台请求:首次点击请求1次,第二次点击请求2次,第三次点击请求3次,以此类推。为解决这个问题,尝试在事件绑定前使用`myChart.off(&#39;click&#39;)`移除原有监听器,然后添加新的点击事件处理函数。
25 0
|
2月前
|
数据采集 JSON 数据可视化
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
16 1
|
2月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
4天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
|
8天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
19 0