概述

ECharts是开源的可视化图表库，其中有丰富的图表。本文使用Mapbox结合ECharts插件实现了简单的迁徙地图。

预览效果

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>mapbox + echarts （简单迁徙图）</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" /><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><script src="./EchartsLayer.js"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}
</style>
</head><body><div id="map"></div><script>mapboxgl.accessToken = 'your accessToken';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v10',center: [119.2070396626, 26.0471838188],minZoom: 12,zoom: 14});var geoCoordMap = {"1": [119.2070396626, 26.0471838188],"2": [119.2147498638, 26.0481609598],"3": [119.209339, 26.038355],"4": [119.2163806469, 26.0442086921],};var oneData = [[{name: "1"},{name: "2",value: 20}],[{name: "1"},{name: "3",value: 20}],[{name: "1"},{name: "4",value: 20}]];var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[1].name];var toCoord = geoCoordMap[dataItem[0].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[1].name,toName: dataItem[0].name,coords: [fromCoord, toCoord]});}}return res;};var series = [];[["1", oneData],].forEach(function (item,i
) {series.push({name: 'geolines',type: "lines",coordinateSystem: "GLMap",zlevel: 1,effect: {show: true,period: 4,trailLength: 0.8,color: '#f00',symbolSize: 4},lineStyle: {normal: {color: 'rgba(34, 181, 230, 0.15)',width: 0.5,opacity: 0.4,curveness: 0.2}},data: convertData(item[1])});});var option = {GLMap: {roam: true},coordinateSystem: 'GLMap',//series是在地图上的线条等效果的配置文件，具体可以查阅文档。series: series};map.on('load', () => {var echartslayer = new EchartsLayer(map);echartslayer.chart.setOption(option);})
</script></body></html>

说明

代码中引入的EChartsLayer.js文件，源于超图的共享，稍后会把链接放在文末。
本文只是实现了简单的迁徙图，复杂的样式可以参考ECharts Gallery或者超图的Demo。

Mapbox + ECharts 实现简单迁徙图

文章目录

概述

预览效果

实现代码

说明

相关链接

Mapbox + ECharts 实现简单迁徙图相关推荐

最新文章

热门文章