Echarts结合高德地图

时间 2018/9/20 18:56:47 加载中...

此示例的 Vue 版本见:http://www.sqber.com/articles/echarts-with-gaode-map-vue.html


此示例的效果地址: http://www.sqber.com/file/echarts/gaode.html


效果图:

2018-09-20_190506.jpg


首先需要去 高德地图开放平台 注册开发者帐号,并申请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,AMap.CustomLayer"></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集成地图都是大同小异的。


*******************2021年7月8日更新**************************


注意:


引入高德地图时的 plugin (AMap.ControlBar,AMap.CustomLayer)一定要有。否则会报错


完。

版权说明
作者:SQBER
文章来源:http://blog.sqber.com/articles/echarts-with-gaode-map.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。