示例中心
功能在线体验
控制台

高德 开发 数据可视化 JS API 教程 基础教程 样式动态配置

更新时间:2018年03月22日

上面例子中,都是将数据指定成统一样式,但是实际场景中,必然需要根据不同数据,配置不同的样式。其实 setOptions() 支持使用回调方式动态设置各个属性。


什么是动态配置,举两个例子就会明白:


1. 构造坐标数据

下面是一份 汶川地震 中的部分数据,其中 mag 表示里式震级,lng 表示经度,lat 表示维度,time 表示发生时间。

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

以上数据中没有符合API中要求的 ”lng, lat“[lng, lat] 经纬度数据。对于这样的数据,除了提前构造好符合的格式外,我们也可以通过对 lnglat 属性传入回调数据的方式,动态配置出符合的数据。

layer.setData(data)
layer.setOptions({
    lnglat: function(res) {
        // data 为每一条数据
        var data = res.value;
        // 返回要求的'lng, lat'格式
        return [data.lng, data.lat]
    }
    // ...仅展示用,部分代码省略
})

这里 lnglat 属性支持传入回调函数,这样在解析 lnglat 属性时,会逐条数据执行该函数,并传入每条原始数据。在这里只要回调函数返回正确的坐标格式,在绘制的时就会根据这些动态生成的坐标绘制了。


2. 构造样式

除了 lnglatstyle 中的各个属性也支持通过回调动态设置。依旧是这份数据。我们希望使用圆形标记震中位置的同时,用圆半径大小和颜色深浅来表示震级——震级越大,半径越大,颜色越深。

layer.setOptions({
    // ...仅展示用,部分代码省略
    type: 'point',
    style: {
        radius: function(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;
        },
        fill: function(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';
        }
    }
})

这样每条数据的半径和颜色会动态生成。这样就可以实现属性的动态变化。

移动端
示例中心
功能
在线体验
常见问题