开发 数据可视化 JS API 基本教程 使用数据

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

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

目前 Loca 数据支持 jsoncsvtsv 格式,通过 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分割,每个字段是以英文逗号,分割。为了表示清晰的结构,我们用表格的方式展示。

景区所在省份

名 称

评定年份

经纬度

北京市

东城区故宫博物院

2007年

116.397026,39.918058

北京市

东城区天坛公园

2007年

116.410886,39.881949

北京市

海淀区颐和园

2007年

116.272876,39.99243

其中第一行是表头,标注着每一项数据的含义。使用时会将 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()时,会覆盖掉原有数据。因此诸如新增、更新、删除数据时,您需要自己重新组织好新的数据,然后全量设置。

返回顶部 示例中心 常见问题 智能客服 公众号
二维码