高德地图结合百度echart使用
效果地址： http://www.sqber.com/file/echarts/gaode.html
效果图：
首先需要去 高德地图开放平台 注册开发者帐号，并申请key。并了解高德地图的基本使用。
上面的效果其实背景是用的高德地图而已，上面的效果还是echarts来实现的。
HTML代码如下：
<html> <head> <meta charset="utf-8"> <title>html5 echarts地图分布动画特效</title> <style> html,body{margin:0;padding:0;} </style> </head> <body style="background:#1B1B1B"> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom--> <div id="main" style="height:100%;width: 100%;"> </div> <!--Step:2 Import echarts.js--> <!--Step:2 引入echarts.js--> <!--这里的key需要自己去申请--> <script src="https://webapi.amap.com/maps?v=1.4.8&key=2a5072bcb1b308fb0a64020a0f868016&plugin=AMap.ControlBar"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script> <script src="./js/echarts-amap.min.js" charset="UTF-8"></script> <script type="text/javascript"> $(function(){ var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title : { text: '模拟迁徙', subtext: '数据纯属虚构', left: 'center', textStyle : { color: '#fff' } }, amap: { maxPitch: 60, pitch: 10, //45 俯仰角 viewMode: '3D', zoom: 5.5, expandZoomRange: true, zooms: [3, 20], mapStyle: 'amap://styles/darkblue', //地图主题 center: [110,33], //中心点 rotation: 0, //顺时针旋转角度 resizeEnable: true, }, animation: false, series: [] }); //上面的部分是echarts的配置，需要注意的是amap，这里的配置就是针对 高德地图 的配置了，而支持哪些配置 //可以去高德地图的开发平台去查看 var map = myChart.getModel().getComponent('amap').getAMap(); var layer = myChart.getModel().getComponent('amap').getLayer(); AMap.plugin(["AMap.ControlBar"], function() { var bar = new AMap.ControlBar(); map.addControl(bar); }) AMap.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); AMap.event.addListener(map,'zoomend',function(){ console.log('当前缩放级别：' + map.getZoom()); console.log('俯视视角' + map.getPitch()); console.log('俯视视角' + map.getPitch()); }); var series = [ { "name": "上海 Top10", "coordinateSystem": "amap", "type": "lines", "zlevel": 1, "effect": { "show": true, "period": 6, "trailLength": 0.7, "color": "#fff", "symbolSize": 3 }, "lineStyle": { "normal": { "color": "#a6c84c", "width": 0, "curveness": 0.2 } }, "data": [ { "fromName": "上海", "toName": "包头", "coords": [ [ 121.4648, 31.2891 ], [ 109.853634,40.651412 ] ], "value": 95 } ] }, { "name": "上海 Top10", "coordinateSystem": "amap", "type": "lines", "zlevel": 2, "symbol": [ "none", "arrow" ], "symbolSize": 10, "lineStyle": { "normal": { "color": "#a6c84c", "width": 1, "opacity": 0.6, "curveness": 0.2 } }, "data": [ { "fromName": "上海", "toName": "包头", "coords": [ [ 121.4648, 31.2891 ], [ 109.853634,40.651412 ] ], "value": 95 } ] }, { "name": "上海 Top10", "type": "effectScatter", "coordinateSystem": "amap", "zlevel": 2, "rippleEffect": { "brushType": "stroke" }, "label": { "normal": { "show": true, "position": "bottom", "formatter": "{b}" } }, "itemStyle": { "normal": { "color": "#a6c84c" } }, "data": [ { "name": "包头", "value": [ 109.853634,40.651412, 95 ] } ] } ]; myChart.setOption({ series: series }); //下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步 layer.render = function() { // let series = myChart.getOption().seriesIndexes; // myChart.setOption({ // series: [] // }); myChart.setOption({ series: series }); console.log('当前缩放级别：' + map.getZoom()); console.log('俯视视角：' + map.getPitch()); console.log('顺时针：' + map.getRotation()); } }); </script> </body> </html>
关于使用的方法，在代码里面比较清楚了。
主要就是引入必要的高德地图js文件，然后通过
var map = myChart.getModel().getComponent('amap').getAMap();
来获取到高德地图。
而上面的迁徙效果，是由 option 中的 series 来实现的。
需要注意的是 option 中的 series 中的 coordinateSystem 的值是 amap，
而如果是集成百度地图的话，你会发现 option 配置的名字不是 amap 而是 bmap，引入的js文件也为 bmap.min.js
coordinateSystem 的值也是 bmap。
所以echarts集成地图都是大同小异的。
示例：
http://blog.sqber.com/articles/echarts-with-gaode-map.html
http://www.sqber.com/file/echarts/gaode.html
echarts_demo: echarts-amap.min.js
