在echarts中使用百度地图扩展,实现在地图上叠加显示散点图

需要申请百度地图ak;

//引入百度地图,echarts和echarts的百度地图扩展bmap
<script src="./echarts/echarts.js"></script>
<script src="./js/bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

//必须给容器一个宽高
<div id="main" style="width:500px;height:500px;"></div>
        
//初始化echarts,获得图表对象
var echartsModal = echarts.init(document.getElementById('main'));
echartsModal.setOption({
            bmap: {
                roam: true,//用户是否可以拖放和缩放地图                
                opt: { 
                	enableMapClick: false, //是否开启底图可点功能
                	minZoom: 9, //最小缩放级别
                	maxZoom: 16 //最大缩放级别
                }
            },
             series: [
                {
                    name: "A级",
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',//地图类型
                    data: aShops,
                    symbol: 'circle',
                    symbolSize: 10,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    animation: false,//必须设置animation: false,否则拖动地图,散点图的移动将会发生延迟
                    itemStyle: {
                        normal: {
                            color: "rgba(255,98,96,1)", //标志颜色
                        }
                    },
                    zlevel: 6
                },
                {
                    name: "B级",
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: bShops,
                    symbol: 'circle',
                    symbolSize: 10,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    animation: false,
                    itemStyle: {
                        normal: {
                            color: "rgba(0,175,255,1)", //标志颜色
                        }
                    },
                    zlevel: 6
                }, 
            ]
});

//添加百度地图插件bmp,获得地图对象,获取到的百度地图对象适用于所有的百度地图的接口。
var mapModal = echartsModal.getModel().getComponent('bmap').getBMap();

//设置地图的中心点和缩放级别
mapModal.centerAndZoom(new BMap.Point(113.1357014149, 29.3632163433), 10);

拖动地图,出现部分散点在地图上跟随拖动方向重复一直渲染,经过排查,最后发现是后端返回的散点的id有重复的出现,重复id的散点就会出现这种情况。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值