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