动态样式配置 最后更新时间: 2021年01月22日
上面例子中，都是将数据指定成统一样式，但是实际场景中，必然需要根据不同数据，配置不同的样式。其实 setOptions() 支持使用动态回调的方式设置各个属性。
什么是动态配置，举两个例子就会明白：
1. 构造坐标数据
下面是一份汶川地震中的部分数据，其中mag表示里式震级，lng表示经度，lat表示维度，time表示发生时间。
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
}
]以上数据中没有符合API中要求的”lng, lat“或[lng, lat]经纬度数据。对于这样的数据，除了提前构造好符合的格式外，我们也可以通过对lnglat属性传入回调数据的方式，动态配置出符合的数据。
layer.setData(data, {
lnglat:(res) => {
// data 为每一条数据
var data = res.value;
// 返回要求的'lng, lat'格式
return [data.lng, data.lat]
},
type: 'json'
})这里 lnglat 属性支持传入回调函数，这样在解析 lnglat 属性时，会逐条数据执行该函数，并传入每条原始数据。在这里只要回调函数返回正确的坐标格式，在绘制的时就会根据这些动态生成的坐标绘制了。
2. 构造样式
除了lnglat，style中的各个属性也支持通过回调动态设置。依旧是这份数据。我们希望使用圆形标记震中位置的同时，用圆半径大小和颜色深浅来表示震级——震级越大，半径越大，颜色越深。
layer.setOptions({
// ...仅展示用，部分代码省略
style: {
radius: (res) => {
var mag = res.value.mag;
if (mag >= 7) return 20;
else if (mag < 7 && mag >= 5) return 15;
else if (mag < 5) return 10;
},
color: (res) => {
var mag = res.value.mag;
if (mag >= 7) return '#111111';
else if (mag < 7 && mag >= 5) return '#555555';
else if (mag < 5) return '#999999';
}
}
})这样每条数据的半径和颜色会动态生成。这样就可以实现属性的动态变化。
