示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.

高德 开发 数据可视化 JS API 基本教程 样式自动映射

更新时间:2019年03月18日

接下来我们来讲一个 Loca 中比较高级的一个功能:样式自动映射。 

这个怎么理解呢?让我们放在一个场景里来讲,还是拿 汶川地震 的数据举例子,

const data = [
    {
        'lng': 103.618,
        'lat': 31.214,
        'mag': 6.1,
        'time': 1210590662480
    }, {
        'lng': 103.715,
        'lat': 31.211,
        'mag': 4.8,
        'time': 1210574594360
    }, {
        'lng': 103.322,
        'lat': 31.002,
        'mag': 8.0,
        'time': 1210573681570
    }
]

我们用圆半径表示震级大小时,除了使用前面介绍过的动态属性自己实现逻辑外,还可以按照特定的 Attr Options 样式配置项的结构设定数据与图形属性的映射关系,以达到自动映射的目的。

例如,我们希望圆的 半径震级 成正比,震级越大,圆半径越大。
震级小于等于3级时,半径为 5px,震级大于等于8级时,半径为 35px,在 3级-8级 之间的,半径按照线性规则分布在 5px-35px 之间。

注意,这里的每一个属性传入的不再是一个定值或是一个回调,而是一个 JSON 结构的数据,这个就被称为 Attr Options
——样式配置项。结构如下:

layer.setOptions({
    // ...仅展示用,部分代码省略
    style:{
        radius: {
            key: 'mag',
            input: [3, 8],
            value: [5, 35],
            scale: 'linear'
        }
    }
})

让我们依次解释其含义: 

  • key:字符串,表示当前属性与哪个数据项依赖。这里我们希望半径和震级依赖,那么指定震级的 key 值 —— mag
  • input:数组,定义mag数据的值域范围。这里也就是震级的范围,我们设定 [3, 8],超出范围的数据将被限定在这个区间。
  • value:数组,表示当前属性值的输出范围。这里就是radius属性的范围 [5, 35],默认单位是px
  • scale:字符串,使用何种方式进行映射。这里使用线性映射linearmagradius将按照线性的方式映射。

做个整体的翻译,其含义就是:其中半径radius属性和指定数据项mag进行关联,因此mag是数据的输入,radius的大小是数据的输出,数据按照线性映射。 

这样数据和样式就进行了自动的映射,您可以快速的将数据和要表达的图形样式进行自动关联了。

新用户
福利
功能
在线体验
常见
问题