在地图上秀出自己的风采——百度地图自定义ECharts覆盖物

2024-02-14 14:26:06

千里之行，始于足下

我们先了解下概念：百度地图中的ECharts覆盖物，是指在地图上叠加的可视化图表，可以使用ECharts库进行绘制。

然后就是思路：要实现自定义覆盖物，需要先将ECharts图表绘制成图片，然后再将图片添加到地图上。以下面饼图为例，我们要先创建一个ECharts图表，然后通过ECharts提供的API将其导出为图片，最后将图片添加到地图上。

了解概念、确定思路后，就是实践：

创建ECharts图表

var myChart = echarts.init(document.getElementById('myChart'));
var option = {
    series: [{
        type: 'pie',
        data: [{
            value: 335,
            name: '直接访问'
        }, {
            value: 310,
            name: '邮件营销'
        }, {
            value: 234,
            name: '联盟广告'
        }, {
            value: 135,
            name: '视频广告'
        }, {
            value: 1548,
            name: '搜索引擎'
        }]
    }]
};
myChart.setOption(option);

将ECharts图表导出为图片

var image = myChart.getRenderedCanvas().toDataURL("image/png");

将图片添加到地图上

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
var icon = new BMap.Icon(image, new BMap.Size(300, 200));
marker.setIcon(icon);
map.addOverlay(marker);