Layer

简介

L7 Layer 接口设计遵循图形语法，在可视表达上

语法示例

  1. const layer = new Layer(option)
  2.   .source()
  3.   .color()
  4.   .size()
  5.   .shape()
  6.   .style();
  8. scene.addLayer(layer);

构造函数

配置项

name

设置图层名称,可根据 name 获取 layer;

visable

图层是否可见 {bool } default true

zIndex

图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int} default 0

minZoom

图层显示最小缩放等级，（0-18） {number} default 0

maxZoom

图层显示最大缩放等级 （0-18） {number} default 18

blend

图层元素混合效果

  • normal 正常效果 默认
  • additive 叠加模式
  • subtractive 相减模式
  • max 最大值

方法

source

数据源为 layer 设置数据 source(data,config)

  • data {geojson|json|csv}

源数据

  • config 可选 数据源配置项

    • parser 数据解析，默认是解析层 geojson
    • transforms [transform，transform ] 数据处理转换 可设置多个

parser 和 transforms 见 source 文档

  1. layer.source(data, {
  2.   parser: {
  3.     type: 'csv',
  4.     x: 'lng',
  5.     y: 'lat',
  6.   },
  7.   transforms: [
  8.     {
  9.       type: 'map',
  10.       callback: function(item) {
  11.         const [x, y] = item.coordinates;
  12.         item.lat = item.lat * 1;
  13.         item.lng = item.lng * 1;
  14.         item.v = item.v * 1;
  15.         item.coordinates = [x * 1, y * 1];
  16.         return item;
  17.       },
  18.     },
  19.     {
  20.       type: 'hexagon',
  21.       size: 6000,
  22.       field: 'v',
  23.       method: 'sum',
  24.     },
  25.   ],
  26. });

scale

cscle('field', scaleConfig)

(field: string, scaleConfig: object)

为指定的数据字段进行列定义，返回 layer 实例。

  • field 字段名。
  • scaleConfig 列定义配置，对象类型，可配置的属性如下：
  1. {
  2.   type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
  3. }

视觉编码方法

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

size

将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档

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

size(value）

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

size(field)

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

size(field, callback)

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

  • callback: function 回调函数。
  1. pointLayer.size('age', value => {
  2.   if (value === 1) {
  3.     return 5;
  4.   }
  5.   return 10;
  6. });

color

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

  1. layer.color('red'); // 常量颜色
  2. layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
  3. layer.color('type', ['red', 'blue']); // 指定颜色
  4. layer.color('type', type => {
  5.   // 通过回调函数
  6.   if (type === 'a') {
  7.     return 'red';
  8.   }
  9.   return 'blue';
  10. });
  11. layer.color('type*value', (type, value) => {
  12.   //多个参数，通过回调函数
  13.   if (type === 'a' && value > 100) {
  14.     return 'red';
  15.   }
  16.   return 'blue';
  17. });

color(value)

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

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

示例

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

color(field, colors)

参数：

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

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

  1. layer.color('name'); // 使用默认的颜色
  2. layer.color('name', ['red', 'blue']); // 使用传入的指定颜色
  • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
  1. layer.color('gender', value => {
  2.   if (value === 1) {
  3.     return 'red';
  4.   }
  5.   return 'blue';
  6. });
  7. layer.color('gender*age', (gender, age) => {
  8.   if (age === 20 && gender == ' 男') {
  9.     return 'red';
  10.   }
  11.   return 'blue';
  12. });

shape

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

shape(shape)

参数shape string

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

layer 类型shape 类型备注
point2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square
lineline,arc, arc3d, greatcircle
polygonfill,line, extrude

shape(field, shapes)

shape(field, callback)

style

全局设置图形显示属性

  • opacity 设置透明度
  • stroke 线填充颜色 仅点图层支持
  • strokeWidth 线的宽度 仅点图层支持
  1. layer.style({
  2.   opacity: 0.8,
  3.   stroke: 'white',
  4. });

图层更新方法

如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 scene.render()更新渲染即可

样式更新

  1. layer.color('blue');
  2. layer.size(10);
  3. layer.style({});
  4. scene.render();

setData

更新 Source 数据

参数:

  • data 数据
  • option 默认和初始配置项一致，如果数据格式相同可不设置

调用 setData 方法会自动更新图层渲染

  1. layer.setData(data);

setBlend(type)

设置图层叠加方法参数：

  • type blend 类型

图层控制方法

show

图层显示

  1. layer.show();

hide

图层隐藏

  1. layer.hide();

isVisable

图层是否可见

return true | false

setIndex

设置图层绘制顺序

fitBounds

缩放到图层范围

  1. layer.fitBounds();

setMinZoom

setMaxZoom

图层交互方法

active

开启或者关闭 mousehover 元素高亮效果

setActive

根据元素 ID 设置指定元素 hover 高亮

select

开启或者关闭 mouseclick 元素选中高亮效果

setSelect

根据元素 ID 设置指定元素 click 选中 高亮

鼠标事件

鼠标事件回调参数 target

  • x: number 鼠标  在地图位置 x 坐标
  • y: number 鼠标  在地图位置 y 坐标
  • type: string 鼠标事件类型
  • lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度
  • feature: any; 数据选中的地理要素信息
  • featureId: number | null; 数据选中的地理要素的 ID

click

点击事件

mousemove

鼠标移动事件

mouseout

鼠标移除

mouseup

鼠标按下

mousedown

鼠标向下

contextmenu

鼠标右键

unclick

点击未拾取到元素

unmousemove

鼠标移动未拾取到元素

unmouseup

鼠标抬起未拾取到元素

unmousedown

鼠标按下未拾取到元素

uncontextmenu

鼠标右键位拾取到元素

unpick

所有鼠标事件未拾取到

使用示例

  1. layer.on('click', ev => {}); // 鼠标左键点击图层事件
  2. layer.on('mousemove', ev => {}); // 鼠标在图层上移动时触发
  3. layer.on('mouseout', ev => {}); // 鼠标移出图层要素时触发
  4. layer.on('mouseup', ev => {}); // 鼠标在图层上单击抬起时触发
  5. layer.on('mousedown', ev => {}); // 鼠标在图层上单击按下时触发
  6. layer.on('contextmenu', ev => {}); // 图层要素点击右键菜单
  8. // 鼠标在图层外的事件
  9. layer.on('unclick', ev => {}); // 图层外点击
  10. layer.on('unmousemove', ev => {}); // 图层外移动
  11. layer.on('unmouseup', ev => {}); // 图层外鼠标抬起
  12. layer.on('unmousedown', ev => {}); // 图层外单击按下时触发
  13. layer.on('uncontextmenu', ev => {}); // 图层外点击右键
  14. layer.on('unpick', ev => {}); // 图层外的操作的所有事件

图层事件

inited

图层初始化完成后触发

remove

图层移除时触发