类参考

drawType类型

• simple
• heatmap
• density
• cluster
• bubble
• intensity
• category
• choropleth

每个drawType都对应一些各自的drawOptions，大部分命名与canvas原生的命名保持一致，各自具体内容参看如下：

drawOptions通用的属性:

{
    size: 5 // 大小值
    unit: 'px' // 可选px或者m
    fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色
    strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色
    lineWidth: 4, // 描边宽度
    globalAlpha: 1, // 透明度
    globalCompositeOperation: 'lighter', // 颜色叠加方式
    shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色
    shadowBlur: 35,  // 投影模糊级数
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    lineCap: 'butt',
    lineJoin: 'miter',
    miterLimit: 10
}

heatmap对应的drawOptions:

{
    maxOpacity: 0.8, // 最大透明度，默认为0.8
    type: 'radius',  // 可选参数有rect(方形)和radius(圆形，默认)
    max: 100, // 设置最大的权重值
    shadowBlur: 15, // 默认15
    gradient: { // 渐变颜色值设置
        '0.4': 'blue',
        '0.6': 'cyan',
        '0.7': 'lime',
        '0.8': 'yellow',
        '1.0': 'red'
    }
}

density对应的drawOptions:

{
    type: 'rect', // 可选rect(方形，默认)和honeycomb(蜂窝形),
    opacity: 0.5, // 设置图层填充的透明度
    unit: 'px' // 网格单位 [px(以像素为单位)|m（以米为单位）]
    gradient: { // 渐变颜色值设置
        '0.4': 'blue',
        '0.6': 'cyan',
        '0.7': 'lime',
        '0.8': 'yellow',
        '1.0': 'red'
    },
    label: { // 是否显示count值
        show: false // 是否显示，默认不显示 
    }
}

bubble对应的drawOptions:

// splitList数值表示按数值区间来展示不同大小的圆
{
    splitList: [
        {
            start: 0,
            end: 2,
            size: 3
        },{
            start: 2,
            end: 5,
            size: 6
        },{
            start: 5,
            end: 7,
            size: 9
        },{
            start: 7,
            size: 12
        }
    ]
}

intensity对应的drawOptions:

{
    gradient: { // 显示的颜色渐变范围$
        '0': 'blue',$
        '0.6': 'cyan',$
        '0.7': 'lime',$
        '0.8': 'yellow',$
        '1.0': 'red'$
    }$
}

choropleth对应的drawOptions:

{
    // 按数值区间来展示不同颜色的点
    splitList: [
        {
            start: 0,
            end: 2,
            color: randomColor()
        },{
            start: 2,
            end: 4,
            color: randomColor()
        },{
            start: 4,
            end: 6,
            color: randomColor()
        },{
            start: 6,
            end: 8,
            color: randomColor()
        },{
            start: 8,
            color: randomColor()
        }
    ]
}

cluster对应的drawOptions:

{
    size: 60, // 网格大小
    unit: 'px', // 单位
    fillStyle: '#fa8b2e', // 填充颜色
    strokeStyle: '#fff', // 边框颜色
    label: { // 是否显示文字标签
        show: true,
    }
}

category对应的drawOptions:

{
    splitList: { // 按对应的值按相应颜色展示
        other: 'rgba(255, 255, 0, 0.8)',
        1: 'rgba(253, 98, 104, 0.8)',
        2: 'rgba(255, 146, 149, 0.8)',
        3: 'rgba(255, 241, 193, 0.8)',
        4: 'rgba(110, 176, 253, 0.8)',
        5: 'rgba(52, 139, 251, 0.8)',
        6: 'rgba(17, 102, 252)'
    }
}