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

最新推荐文章于 2024-02-27 15:02:23 发布

weixin_39522927

最新推荐文章于 2024-02-27 15:02:23 发布

阅读量424

点赞数

文章标签：迁徙图

本文链接：https://blog.csdn.net/weixin_39522927/article/details/112636054

版权

本文展示了如何结合openlayers6与echarts4创建迁徙图，提供了详细的效果图，并给出了源码链接。读者可以通过阅读获取到html源码，了解更多关于GIS地图开发的内容。

摘要由CSDN通过智能技术生成

效果图如下：

参考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

最低0.47元/天解锁文章

weixin_39522927

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
迁徙图_openlayers6结合echarts4实现迁徙图

效果图如下：参考GitHub来实现的，更详细的源码以及参数说明见：sakitam-fdd/ol3Echartsgithub.com本篇文章的html源码：<!DOCTYPE html> <html> <head> <title>openlayers6结合echarts4实现迁徙图</title> <link rel=...
复制链接

扫一扫