样式自动映射最后更新时间: 2021年01月22日

接下来我们来讲一个 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
——样式配置项。结构如下：

JavaScript

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：字符串，使用何种方式进行映射。这里使用线性映射linear，mag和radius将按照线性的方式映射。

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

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

样式自动映射 最后更新时间: 2021年01月22日

样式自动映射最后更新时间: 2021年01月22日