先來看效果圖
一 前置知識
- 官方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>
轉載於：https://www.cnblogs.com/itgiser/p/11463352.html