迁徙图_openlayers6结合echarts4实现迁徙图

作者：凡人多烦事01 | 2024-06-16 20:39:04

踩

openlayers迁徙图

效果图如下：

参考GitHub来实现的，更详细的源码以及参数说明见：

sakitam-fdd/ol3Echartsgithub.com

本篇文章的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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/728175