前言

汇总了几个 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();

}

复制代码