SuperMap iClient加载和上传excel文件中的数据

本篇文章主要讲解如何通过前端读取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数据和当前底图坐标系保持一致。