百度地图结合ECharts实现复杂覆盖物(Overlay)
先来看效果图
一 前置知识
- 官方Overlay-覆盖物的抽象基类
| 方法 | 返回值 | 描述 |
|---|---|---|
| initialize(map: Map) | HTMLElement | 抽象方法，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。自定义覆盖物时需要实现此方法。自定义覆盖物时需要将覆盖物对应的HTML元素返回 |
| isVisible() | Boolean | 判断覆盖物是否可见 |
| draw() | none | 抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法 |
| show() | none | 显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空 |
| hide() | none | 隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none |
重点方法讲解
initialize(map: Map)
初始化覆盖物，当调用map.addOverlay(--)，会自动调用，自定义Overlay在此处可以定义呈现在地图上的HTML元素
draw()
当地图发生变化，会自动调用此方法，进行覆盖物的重绘工作
map.pointToOverlayPixel(point);
将经纬度坐标转换成屏幕的像素坐标，此像素坐标就是ECharts图形渲染在地图中的位置
自定义实现，需要实现对 initialize 和draw 方法进行实现，达到自定义Overlay的目的
MapPanes
此类表示地图上所有覆盖物的容器集合，没有构造函数，通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。通过 map.getPanes().labelPane.appendChild(div); 将自定义的div添加到覆盖物列表
二 实现
- 新建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作为参数传入
- 调用
<!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)的更多相关文章
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- Android百度地图开发02之添加覆盖物 + 地理编码和反地理编码
下面来看一下地图上覆盖物的添加,以及地理编码和反地理编码. 添加覆盖物 在地图上添加覆盖物,一般需要以下几个步骤: 1. 定义坐标点,有可能是一个,有可能是多个(比如:多边形覆盖物). 2. 构造Ov ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- 百度地图API的事件处理：覆盖物的如何阻止冒泡
百度地图,为了让事件使用的更方便,进行一层封装 详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm 主要的修改点: 1. 使用事件代理. ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 解决vue中百度地图覆盖物引用本地图片问题
这次的主要目的是在百度地图中引用自定义的覆盖物,路径是再asset/images/文件夹下,直接引用出错.需要先导入再引用. 在<script></script>代码中增加如下 ...
随机推荐
- codeforce 270C Magical Boxes
C. Magical Boxes Emuskald is a well-known illusionist. One of his trademark tricks involves a set of ...
- FarmCraft
题意:mhy住在一棵有n个点的树的1号结点上,每个结点上都有一个妹子.mhy从自己家出发,去给每一个妹子都送一台电脑,每个妹子拿到电脑后就会开始安装zhx牌杀毒软件,第i个妹子安装时间为ci.树上的每 ...
- java读源码 之 map源码分析（HashMap，图解）一
开篇之前,先说几句题外话,写博客也一年多了,一直没找到一种好的输出方式,博客质量其实也不高,很多时候都是赶着写出来的,最近也思考了很多,以后的博客也会更注重质量,同时也尽量写的不那么生硬,能让大家 ...
- Day_11【集合】扩展案例1_遍历打印学生信息，获取学生成绩的最高分，获取成绩最高的学员，获取学生成绩的平均值，获取不及格的学员数量
分析以下需求,并用代码实现: 1.按照以下描述完成类的定义 学生类 属性: 姓名name 年龄age 成绩score 行为: 吃饭eat() study(String content)(content ...
- STM32F767ZI NUCLEO144 基于CubeIDE快速开发入门指南
刚入手的NUCLEO-F767ZI:整合官网资源,理清思路,便于快速进行快发: 文章目录 1 NUCLEO 系列 2 NUCLEO-F767ZI 3 环境搭建 3.1 Keil/IAR安装 3.2 C ...
- Openwrt：mtd/mtd_write烧写固件
文章目录 1 查看当前系统分区信息 2 备份固件firmware 3 恢复固件firmware 4 备份恢复Openwrt路由器配置 5 恢复Openwrt路由器默认设置 6 刷新路由器固件 比较简单 ...
- 阿里面试居然跟我扯了半小时的CyclicBarrier
一个大腹便便,穿着格子衬衫的中年男子,拿着一个贴满Logo的Mac向我走来,看着稀少的头发,我心想着肯定是顶级技术大牛吧!但是我也是一个才华横溢的人,稳住我们能赢. 面试官:您好,先做一下自我介绍吧! ...
- [hdu4631 Sad Love Story]最近点对，枚举
题意:S是平面内点的集合,初始为空,每次向集合里面加入一个点P(x,y),询问S内最近点对的距离的平方和 思路:设当前集合的答案为D,则找到集合里面横坐标在(x-√D,x+√D)内的数,用它们来更新答 ...
- 08JAVA基础关键字(final、static)以及抽象类和接口
一.关键字 1.final 修饰类 修饰变量 修饰成员方法 该类为最终类,不能被继承 该变量为常量 该成员方法不能被重写 2.static (1).生命周期 随着类的加载而加载 (2).特点 被本类所 ...
- angular js 删除及多条删除
一.编写service //删除 public int delete(Long id); //多条删除 public int deletes(List<Long> id); 二.编写ser ...