本篇文章主要讲解如何通过前端读取excel文件中的数据,并且展示在地图上。需要用到一个插件js-xlsx,可以github上下载到里面内附了使用说明文档https://github.com/SheetJS/js-xlsx
一、读取excel
我这里准备了一份国际城市经纬度的excel数据,首先通过插件将excel上传至前端,并且解析数据为数组变量。
解析js-xlsx插件使用方法可以参考上面下载链接中的文档,这里只放部分代码供大家参考。
//获取文件
var f = obj.files[0];
var reader = new FileReader()
reader.onload = function(e) {
var data = e.target.result;
wb = XLSX.read(data, {
type: 'binary'
});
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
var result = JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
//显示结果
console.log(result));
}
//readAsBinaryString(file):将文件读取为二进制字符串
reader.readAsBinaryString(f);
二、在地图上展示数据
SuperMap iClient地图平台很多,下面只讲解在SuperMap iClient Classic中将导入数据可视化,其他地图平台实现思路基本大同小异。我使用的数据是点数据形式,很时候通过marker图层将其展示。所以要先定义marker图层然后将经纬度传入其中。
//定义一个markerlayer 并且添加到地图中
markerlayer = new SuperMap.Layer.Markers("markerLayer");
//result为上文获取的excel数据数组
for(var i=0;i<result.length;i++){
var size = new SuperMap.Size(44, 33);
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
var icon = new SuperMap.Icon('./images/marker.png', size, offset);
//根据经纬度绘制点
marker = new SuperMap.Marker(new SuperMap.LonLat(result[i].latitude, result[i].longitude), icon);
marker.capital = result[i].name;
marker.events.on({
//点击弹窗,显示城市名称
"click": openInfoWin,
"scope": marker
});
markerlayer.addMarker(marker);
}
上面代码中我们在marker中存储了城市名称marker.capital = result[i].name;并且还设置了openInfoWin事件,这样通过点击marker可以显示城市名称。
//弹窗事件
function openInfoWin() {
var marker = this;
var lonlat = marker.getLonLat();
var size = new SuperMap.Size(0, 33);
var offset = new SuperMap.Pixel(11, -30);
var icon = new SuperMap.Icon("./images/marker.png", size, offset);
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(lonlat.lon, lonlat.lat),
null,
marker.capital,
icon,
true);
infowin = popup;
map.addPopup(popup);
}
三、上传至iServer
在地图上绘制出点后,我们也可以将数据进行入库,方便管理,具体方法可以参考官网示例地物编辑,或者直接给iServer发送post请求修改数据集,具体方法可以参考iServer帮助文档。
注意事项:
1、读取excel的时候不要占用对应文件。
2、excel数据和当前底图坐标系保持一致。