前言
汇总了几个 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