可视化项目需要在百度地图上添加柱状图、折线图、饼图等，如下图：
示例.png
示例饼状图.png
查了一下官网并没有相似的例子，思路是将经纬度转为像素点，刚开始用了convertToPixel方法，一直报错不支持，后来又查了好多资料，这个方法不支持bmap，而应该用
const coord = myChart.getModel().getComponent('bmap').coordinateSystem.dataToPoint([lon, lat]);
加载时要监听bmap的缩放和拖拽，实时绘制柱状图的位置，chart监听地图缩放平移用bmaproam，geo坐标系用georoam，代码如下
const coor = char.getModel().getComponent('bmap').coordinateSystem;
function renderC() {
op.grid.map((item, i) => {
const coord = coor.dataToPoint(item.data);
console.log(`gird${i}:`, coord);
item.left = coord[0] - 15;
item.top = coord[1] - 35;
});
char.setOption(op)
}
renderC();
const ren = throttle(renderC, 100, 10);
char.on("bmaproam", ren);
此时以为要成功了，然而高兴的太早，缩放时图表位置加载合适，平移时不行，心态要炸。
然后又找找找，找到了下面的方法，用百度地图自己的方法，终于合适。
function renderC() {
const bmap = char.getModel().getComponent('bmap').getBMap();
const projection = bmap.getMapType().getProjection();
const box = bmap.getSize();
const zoom = window.Math.pow(2, 18 - bmap.getZoom());
const center = projection.lngLatToPoint(bmap.getCenter());
op.grid.map((item, i) => {
let point = projection.lngLatToPoint({ lng: item.data[0], lat: item.data[1]})
let x = Math.round((point.x - center.x) / zoom + box.width / 2);
let y = Math.round((center.y - point.y) / zoom + box.height / 2);
item.left = x - 15 + 'px';
item.top = y - 35 + 'px';
});
char.setOption(op);
}
renderC();
const ren = throttle(renderC, 10);
char.on("bmaproam", ren);
补充：
const throttle = (fn, delay, debounce) => {
let currCall;
let lastCall = 0;
let lastExec = 0;
let timer = null;
let diff;
let scope;
let args;
delay = delay || 0;
function exec() {
lastExec = (new Date()).getTime();
timer = null;
fn.apply(scope, args || []);
};
const cb = function() {
currCall = (new Date()).getTime();
scope = this;
args = arguments;
diff = currCall - (debounce ? lastCall : lastExec) - delay;
clearTimeout(timer);
if (debounce) {
timer = setTimeout(exec, delay);
} else {
if (diff >= 0) {
exec();
} else {
timer = setTimeout(exec, -diff);
}
}
lastCall = currCall;
};
return cb;
};
ps：
1、需要引入
import 'echarts/extension/bmap/bmap';
2、需要引入
<script src="https://api.map.baidu.com/api?v=2.0&ak=自己的token"></script>
3、加载bmap组件
option = {
// 加载 bmap 组件
bmap: {
// 百度地图中心经纬度
center: [120.13066322374, 30.240018034923],
// 百度地图缩放
zoom: 14,
// 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
roam: true,
// 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
mapStyle: {}
},
series: [{
type: 'scatter',
// 使用百度地图坐标系
coordinateSystem: 'bmap',
// 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
data: [ [120, 30, 1] ]
}]
}
// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
