ArcGIS API For Javascript ：读取 CSV 文件的方法

我们临时会遇到一些测试数据，通常从数据库中以 CSV 格式导出。最简单实用的方法就是使用 ajax 去读取文件，记得引入 jQuery 。

例如，在《ArcGIS JS API ：新增一个热力图层的方法》中我们已经生成了名为“heatmapfeatureLayer_1”的图层，这时我们有若干个包含坐标信息的 CSV 文件，想要使用这些数据生成热力图。

方法一

数据准备

我们假设拿到的 CSV 数据有名称、经度、纬度和个数四个字段。

海洋生物保护协会	110.3406	20.07484	93
塞维阳光管理处	110.3426	20.06408	7
天润工程检测中心	110.3471	20.07359	35
白沙门社区居民委员会	110.33	20.07125	30
白沙社区居委会	110.3274	20.07546	89
红岛边防派出所白沙门警务室	110.3318	20.07212	57
红岛边防派出所	110.3341	20.07128	59
中共白沙门社区支部委员会	110.3297	20.07029	64
民生管道燃气有限公司公用管道检验中心	110.3366	20.06883	42

定义函数

我们来写一个函数实现，为了让函数有更好的伸缩性，我们将 CSV 路径与图层名称作为参数。函数如下：

function AddPoint2heatLayer(n,l){
        eval(l).graphics=[];//这一步是先清空当前图层的所有几何要素
        $.ajax({
        url: n,
        datatype: "json",
        async: false,
        data: {},
        success: function(data) {
            var dataStr = new String(data);
            var lines = dataStr.split('\n');
            var result = new Array();
            for(var i=1, il=lines.length; i<il; i++){
                var item = lines[i].split(',');
                result[i-1] = {};
                result[i-1].lng = Number(item[1]);// CSV 中第二列：经度
                result[i-1].lat = Number(item[2]);// CSV 中第三列：纬度
                result[i-1].num = item[3];// CSV 中第四列：数量
            }
            //csv 已转为 json
            //循环每个坐标对，并将其写入图层中
            for (var i = 0; i < result.length; i++) {
                var x = result[i].lng;
                var y = result[i].lat;
                var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));
                eval(l).add(new esri.Graphic(point));
                eval(l).graphics[i].attributes = {};
                eval(l).graphics[i].attributes.num = result[i].num;
            }
            }});
}

其中参数 n 为 CSV 路径，例如："test.csv"，参数 l 为图层名称，例如“heatmapfeatureLayer_1”。

调用函数

当我们多次使用时，即可这样调用：

AddPoint2heatLayer("net/heatmap.csv","heatmapfeatureLayer_1");

其实这么写的原因是，后期很可能会使用多时段的数据来做动态热力图，读取数据也会直接通过后台接口来实现，届时只需要修改函数中数据封装的部分即可。

方法二

引入类

在 require 中引入：

"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",

在 function 中加入相应的：

CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color

调用函数

var csv = new esri.layers.CSVLayer("test.csv");
var orangeRed = new esri.Color([0, 255, 100, 0.8]); 
var marker = new esri.symbol.SimpleMarkerSymbol("solid", 12, null, orangeRed);
var renderer = new esri.renderer.SimpleRenderer(marker);
csv.setRenderer(renderer);
map.addLayer(csv);