![28790ca742dfaed069faa67b3286c2cd.png](https://i-blog.csdnimg.cn/blog_migrate/fe43bd7652a871a90b52fa94e0589d62.jpeg)
效果图如下:
![c570ecb52f7855997fbbcd1a4c320e31.png](https://i-blog.csdnimg.cn/blog_migrate/db1be4311dd52122b8d140ee15aa177d.jpeg)
参考GitHub来实现的,更详细的源码以及参数说明见:
![0d743c98df6fe482c85112f3b9f90554.png](https://i-blog.csdnimg.cn/blog_migrate/deefd232861685b0990243276379cb17.jpeg)
本篇文章的html源码:
<!DOCTYPE html>
<html>
<head>
<title>openlayers6结合echarts4实现迁徙图</title>
<link rel="stylesheet" href="lib/ol.css">
<script src="lib/ol.js"></script>
<script src="lib/echarts.js"></script>
<script src="lib/ol-echarts.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://unpkg.com/ol-echarts/dist/ol-echarts.js"></script>-->
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
/**
* 地图创建初始化
*/
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: [116.55406673632812, 39.94828066015626],
projection: 'EPSG:4326',
zoom: 10
})
});
//迁徙图图层初始化
var echartslayer = new EChartsLayer(getOption());
echartslayer.appendTo(map)
function getOption () {
var geoCoordMap = {
'上海': [121.4648, 31.2891],
'东莞': [113.8953, 22.901],
'东营': [118.7073, 37.5513],
'中山': [113.4229, 22.478],
'临汾': [111.4783, 36.1615],
'临沂': [118.311