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

时间：2024-05-24 10:36:44

我们临时会遇到一些测试数据，通常从数据库中以 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);

相关文章