先来看效果图

一 前置知识

  1. 官方Overlay-覆盖物的抽象基类
方法 返回值 描述
initialize(map: Map) HTMLElement 抽象方法，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。自定义覆盖物时需要实现此方法。自定义覆盖物时需要将覆盖物对应的HTML元素返回
isVisible() Boolean 判断覆盖物是否可见
draw() none 抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法
show() none 显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
hide() none 隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none

  1. 重点方法讲解

    • initialize(map: Map)

      初始化覆盖物，当调用map.addOverlay(--)，会自动调用，自定义Overlay在此处可以定义呈现在地图上的HTML元素

    • draw()

      当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作

    • map.pointToOverlayPixel(point);

      将经纬度坐标转换成屏幕的像素坐标，此像素坐标就是ECharts图形渲染在地图中的位置

  2. 自定义实现，需要实现对 initialize 和draw 方法进行实现，达到自定义Overlay的目的

  3. MapPanes

    此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。通过 map.getPanes().labelPane.appendChild(div); 将自定义的div添加到覆盖物列表

二 实现

  1. 新建complexCustomOverlay.js文件，废话少说，直接代码
!function(baiduMap) {

        /**

         * 自定义覆盖物类, 取名 ComplexCustomOverlay 使用时直接 new ComplexCustomOverlay 即可

         * 示例 new ComplexCustomOverlay(121.620483, 31.291102, function(div_obj){});

         * @param {*} lng 经度

         * @param {*} lat 维度

         * @param {*} callback 回调方法

         */

        ComplexCustomOverlay = function(lng, lat, callback) {

            this._point = new baiduMap.Point(lng, lat);

            this._callback = callback;

        };

		//继承Overlay基类

        ComplexCustomOverlay.prototype = new baiduMap.Overlay();

		/**

          * 实现initialize方法，此方法在map.addOverlay(--)时会自动调用，完成初始化工作

         */

        ComplexCustomOverlay.prototype.initialize = function(map) {

            this._map = map;

            //生成div,用来承载ECharts

            var div = this._div = document.createElement("div");

            // 可以根据情况添加些样式信息

            // div.style.backgroundColor = "#fff";

            div.style.zIndex = baiduMap.Overlay.getZIndex(this._point.lat);

            div.style.width = "100px";

            div.style.height = "100px";

            // marginLeft marginTop 的设置可以让这个div的中心点和给定的经纬度重合

            div.style.marginLeft = '-50px';

            div.style.marginTop = '-50px';

            //必须是绝对定位，不然会偏离原来位置

            div.style.position='absolute';

            //将该覆盖物添加到标签覆盖物列表

            map.getPanes().labelPane.appendChild(div);

            //调用传入的回调方法

            this._callback(div);

            return div;

        };

		/**

          * 当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作

          * 例如 拖动地图、地图放大缩小等操作，都会自动调用draw方法进行重绘

         */

        ComplexCustomOverlay.prototype.draw = function(){

            //饼图的位置设置,需要获取该地图点的像素位置x,y

            var pixel = this._map.pointToOverlayPixel(this._point);

            this._div.style.left = pixel.x + "px";

            this._div.style.top  = (pixel.y - 30) + "px";

        }

}(BMap); // 将BMap作为参数传入
  1. 调用
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>百度地图结合ECharts实现复杂覆盖物(Overlay)</title>

    <style>

        html, body {

            margin: 0;

            padding: 0;

            height: 100%;

            width: 100%;

        }

        #map {

            height: 100%;

            width: 100%;

        }

    </style>

    <script type="text/javascript" src="./js/echarts.min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>

    <script type="text/javascript" src="./js/complexCustomOverlay.js"></script>

</head>

<body>

    <div id="map"></div>

</body>

</html>

<script type="text/javascript">

        var map = new BMap.Map("map");    // 创建Map实例

        map.centerAndZoom(new BMap.Point(121.620523, 31.290215), 18);

        map.setCurrentCity("上海");

        map.enableScrollWheelZoom(true);

        // 地图加载完成事件

        // map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});

        map.addEventListener('zoomend', function(e){

            var zoom = e.target.getZoom();

            if(zoom < 17) { // 小于17级，统计图

                myCompOverlay.hide();

            } else {

                myCompOverlay.show();

            }

        });

        var drawPie = function(obj) {

            //map.removeOverlay(overlay: Overlay)

            //map.clearOverlays()

            var echarts2 = echarts.init(obj);

            var option = {

                tooltip : {

                    trigger: 'item',

                    formatter: "{b}:{c}"

                },

                series : [

                    {

                        name: '人流统计图',

                        type: 'pie',

                        radius : ['0', '35%'],

                        data:[

                            {value:679, name:'人流数量'}

                        ],

                        color:['green'],// 饼图的颜色

                        label: {

                            normal: {

                                show: true,

                                position: 'inside',

                                padding: [0, 0, 20, 0],

                                formatter: '{c}'

                            },

                        },

                        labelLine: {

                            show: false

                        }

                    },

                    {

                        name: '垃圾桶数量统计',

                        type: 'pie',

                        radius : ['40%', '100%'],

                        data:[

                            {value:335, name:'干垃圾桶'},

                            {value:110, name:'湿垃圾桶'},

                            {value:210, name:'可回收垃圾桶'},

                            {value:410, name:'有害垃圾桶'}

                        ],

                        itemStyle: {

                            emphasis: {

                                shadowBlur: 10,

                                shadowOffsetX: 0,

                                shadowColor: 'rgba(0, 0, 0, 0.5)'

                            }

                        },

                        label: {

                            normal: {

                                show: true,

                                position: 'inside',

                                formatter: '{c}'

                            }

                        },

                        labelLine: {

                            show: false

                        }

                    }

                ]

            };

            echarts2.setOption(option);

        };

		// 实例化自定义Overlay,传入经纬度以及回调方法

        var myCompOverlay = new ComplexCustomOverlay(121.620483, 31.291102, drawPie);

        map.addOverlay(myCompOverlay);

</script>

百度地图结合ECharts实现复杂覆盖物(Overlay)的更多相关文章

  1. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  2. Android百度地图开发02之添加覆盖物 + 地理编码和反地理编码

    下面来看一下地图上覆盖物的添加,以及地理编码和反地理编码. 添加覆盖物 在地图上添加覆盖物,一般需要以下几个步骤: 1. 定义坐标点,有可能是一个,有可能是多个(比如:多边形覆盖物). 2. 构造Ov ...

  3. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

  4. 百度地图和echarts结合实例

    1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...

  5. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

  6. 百度地图API的事件处理：覆盖物的如何阻止冒泡

    百度地图,为了让事件使用的更方便,进行一层封装 详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm 主要的修改点: 1. 使用事件代理. ...

  7. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  8. ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  9. 解决vue中百度地图覆盖物引用本地图片问题

    这次的主要目的是在百度地图中引用自定义的覆盖物,路径是再asset/images/文件夹下,直接引用出错.需要先导入再引用. 在<script></script>代码中增加如下 ...

随机推荐

  1. Web 跨域请求问题的解决方案- CORS 方案

    1.什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域现象 实例 域名不相同 www.baidu.com与www.taobao 一级域名相同,但是端口不相同 www.baidu.com:80 ...

  2. Java模拟UDP通信

    目录 Java基础:模拟UDP通信 1.一次发送,一次接收 1.1.发送方 1.2.接收方 2.多次发送,多次接收 2.1.发送方 2.2.接收方 3.模拟双方通信 3.1.发送方的线程 3.2.接收 ...

  3. SpringBoot：模板引擎 thymeleaf、ContentNegotiatingViewResolver、格式化转换器

    目录 模板引擎 thymeleaf ContentNegotiatingViewResolver 格式化转换器 模板引擎 thymeleaf.ContentNegotiatingViewResolve ...

  4. 王颖奇 20171010129《面向对象程序设计（java）》第十六周学习总结

    实验十六  线程技术 实验时间 2018-12-8 理论部分: 并发⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.线程的概念 程序是一段静态的代码,它是应用程序执行的蓝本. 进 ...

  5. 如何发挥Visual Studio 2019强大的编辑功能轻松编辑Keil项目

    本文地址:https://www.cnblogs.com/jqdy/p/12565161.html 习惯了VS的强大编辑功能,对Keil 5越来越深恶痛绝.查阅网络文章后按图索骥初步实现了VS编辑Ke ...

  6. VS Code的安装与配置

    VS Code的安装与配置 Visual Studio Code(VS Code)是微软旗下的一个开源文本编辑器,支持Windows.macOS.Linux操作系统.数量众多.种类多样的插件极大提高了 ...

  7. 老板：kill -9 的原理都不知道就敢去线上执行？明天不用来了！

    GitHub 14.5k Star 的Java工程师成神之路,开放阅读了! 相信很多程序员对于Linux系统都不陌生,即使自己的日常开发机器不是Linux,那么线上服务器也大部分都是的,所以,掌握常用 ...

  8. Elasticsearchdump 数据导入/导出

    一.安装过程 Elasticsearchdump 仓库地址,详细使用情况 当前工具主要是用来对ES中的数据进行数据导入/导出,以及对数据迁移相关,使用elasticdump工具需要使用到npm,所以需 ...

  9. swagger集成遇到的坑一个

    SpringBoot项目集成swagger项目遇到一个问题: 访问swagger-ui.html 没有加载到数据,也没有加载到页面的html和css资源 除了 1.添加swagger的pom依赖 2. ...

  10. java ->Date、DateFormat、Calendar类

    Date类概述 类 Date 表示特定的瞬间,精确到毫秒. 毫秒概念:1000毫秒=1秒 毫秒的0点: System.currentTimeMillis()  相当于Date d = new Date ...