8.0 KiB

Raw Blame History

方法

source

设置图层数据以及解析配置 source(data, config)

data { geojson | json | csv }
config 可选数据源配置项
- parser 数据解析，默认是解析层 geojson
- transforms [transform，transform ] 数据处理转换可设置多个

layer.source(data, {
  parser: {
    type: 'csv',
    x: 'lng',
    y: 'lat',
  },
  transforms: [
    {
      type: 'map',
      callback: function(item) {
        const [x, y] = item.coordinates;
        item.lat = item.lat * 1;
        item.lng = item.lng * 1;
        item.v = item.v * 1;
        item.coordinates = [x * 1, y * 1];
        return item;
      },
    },
    {
      type: 'hexagon',
      size: 6000,
      field: 'v',
      method: 'sum',
    },
  ],
});

scale

设置数据字段映射方法，用于设置数据字段的定义域。

用户在 source 方法中传入数据后可以通过 scale 方法设置映射到值域的映射关系以及相关的定义域

const pointLayer = new PointLayer({})
    .source(data)
    .shape('circle')
    .color('id', ['#f00', '#ff0'])
    .size('mag', [1, 80])
    .scale('mag', {
      type: "linear",
      domain: [ 1, 50]
    })
    .active(true)
    .style({
      opacity: 0.3,
      strokeWidth: 1
    });

🌟 在上面的代码中 size 设置点的大小，且点大小的值域为 [1, 80]。我们通过 scale 指定 mag 字段的定义域是 [1, 50]
✨ 为了验证是否生效我们可以讲 domain 设置为 [1, 20]，我们可以看到点的 size 明显变大了（size 在值域中的取值变大了）

在线案例

✨ L7 在内部使用了 d3 的 scale 方法，为了方便理解可以看 d3 比例尺的概念

var data = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(data);
var max = d3.max(data);

var linear = d3.scale.linear()
            .domain([min, max])
            .range([0, 300])
linear(0.9) // 0
linear(2.3) // 1.5
linear(3.3) // 300

field 指定 source 中传入的数据中用于映射的字段名
scaleConfig 列定义配置，对象类型，可配置的属性如下：

scale 类型

连续型

linear 线性
log
pow 指数型

连续分类型

quantile 等分位
quantize 等间距

枚举型

cat 枚举

layer.scale('name', {
  type: 'cat',
});

// 设置多个scale

// 字段名为 key, value 为scale配置项

layer.scale({
  name: {
    type: 'cat',
  },
  value: {
    type: 'linear',
  },
});

视觉编码方法

可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。

size

将数据值映射到图形的大小上的方法，size 方法具体的参数使用可以查看对应图层的详细文档

pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
pointLayer.size('type', (type) => {
  // 回调函数
  if (type === 'a') {
    return 10;
  }
  return 5;
});

size(value）

传入数字常量，如 pointLayer.size(20)

size(field)

根据 field 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

size(field, callback)

使用回调函数控制图形大小。

callback: function 回调函数。

pointLayer.size('age', (value) => {
  if (value === 1) {
    return 5;
  }
  return 10;
});

color

将数据值映射到图形的颜色上的方法。

layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
layer.color('type', ['red', 'blue']); // 指定颜色
layer.color('type', (type) => {
  // 通过回调函数
  if (type === 'a') {
    return 'red';
  }
  return 'blue';
});
layer.color('type*value', (type, value) => {
  //多个参数，通过回调函数
  if (type === 'a' && value > 100) {
    return 'red';
  }
  return 'blue';
});

color(value)

参数：value ：string 只支持接收一个参数，value 可以是：

映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。

示例

layer.color('name'); // 映射数据字段
layer.color('white'); // 指定颜色

color(field, colors)

参数：

field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
colors: string | array | function

colors 的参数有以下情况：如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。

layer.color('name'); // 使用默认的颜色
layer.color('name', ['red', 'blue']); // 使用传入的指定颜色

colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：

layer.color('gender', (value) => {
  if (value === 1) {
    return 'red';
  }
  return 'blue';
});
layer.color('gender*age', (gender, age) => {
  if (age === 20 && gender == ' 男') {
    return 'red';
  }
  return 'blue';
});

shape

通常一种图层可以有多种表现形式，shape 方法用于指定图层具体的表现形式，以 PointLayer 的 shape 为例：

shape('circle'); // 圆形
shape('triangle'); // 三角形
shape('cylinder'); // 圆柱

shape(shape)

参数 shape string

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的图层几何图形对象支持的 shape 形状

layer 类型	shape 类型	备注
point	2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
line	line,arc, arc3d, greatcircle
polygon	fill,line, extrude

shape(field, shapes)

shape 根据字段指定行形状，比如根据字段指定 PointLayer/imageLayer 的 icon 类型

scene.addImage(
  '00',
  'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
  '01',
  'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
  '02',
  'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
);
const imageLayer = new PointLayer()
  .source(data, {
    parser: {
      type: 'json',
      x: 'longitude',
      y: 'latitude',
    },
  })
  .shape('name', ['00', '01', '02'])
  .size(20);
scene.addLayer(imageLayer);