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

接下来我们来讲一个 Loca 中比较高级的一个功能：样式自动配置，也叫自动映射。

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

var 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
    }
]

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

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

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

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 的大小是数据的输出，数据按照线性映射。

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

Tip：其中 scale 的默认值就是'linear'，因此可以不指定。而 input 默认会取 mag 中的最小、最大值作为初始范围。而 value 和 key 是必须指定的。

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

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