shinetek-legend

Legend

图例组件。用于绘制各种专题图图例或色标卡等

Demo

legend = new ShinetekLegend(element, legendDoc, option)
legend.render()

legendDoc

// 色块图例
let blockDoc = [
  {
    list: [
      {
        label: '省界',
        color: '#ffc107',
        style: 'line'
      },
      {
        label: '市界',
        color: '#ee1122',
        style: 'line'
      },
      {
        label: '陆地',
        color: '#11ff22',
        style: 'plane'
      },
      {
        label: '水体',
        color: '#1122ff',
        style: 'plane'
      }
    ],
    title: 'test1',
    type: 'block'
  },
  {
    list: [
      {
        label: '沙尘或烟尘',
        color: '#EF4087',
        style: 'plane'
      },
      {
        label: '卷云',
        color: '#000000',
        style: 'plane'
      },
      {
        label: '薄、高的冷云或冰',
        color: '#8C0000',
        style: 'plane'
      },
      {
        label: '薄的中层云',
        color: '#ACA300',
        style: 'plane'
      },
      {
        label: '沙漠上的卷云',
        color: '#00A000',
        style: 'plane'
      },
      {
        label: '沙漠',
        color: '#A2F3FF',
        style: 'plane'
      },
      {
        label: '低空湿空气(~700hpa)',
        color: '#2C71CC',
        style: 'plane'
      },
      {
        label: '低空干燥空气',
        color: '#A086FB',
        style: 'plane'
      },
      {
        label: '测试',
        color: '#113399',
        style: 'plane'
      }
    ],
    title: 'test2',
    type: 'block'
  }
]

// 线性渐变图例
let linearDoc = [
  {
    list: [
      {
        label: '省界',
        color: '#ffc107',
        style: 'line'
      },
      {
        label: '市界',
        color: '#ee1122',
        style: 'line'
      },
      {
        label: '陆地',
        color: '#11ff22',
        style: 'plane'
      },
      {
        label: '水体',
        color: '#1122ff',
        style: 'plane'
      }
    ],
    title: 'test1',
    type: 'block'
  },
  {
    list: [
      {
        value: [0, 5, 10, 15, 20, 25, 30],
        label: ['0', '5', '10', '15', '20', '25', '30'],
        color: ['#FFFCE8', '#004AFF', '#00E8FF', '#00FF38', '#B2FF00', '#FF9C00', '#FF1300']
      }
    ],
    title: 'test2',
    type: 'linear'
  }
]

// 比例尺对象
let scaleDoc = [
  {
    list: [
      {
        value: 0.0025
      }
    ],
    type: 'scale',
    title: 'test'
  }
]

option

// 以下参数为默认值

var options = {
  width: '100%', // 'auto'  or '380'
  model: 'canvas', // 'html' or canvas
  groupSpacing: 15, // 组间距
  itemAlign: 'horizontal', // 布局 vertical
  itemWidth: 55, // 块宽
  itemHeight: 15, // 块高
  itemSpacing: 5, // 块间距
  itemFontSize: '12px',
  itemFontColor: '#000000',
  itemFontFamily: 'Arial',
  itemBorderWidth: 1, // 块边框宽度
  itemBorderColor: '#000000', // 块边框
  itemTextAlign: 'center', // 文字对齐方式 start end
  titleFontSize: '14px',
  titleFontColor: '#000000',
  titleFontFamily: 'Arial',
  titleTextAlign: 'start',
  rowSpacing: 6, // 图例的行间距
  textSpacing: 3, // 文字与色块的间距
  titleSpacing: 5, // 标题与内容的间距
  textRowSpacing: 1, // 文字的行间距
  showItemLabel: true // 是否显示块的标签
}

备注

目前 显示隐藏块的标签 支持 linear like-linear block scale