使用数据 最后更新时间: 2021年01月22日

创建好图层后，就需要指定数据用以展示了。其中数据中需要包含位置数据 —— 经纬度坐标。这样才可以根据经纬度绘制需要的图形。

目前 Loca 数据支持 json、csv、tsv 格式，通过 setData(data, options) 方法添加数据。

接下来我们分别介绍几种不同类型数据的使用方法。

使用不同格式的数据

1. JSON 数据

城市位置示例数据 这是份包含中国省份及直辖市位置的 JSON 数据，其中 name 是省份或直辖市名称，center 是省会或直辖市的城市中心的经纬度坐标。

向图层传入数据如下：

const districts = [
    { 'name': '北京市', 'center': '116.407394,39.904211' },
    { 'name': '天津市', 'center': '117.200983,39.084158' },
    { 'name': '河北省', 'center': '114.530235,38.037433' },
    { 'name': '山西省', 'center': '112.562678,37.873499' }
    // ...more
];

// 默认按照json结构解析
layer.setData(data);

由于默认会用 JSON 格式解析，因此上面代码其实如下的简写。在使用其他类型数据时，我们需要显式的指定类型。

// 完整格式，需要指定数据类型
layer.setData(data, {
    type: 'json'
});

2. CSV / TSV 数据

在实际运用中，CSV / TSV 也是常见的数据格式，这类型的数据可以以较小的容量存储较多的数据，因此在数据较多时，可以考虑使用这类数据格式。通常一份 CSV 数据可以从 Excel 中导出。

以下是一份 全国5A景区 的 CSV 数据，这里摘取部分以方便演示：

景区所在省份,名 称,评定年份,经纬度
北京市,东城区故宫博物院,2007年,"116.397026,39.918058"
北京市,东城区天坛公园,2007年,"116.410886,39.881949"
北京市,海淀区颐和园,2007年,"116.272876,39.99243"
北京市,八达岭慕田峪长城旅游区,2007年,"116.544079,40.417555"
北京市,昌平区明十三陵景区,2011年,"116.225404,40.258186"
北京市,西城区恭王府景区,2012年,"116.38631,39.937209"
北京市,朝阳区北京奥林匹克公园,2012年,"116.399466,39.989743"

CSV 结构的数据，每条数据是以换行符\n或者\r分割，每个字段是以英文逗号,分割。为了表示清晰的结构，我们用表格的方式展示。

其中第一行是表头，标注着每一项数据的含义。使用时会将 CSV 数据的第一行会被解析为表头，因此 第一行表头必须保留，且第一行不能是空行。这一点在使用时需要注意！

依然通过 setData() 传入数据，并显式的指定数据类型：

layer.setData(csvString, {
    type: 'csv'
})

在 Loca 内部会将 CSV 转换为 JSON 格式，每条数据的属性会根据表头定义。

指定坐标

1. 指定坐标 lnglat

在数据中，会包含坐标数据，因此我们需要指定具体坐标所在列名。这样 Loca 才可以正确解析出来。如下：

const districts = [
    { 'name': '北京市', 'center': '116.407394,39.904211' },
    { 'name': '天津市', 'center': '117.200983,39.084158' },
    { 'name': '河北省', 'center': '114.530235,38.037433' },
    { 'name': '山西省', 'center': '112.562678,37.873499' }
    // ...more
];

layer.setData(data, {
    type: 'json',
    lnglat: 'center'
})

lnglat 指定数据中坐标所在的 key 值（JSON 数据）或者列名（CSV/TSV 数据），例如上面代码表示，当前数据的坐标所在项为 center。

除此以外，点类型数据，坐标还需要符合如下的格式之一，才可以被正确解析：

• 字符串："Lng, Lat" 结构。经度在前，纬度在后，英文逗号分隔，中间可以有空格填充。例如："116.3, 39.9"
• 数组：[Lng, Lat] 结构。经度在前，纬度在后，经纬度为 number 类型数据。例如：[116.3, 39.9]

而线、面类型，则在点的基础上，增加一级数组深度，例如：

• 字符串：形如 [“Lng, Lat”, “Lng, Lat”, …]。例如 [“116.3, 39.9”, “117.3, 38.9”]
• 数组：[[Lng, Lat], [Lng, Lat], …]。例如：[[116.3, 39.9], [117.3, 38.9]]

2. 动态生成坐标

除了使用符合标准格式的坐标以外，lnglat 属性还支持通过设置回调函数的方式动态生成坐标。

我们先看下面的代码：

// data 为上例中的数据

layer.setData(data, {
    type: 'json',
    lnglat: function(obj) {
        var value = obj.value,
            index = obj.index;
            
        // value.center 为 '116.407394,39.904211'
        return value.center.split(',')  // [116.407394, 39.904211]
    }
})

这里 lnglat 我们设置的不是字符串，而是回调函数。这样在渲染时回调函数会根据数据逐条调用，您需要做的就是将符合要求的坐标数据返回。其中形参中 value 为当前数据，index 为数据索引。

Tip: 如果数据发生了变化，您希望重新设置数据，再次调用 setData()时，会覆盖掉原有数据。因此诸如新增、更新、删除数据时，您需要自己重新组织好新的数据，然后全量设置。