mapbox+eCharts路线大数据渲染

eCharts可以实现大量数据迅速渲染,笔者在项目中,测试包含25w余拐点的总计7w余条线渲染总共用时1秒左右,性能表现相当优秀,显示效果也相当不错。

eCharts天生支持mapbox,就像其天生支持百度地图一样,而选择前者的原因是其地图相当漂亮,而且支持相当程度的用户自定义地图。

效果图:

1,添加相关JS引用

包含mapbox底图引用以及eCharts引用

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet'/>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>

    <script src="http://www.echartsjs.com/dist/echarts-gl.min.js"></script>
    <script src="http://www.echartsjs.com/dist/echarts-gl.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

以上引用为在线引用,可以直接添加到项目而不必下载相关文件

2,在HTML中添加相关容器

<div id="main"><div>

之后新建的JS文件或标签书写JS

3,在JS中引入mapbox

mapboxgl.accessToken = 'pk.eyJ1Ijoibmlld3poIiwiYSI6ImNqbjRvM2F4ODA5ZDEzd2xkd2oxZnB4Y2UifQ.phMvmLw9t9lDxobKyYVbPw';

4,初始化底图及图表

var chart = echarts.init(document.getElementById('MapDiv'));
chart.setOption({
    mapbox: {
        center: [117, 39],
        zoom: 10,
        altitudeScale: 10000000,
        style: 'mapbox://styles/mapbox/dark-v9',
        postEffect: {
            enable: true,
            FXAA: {
                enable: true
            }
        },
        light: {
            main: {
                intensity: 1,
                shadow: true,
                shadowQuality: 'high'
            },
            ambient: {
                intensity: 0.
            }
        }
    },
    series: [{
        type: 'lines3D',

        coordinateSystem: 'mapbox',

        blendMode: 'lighter',

        polyline: true,

        data: []
    }]
})

数据的数据在此可以先填为空,之后可以动态追加

5,追加数据并渲染

            chart.setOption({
                series: [{
                    type: 'lines3D',

                    coordinateSystem: 'mapbox',

                    blendMode: 'lighter',

                    polyline: true,

                    lineStyle: {
                        width: 1,
                        color: 'red',
                        opacity: 1
                    },

                    data: callback[0]
                },
                    {
                        type: 'lines3D',

                        coordinateSystem: 'mapbox',

                        blendMode: 'lighter',

                        polyline: true,

                        lineStyle: {
                            width: 1,
                            color: 'green',
                            opacity: 1
                        },

                        data: callback[1]
                    },
                    {
                        type: 'lines3D',

                        coordinateSystem: 'mapbox',

                        blendMode: 'lighter',

                        polyline: true,

                        lineStyle: {
                            width: 1,
                            color: 'blue',
                            opacity: 1
                        },

                        data: callback[2]
                    },
                    {
                        type: 'lines3D',

                        coordinateSystem: 'mapbox',

                        blendMode: 'lighter',

                        polyline: true,

                        lineStyle: {
                            width: 1,
                            color: 'yellow',
                            opacity: 1
                        },

                        data: callback[3]
                    },
                    {
                        type: 'lines3D',

                        coordinateSystem: 'mapbox',

                        blendMode: 'lighter',

                        polyline: true,

                        lineStyle: {
                            width: 1,
                            color: 'orange',
                            opacity: 1
                        },

                        data: callback[4]
                    }
                ]
            })

PS、数据格式

三维数组

数据整体为一个数组,数组中,每条线又为一个数组,其中,线上每个点又构成[X,Y]数组,即;

[[[0,0],[1,1],[1,2]],[[10,10],[100,100]]]

数据数组中,有两个子数组,表示两条线,其中每个最低级数组表示线上点的坐标。

你想了解关于 Mapbox GL 和 Echarts 迁徙图的相关内容吗?Mapbox GL 是一个开源的地图绘制库,可以用来创建交互式的地图应用程序。Echarts 是一个基于 JavaScript 的数据可视化库,可以用来展示各种类型的图表,包括迁徙图。 要使用 Mapbox GL 和 Echarts 创建迁徙图,你可以按照以下步骤进行操作: 1. 首先,引入 Mapbox GL 和 Echarts 的相关库文件到你的项目中。你可以从官方网站或使用包管理工具如npm或yarn来安装它们。 2. 创建一个包含地图容器的 HTML 元素,在这个容器中将显示迁徙图。你可以使用 Mapbox GL 提供的 API 来初始化地图和设置样式。 3. 准备迁徙数据。迁徙数据通常包含起始地点、目标地点和迁徙人数等信息。你可以将这些数据存储在一个 JSON 文件中,或者通过网络请求从后端获取。 4. 在 JavaScript 代码中,使用 Echarts 的 API 创建一个迁徙图实例。通过配置项,你可以设置迁徙图的样式、数据源和交互行为等。 5. 将迁徙图实例绑定到地图容器中,这样迁徙图就会在地图上进行渲染。 以下是一个简单的示例代码,演示了如何使用 Mapbox GL 和 Echarts 创建迁徙图: ```html <!DOCTYPE html> <html> <head> <title>Mapbox GL + Echarts 迁徙图</title> <meta charset="utf-8" /> <style> #map { width: 800px; height: 600px; } </style> </head> <body> <div id="map"></div> <script src="path/to/mapbox-gl.js"></script> <script src="path/to/echarts.js"></script> <script> // 初始化地图 mapboxgl.accessToken = 'your-access-token'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lon, lat], zoom: 10 }); // 准备迁徙数据 var migrationData = [ { from: [fromLon1, fromLat1], to: [toLon1, toLat1], count: 100 }, { from: [fromLon2, fromLat2], to: [toLon2, toLat2], count: 200 }, // ... ]; // 创建迁徙图实例 var chartDom = document.getElementById('map'); var myChart = echarts.init(chartDom); var option = { series: [{ type: 'lines', data: migrationData.map(function (item) { return { coords: [item.from, item.to], value: item.count }; }), // 其他配置项... }] }; myChart.setOption(option); // 将迁徙图绑定到地图容器中 map.on('load', function () { var canvas = myChart.getCanvas(); var container = map.getCanvasContainer(); container.appendChild(canvas); }); </script> </body> </html> ``` 请注意,上述代码中的一些参数如 access token、经纬度等需要根据你的实际情况进行设置。 希望这个回答能够帮到你!如果有任何问题,请随时提问。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值