ECharts 和百度地图的叠加示例（下）

前言

汇总了几个 ECharts 地图和百度地图在可视化展示时的综合示例。

主要是在 ECharts 地图和百度地图上叠加展示一些数字、图片、其它图表和轨迹动画。

另外因为每个示例的代码配置项比较繁琐，这里只贴核心代码。

这是下篇百度地图部分。上篇是 ECharts 部分。

BaiduMap 叠加带数字的气泡

核心配置

• 定义一个函数 addMarker（函数名称随意），传入参数百度地图 Point 类的实例，及 Label 类的实例
• 循环遍历各省份数据，根据 geoCoordMap 中的经纬度生成百度地图 Point 类的实例 point,创建 Label 类的实例用来显示各省分的数据。
• 循环调用 addMarker 方法。

// 百度地图API功能
var map = new BMap.Map("map");
// 编写自定义函数,创建标注
function addMarker(point, label) {
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
  marker.setLabel(label);
}
var geoCoordMap = {
  黑龙江: [127.9688, 45.368],
  // 省略若干...
};
// 遍历各省数据，根据省份名称对应的经纬度生成point和label
Object.keys(geoCoordMap).forEach(function(key) {
  var point = new BMap.Point(geoCoordMap[key][0], geoCoordMap[key][1]);
  var label = new BMap.Label(key + Math.round(Math.random() * 100), {
    offset: new BMap.Size(-10, -20),
  });
  addMarker(point, label);
});

BaiduMap 叠加图片

核心配置

• 创建 Icon 类，并传入图片地址，得到自定义的图形标注
• 创建 Marker 类的实例，传入参数：point 和 icon 实例，并通过百度地图 api:addOverlay 添加到地图中。

// 百度地图API功能
var map = new BMap.Map("map");
// 编写自定义函数,创建标注
function addMarker(point, label) {
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
  marker.setLabel(label);
}
var geoCoordMap = {
  黑龙江: [127.9688, 45.368],
  //省略若干...
};
Object.keys(geoCoordMap).forEach(function(key) {
  var point = new BMap.Point(geoCoordMap[key][0], geoCoordMap[key][1]);
  var iconLlist = [
    "http://online.sccnn.com/img2/5890/jc160506-13.png",
    "http://online.sccnn.com/img2/5890/jc160506-15.png",
    "http://online.sccnn.com/img2/5890/jc160506-10.png",
    "http://online.sccnn.com/img2/5890/jc160506-02.png",
  ];
  var index = parseInt(Math.random() * 4);
  var myIcon = new BMap.Icon(iconLlist[index], new BMap.Size(150, 150));
  var marker = new BMap.Marker(point, { icon: myIcon });
  map.addOverlay(marker);
});

BaiduMap 叠加动态轨迹

核心配置

• 定义轨迹随时间变化的经纬度数组
• 定义 drawLine 方法绘制两个经纬度间的弧线，并在最近的点添加标注点。
• 循环遍历经纬度数组，间隔一定时间调用 drawLine 方法

// 百度地图API功能
var map = new BMap.Map("map");
var beijingPosition = new BMap.Point(116.432045, 39.910683),
  hangzhouPosition = new BMap.Point(120.129721, 30.314429),
  taiwanPosition = new BMap.Point(121.491121, 25.127053);
var points = [beijingPosition];
var i = 0;
var carPoint;
var carMarker;
// while (i < 5) {
setInterval(function() {
  if (carMarker) {
    map.removeOverlay(carMarker);
  }
  carPoint = new BMap.Point(
    points[i].lng - Math.random(),
    points[i].lat - Math.random()
  );
  points.push(carPoint);
  i++;
  drawLine();
}, 1000);
// }
function drawLine() {
  var myIcon = new BMap.Icon(
    "http://developer.baidu.com/map/jsdemo/img/car.png",
    new BMap.Size(50, 50)
  );
  carMarker = new BMap.Marker(carPoint, { icon: myIcon });
  map.addOverlay(carMarker);
  var curve = new BMapLib.CurveLine(points, {
    strokeColor: "red",
    strokeWeight: 3,
    strokeOpacity: 0.5,
  }); //创建弧线对象
  map.addOverlay(curve); //添加到地图中
}

BaiduMap 叠加 ECharts

核心配置

• 定义一个函数 addOverLay,实现百度地图覆盖物基类 OverLay 的方法。并通过百度地图提供的 pointToOverlayPixel 方法，将地图上的 point 点转换为在 window 中像素值，实现图表位置的确定。
• 定义一个 drawPie(函数名自定义)方法，并传入参数：生成图表的 HTMLelement,以及在图表中显示的数据,像普通 echarts 图表一样配置 option。
• 循环遍历各省份数据，调用 addOverlay()方法

// 百度地图API功能
var map = new BMap.Map("map");
var geoCoordMap = {
  黑龙江: [127.9688, 45.368],
};
var data_info = [];
Object.keys(geoCoordMap).forEach(function(key) {
  var p = [];
  var data = [
    { name: "男", value: parseInt(Math.random() * 100) },
    { name: "女", value: parseInt(Math.random() * 100) },
  ];
  p.push(geoCoordMap[key][0]);
  p.push(geoCoordMap[key][1]);
  p.push(data);
  data_info.push(p);
});
addOverlay();
function addOverlay() {
  var divId = 1;
  function ComplexCustomOverlay(point, data) {
    this._point = point;
    this._data = data;
  }
  ComplexCustomOverlay.prototype = new BMap.Overlay();
  ComplexCustomOverlay.prototype.initialize = function(bmap) {
    this._map = bmap;
    //生成div
    var div = (this._div = document.createElement("div"));
    //赋id
    div.id = "div" + divId;
    divId++;
    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.style.width = "8vw";
    div.style.height = "8vw";
    //这里必须是绝对定位，不然会影响经纬度定位，然中偏离原来位置
    div.style.position = "absolute";
    //将该覆盖物添加到标签覆盖物列表
    map.getPanes().labelPane.appendChild(div);
    drawPie(div, this._data);
  };
  ComplexCustomOverlay.prototype.draw = function() {
    var map = this._map;
    //饼图的位置设置,需要获取该地图点的像素位置x,y
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x - 20 + "px";
    this._div.style.top = pixel.y - 80 + "px";
  };
  for (var i = 0; i < data_info.length; i++) {
    var myCompOverlay = new ComplexCustomOverlay(
      new BMap.Point(data_info[i][0], data_info[i][1]),
      data_info[i][2]
    );
    map.addOverlay(myCompOverlay);
  }
}
function drawPie(div, val) {
  var echarts2 = echarts.init(document.getElementById(div.id));
  option = {
    //pie图相关配置
  };
  echarts2.setOption(option);
  echarts2.resize();
}