LineLayer
简介
线图层通过一组经纬度数据组来描述地图上的一条或者多条路径。通过路径的类型，将其区分为路径、弧线、3D 弧线以及其他的类型。
用户可以通过配置 shape 参数来选择线的类型，同时通过 style、size、color 方法调整线的样式。
import { LineLayer } from '@antv/l7';
const layer = new LineLayer()
.source([{ lng: 120, lat: 30, lng1: 125, lat1: 30 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
x1: 'lng1',
y1: 'lat1',
},
})
.shape('line')
.size(2)
.color('#f00');options
name
string optional default: 自动数字编号
设置图层名称,可根据 name 获取 layer
scene.getLayerByName(name);visible
bool optional default: true
图层是否可见
zIndex
int optional default: 0
图层绘制顺序，数值大绘制在上层，可以控制图层绘制的上下层级
L7 采用队列渲染的机制，所有的图层在内部保存在一个数组中，每一帧的渲染会将图层数组按照 zIndex 的值进行排序，然后遍历数组，将符合条件的图层渲染到场景中
minZoom
number optional default: Mapbox （0-24） 高德 （2-19)
图层显示最小缩放等级
maxZoom
number optional default: Mapbox （0-24） 高德 （2-19)
图层显示最大缩放等级
autoFit
bool optional default: false
layer 初始化完成之后，地图是否自动缩放到图层范围
pickingBuffer
bool optional default: 0
图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围（放大图层对象的尺寸）
blend
string optional default: ‘normal’
图层元素混合效果
- normal 正常效果 默认 发生遮挡的时候，只会显示前面的图层的颜色
- additive 叠加模式 发生遮挡的时候，显示前后图层颜色的叠加
- subtractive 相减模式 发生遮挡的时候，显示前后图层颜色的相减
- max 最大值 发生遮挡的时候，显示图层颜色 rgb 的最大值
enablePropagation
boolean optional default: ‘false’ 图层事件，默认只响应最上层图层，设置为true 将允许事件透传
⚠️ mask、maskfence 不推荐使用，一下配置 2.14.x 之后版本生效
模板图层：用做模板的图层，PointLayer、LineLayer、PolygonLayer 都可以作为模板 掩模图层：被模板切割的图层
enableRelativeCoordinates
图层使用相对坐标系，缩放等级大于 20,室内场景
maskLayers
掩模图层生效
array Layer optional default: []
enableMask
掩模图层生效
是否开启掩模，默认开启 maskLayers 不为空时生效
bool optional default: true
maskInside
掩模图层生效boolean optional default: true
用来描述当前图层的内容与掩模边界显示。
true在掩模内部显示false在掩模外部显示
maskOpetation 掩模方式
模板图层生效 枚举 optional default: and maskLayers 为多个时失效，需要在模板图层设置
- or 交集
- and 并集
使用示例
const polygonLayer = new Polygon();
const rasterLayer = new Raster({
// 栅格图层使用polygon 掩模
maskLayers: [polygonLayer],
enableMask: true,
maskInside: true,
});source
图层数据使用经纬度格式，数据源支持 JSON、GeoJSON、CSV 三种数据格式。
🌟 通常每种数据都需要相应的 parser 解析数据
GeoJSON
// 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[106.5234375, 57.51582286553883],
[136.40625, 61.77312286453146],
],
},
},
],
};
const layer = new LineLayer().source(data);CSV
// 传入 txt 类型数据
var data = `from,to,value,type,lng1,lat1,lng2,lat2
鎷夎惃,娴疯タ,6.91,move_out,91.111891,29.662557,97.342625,37.373799
鎷夎惃,鎴愰兘,4.79,move_out,91.111891,29.662557,104.067923,30.679943
鎷夎惃,閲嶅簡,2.41,move_out,91.111891,29.662557,106.530635,29.544606
鎷夎惃,鍖椾含,2.05,move_out,91.111891,29.662557,116.395645,39.929986
...`;
new LineLayer().source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
});JSON
// 传入 JSON 类型的数据
var data = [
{
lng: 120,
lat: 30,
lng1: 125,
lat1: 30
},
...
]
var layer = new LineLayer()
.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
x1: 'lng1',
y1: 'lat1'
}
})shape
shape 方法用于指定线图层绘制什么样的线。
shape(‘line’)
绘制路径图。
line 路径是最普通的线图层，支持配置宽度和高度，支持配置纹理和动画。
layer.shape('line');shape(‘arc’)
arc 弧线通过贝塞尔曲线算法计算出弧线的的路径，支持配置纹理和动画。
layer.shape('arc');shape(‘arc3d’)
arc3d 3d 弧线是在垂直地图两点之间的弧线，具有高度，支持配置纹理和动画。
layer.shape('arc3d');shape(‘greatcircle’)
greatcircle 大圆航线是地图两个点最近距离的连线，支持配置纹理和动画。
layer.shape('greatcircle');shape(‘wall’)
wall 是垂直地图的围墙，支持配置高度，纹理和动画。
layer.shape('wall');shape(‘simple’)
simple 线图层，宽度始终为 1px。
layer.shape('simple');shape(‘flowline’)
flowline 流向图, 2.17 版本新增
color
color 方法用于设置图形的颜色。
IColor: string
color 类型的字符串。
- color 类型可以为 rgb 的写法
rgb(200, 100, 100)、rgba(255, 0, 0, 1) - color 类型可以为十六进制的写法
#ffffff、#000 - color 类型可以是颜色名称的写法
red、yellow
color(color: IColor)
图层可以直接设置颜色值。
layer.color('#f00');color(field: string)
图层的颜色可以根据图层接受的数据值进行映射，接受传入数据的字段作为参数。
layer.source([
{
lng: 120,
lat: 30,
c: '#f00',
},
]);
layer.color('c');color(field: string, domain: IColor[])
color 方法支持简单的值映射，将根据 field 从传入图层的数据中提取的值映射到 domain 值域中。
layer.color('type', ['#f00', '#0f0', '#00f']);color(field: string, callback: () => IColor )
color 方法支持回调函数的写法，将根据 field 作为 callback 方法的参数，callback 方法的返回值作为图层实际的颜色。
layer.color('type', (value) => {
switch (value) {
case 'water':
return '#f00';
case 'wood':
return '#0f0';
}
});size
线图层的 size 方法可以设置线的宽度和高度。
ILineSize: number | [number, number]
- size 类型为 number 则表示 line 的宽度
- size 类型为 [number , number] 分别表示宽度和高度
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1，高度2size(width: ILineSize)
线图层可以直接设置宽度值。图层中所有的线使用一个宽度。
layer.size(2);size(field: string)
线图层的宽度可以根据图层接受的数据值进行映射，接受传入数据的字段作为参数。
layer.source({
type: 'Feature',
properties: {
lineSize: 2,
},
geometry: {
type: 'LineString',
coordinates: [
[119.988511, 30.269614],
[119.9851, 30.269323],
[119.99271, 30.22088],
],
},
});
layer.size('lineSize');size(field: string, domain: ILineSize[])
size 方法支持简单的值映射，将根据 field 从传入图层的数据中提取的值映射到 domain 值域中。
layer.size('type', [1, 2, 3]);size(field: string, callback: () => ILineSize )
size 方法支持回调函数的写法，将根据 field 作为 callback 方法的参数，callback 方法的返回值作为线图层实际的宽高。
layer.size('type', (value) => {
switch (value) {
case 'path':
return 1;
case 'road':
return 2;
}
});scale
scale 方法设置数据字段映射方法，用于设将地图数据值（数字、日期、类别等数据）转成视觉值（颜色、大小、形状）。尺度 Scale 是数据可视化的基本组成部分，因为它们决定了视觉编码的性质。
scale(field: string, scaleConfig: IScaleConfig)
field指定 source 中传入的数据中用于映射的字段名scaleConfig列定义配置，对象类型
interface IScaleConfig {
type: ScaleTypeName;
domain?: any[];
...
}
layer.color('id', ['#f00', '#ff0'])
.size('mag', [1, 80])
.scale('mag', {
type: 'linear',
domain: [ 1, 50]
})；ScaleTypeName
scale 的类型可以分为 3 类 11 种，不同 Scale 的差异在于 domain->range 的转换方法的不同。
range 和 domain 是 Scale 中非常重要的两个参数。
- domain: 地图数据值的定义区间
- range：视觉值的区间定义
| 数据类型 | 度量类型 |
|---|---|
| 连续 | linear、log、pow、time、sequential、quantize、quantile、threshold |
| 分类 | cat、time |
| 常量 | identity |
Cat
Cat 指枚举类型，用于展示分类数据，比如农作物种植区分布图，水稻、玉米、大豆等不同类别需要映射为不同的颜色。
// 三种作物会分别转成对应的颜色
// domain = ['corn','rice', 'soybean'];
// range = ['red','white','blue'];
const data = [
{ lng: 120, lat: 30, t: 'corn' },
{ lng: 121, lat: 30, t: 'rice' },
{ lng: 122, lat: 30, t: 'soybean' },
];
layer.source(data, {
parser: {
type: 'type',
x: 'lng',
y: 'lat',
},
});
layer.scale('t', { type: 'cat' });
layer.color('t', ['red', 'white', 'blue']);identify
常量度量 某个字段是不变的常量。
linear
线性是连续数据的映射方法，数据和视觉值是通过线性方法换算的。如数据值 1-100 线性映射到红到蓝的线下渐变色每个数字对应一个颜色
quantize
相等间隔会将属性值的范围划分为若干个大小相等的子范围。相等间隔最适用于常见的数据范围，如百分比和温度。这种方法强调的是某个属性值相对于其他值的量
quantile
每个类都含有相等数量的要素。分位数分类非常适用于呈线性分布的数据。分位数为每个类分配数量相等的数据值。不存在空类，也不存在值过多或过少的类。 由于使用“分位数”分类将要素以同等数量分组到每个类中，因此得到的地图往往具有误导性。可能会将相似的要素置于相邻的类中，或将值差异较大的要素置于相同类中。可通过增加类的数量将这种失真降至最低。
threshold
他允许将域的任意子集（非统一段）映射到范围内的离散值。输入域仍然是连续的，并根据提供给域属性的一组阈值划分为多个切片。 range 属性必须有 N+1 个元素，其中 N 是域中提供的阈值边界数
手动设置间隔 Manual interval 手动设置分级分类区间，某些数据会有相应的业界标准，或者需要进行某种特殊的显示。如空气质量数据有严格数据分段标准
-1 => "red"
0 => "white"
0.5 => "white"
1.0 => "blue"
1000 => "bluediverging || Sequential
用于返回给定的颜色数组的统一非有理 B-spline 插值器函数，该数组将转换为RGB颜色。
const scaleColors = d3interpolate.interpolateRgbBasis(colors);IScaleConfig
interface IScaleConfig {
type: ScaleTypeName;
domain?: any[];
range?: any[];
neutral?: number;
field?: string;
unknown?: string;
ticks?: any[];
nice?: boolean;
clamp?: boolean;
format?: () => any;
}style
style 方法用于配制图层的样式，相同图层拥有不同的 shape 图形，不同 shape 的图层 style 方法接受不同的参数。
layer.style({
opacity: 0.5,
});common
通用 style 参数，所有图形都支持的参数。
| style | 类型 | 描述 | 数据映射 | 默认值 |
|---|---|---|---|---|
| opacity | number |
图形的透明度 | 支持 | 1 |
line
shape 为 line 的普通线图层。
| style | 类型 | 描述 | 支持数据映射 | 默认值 |
|---|---|---|---|---|
| stroke | string |
图形边框颜色 | 是 | #fff |
| strokeWidth | number |
图形边框半径 | 否 | 0 |
| blur | [number, number, number] |
图形模糊分布 | 否 | [1, 1, 1] |
| raisingHeight | number |
抬升高度 | 否 | 0 |
| heightfixed | boolean |
抬升高度是否随 zoom 变化 |
否 | false |
arc
shape 为 arc 平面的弧线。
| style | 类型 | 描述 | 支持数据映射 | 默认值 |
|---|---|---|---|---|
| segmentNumber | number |
弧线分段，分段越多越平滑，消耗越大 | 否 | 30 |
| opacity | number |
透明度，支持数据映射 | 是 | 1 |
| thetaOffset | number |
弧线的弧度参数 | 是 | 0.314 |
arc3d
shape 为 arc3d 的弧线图层。
| style | 类型 | 描述 | 支持数据映射 | 默认值 |
|---|---|---|---|---|
| opacity | number |
透明度，支持数据映射 | 是 | 1 |
| segmentNumber | number |
弧线分段，分段越多越平滑，消耗越大 | 否 | 30 |
| thetaOffset | number |
弧线的弧度参数 | 是 | 1 |
greatcircle
shape 为大圆弧线图层。
| style | 类型 | 描述 | 支持数据映射 | 默认值 |
|---|---|---|---|---|
| opacity | number |
透明度，支持数据映射 | 是 | 1 |
| segmentNumber | number |
弧线分段，分段越多越平滑，消耗越大 | 否 | 30 |
flowline
| style | 类型 | 描述 | 支持数据映射 | 默认值 |
|---|---|---|---|---|
| opacity | number |
透明度，支持数据映射 | 是 | 1 |
| strokeOpacity | number |
描边透明度 | 否 | 30 |
| stroke | number |
描边颜色 | 是 | #000 |
| strokeWidth | number |
描边宽度 | 1 |
否 |
| gapWidth | number |
不同方向两条线间距 | 2 |
否 |
| offsets | [number,number] |
两端偏移量，支持数据映射 | 是 | [0,0] |
flowline opacity 和 offsets 支持数据映射，数据驱动设置数据大小
opacity
layer.style({
opacity: {
field: 'count', // 映射字段
value: [0.2,0.4,0.6,0.8], // 映射值,支持回调函数，支持设置scale
}
// field 和 value 等同于 layer.color('count',[0.2,0.4,0.6,0.8])offsets
layer.style({
offsets:{
field: 'count',
values:() => {
return [10 + Math.random()*20, 10 + Math.random()*20]
}
})wall
shape 为 wall 地理围栏弧线图层。
simple
shape 为 simple 简单线图层。
linear
- line、arc、arc3d、greatcircle、wall、simple
线图层支持配置渐变效果，在配置渐变效果后会覆盖 layer.color 方法设置的颜色。
| style | 类型 | 描述 | 默认值 |
|---|---|---|---|
| sourceColor | IColor |
线起始颜色 | / |
| targetColor | IColor |
线结尾颜色 | / |
| linearDir | ILinearDir |
线渐变方向 | vertical |
IColor
const color = `rgb(200, 100, 50)`;
const color2 = '#ff0';ILinearDir
- vertical 纵向（沿线方向）
- horizontal 横向
type ILinearDir = 'vertical' | 'horizontal';texture
- line、arc、arc3d、greatcircle
线图层支持纹理以及纹理动画，纹理样式有自己的参数。
| style | 类型 | 描述 | 默认值 |
|---|---|---|---|
| lineTexture | boolean |
时候开启纹理能力 | false |
| textureBlend | ITextureBlend |
纹理混合方式 | normal |
| iconStep | number |
纹理贴图在线图层上面排布的间隔 | 100 |
ITextureBlend
线图层的纹理在和线本身的颜色进行融合的时候支持两种，normal 和 replace。
- normal 纹理和线颜色混合
- replace 使用纹理替换线颜色
type ITextureBlend = 'normal' | 'replace';texture advance
✨ animate
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
线图层上排列的纹理的数量大致为 duration/interval
.animate({
duration: 1,
interval: 0.2,
trailLength: 0.1
});
// 此时 纹理贴图数量为 duration / interval = 5✨ textureBlend 参数
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况
- normal
- replace
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 30, // 设置贴图纹理的间距
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
});dash
- line、arc、arc3d、greatcircle
线图层支持配置虚线，虚线有自己额外的样式参数。
layer.style({
lineType: 'dash'
dashArray: [5, 5]
})| style | 类型 | 描述 | 默认值 |
|---|---|---|---|
| lineType | ILineType |
线的类别 | solid |
| dashArray | IDashArray |
虚线的间隔 | / |
ILineType
- solid 实线
- dash 虚线
IDashArray
dashArray 只有在 ILineType 为 dashed 的时候才会生效。
// len1 实线长度 len2 间隔长度
type IDashArray = [len1: number, len2: number]animate
线图层图层在开启 animate 方法后会得到沿线方向的线动画。
animate(boolean | IAnimateOption)
animate 方法支持布尔值和对象传值。
layer.animate(true);
layer.animate({
enable: true,
});IAnimateOption
interface IAnimateOption {
enable: boolean;
speed: number;
rings: number;
}animate
开启关闭动画
layer.animate(true);
layer.animate(false);设置动画参数
- duration 动画时间 单位(s)秒
- interval 轨迹间隔, 取值区间 0 - 1
- trailLength 轨迹长度 取值区间 0 - 1
layer.animate({
duration: 4,
interval: 0.2,
trailLength: 0.1,
});参数动画介绍
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
texture
线图层支持纹理贴图和多种表现形式，通过 scene.addImage 方法添加到全局的资源，使用 texture 方法指定贴图。
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
const layer = new LineLayer()
.source(data)
.size(4)
.shape('line')
.texture('02')
.color('#25d8b7')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度
})
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 20, // 设置贴图纹理的间距
});
- lineTexture 指定是否开启纹理贴图能力
- iconStep 指定贴图在线图层上面排布的间隔
texture advance
✨ animate
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关.
线图层上排列的纹理的数量大致为 duration/interval
.animate({
duration: 1,
interval: 0.2,
trailLength: 0.1
});
// 此时 纹理贴图数量为 duration / interval = 5✨ textureBlend 参数
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况
- normal
- replace
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 30, // 设置贴图纹理的间距
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
});图层通用方法
options
name
string optional default: 自动数字编号
设置图层名称,可根据 name 获取 layer
scene.getLayerByName(name);visible
bool optional default: true
图层是否可见
zIndex
int optional default: 0
图层绘制顺序，数值大绘制在上层，可以控制图层绘制的上下层级
L7 采用队列渲染的机制，所有的图层在内部保存在一个数组中，每一帧的渲染会将图层数组按照 zIndex 的值进行排序，然后遍历数组，将符合条件的图层渲染到场景中
minZoom
number optional default: Mapbox （0-24） 高德 （2-19)
图层显示最小缩放等级
maxZoom
number optional default: Mapbox （0-24） 高德 （2-19)
图层显示最大缩放等级
autoFit
bool optional default: false
layer 初始化完成之后，地图是否自动缩放到图层范围
pickingBuffer
bool optional default: 0
图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围（放大图层对象的尺寸）
blend
string optional default: ‘normal’
图层元素混合效果
- normal 正常效果 默认 发生遮挡的时候，只会显示前面的图层的颜色
- additive 叠加模式 发生遮挡的时候，显示前后图层颜色的叠加
- subtractive 相减模式 发生遮挡的时候，显示前后图层颜色的相减
- max 最大值 发生遮挡的时候，显示图层颜色 rgb 的最大值
enablePropagation
boolean optional default: ‘false’ 图层事件，默认只响应最上层图层，设置为true 将允许事件透传
⚠️ mask、maskfence 不推荐使用，一下配置 2.14.x 之后版本生效
模板图层：用做模板的图层，PointLayer、LineLayer、PolygonLayer 都可以作为模板 掩模图层：被模板切割的图层
enableRelativeCoordinates
图层使用相对坐标系，缩放等级大于 20,室内场景
maskLayers
掩模图层生效
array Layer optional default: []
enableMask
掩模图层生效
是否开启掩模，默认开启 maskLayers 不为空时生效
bool optional default: true
maskInside
掩模图层生效boolean optional default: true
用来描述当前图层的内容与掩模边界显示。
true在掩模内部显示false在掩模外部显示
maskOpetation 掩模方式
模板图层生效 枚举 optional default: and maskLayers 为多个时失效，需要在模板图层设置
- or 交集
- and 并集
使用示例
const polygonLayer = new Polygon();
const rasterLayer = new Raster({
// 栅格图层使用polygon 掩模
maskLayers: [polygonLayer],
enableMask: true,
maskInside: true,
});数据方法
source 数据
设置图层数据以及解析配置 source(data, config)。
- data { geojson | json | csv }
- config 可选 数据源配置项
- parser 数据解析，默认是解析层 geojson
- transforms [transform，transform ] 数据处理转换可设置多个
parser 和 transforms 见 source 文档。
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',
},
],
});cluster
我们在使用 cluster 配置聚合图之后就可以使用一些聚合方法来获取对应参数。
getClusters(zoom: number): IFeatureCollection
获取指定缩放等级的聚合数据
zoom缩放等级
getClustersLeaves(id: string): IFeatureCollection
根据 id 获取聚合节点的数据，每个聚合节点会有一个唯一 ID。
id聚合节点的id
const source = layer.getSource();
source.getClustersLeaves(id);
layer.on('click', (e) => {
console.log(source.getClustersLeaves(e.feature.cluster_id));
});scale 数据度量
Scale 度量是将地图数据值（数字、日期、类别等数据）转成视觉值（颜色、大小、形状）。尺度 Scale 是数据可视化的基本组成部分，因为它们决定了视觉编码的性质。 L7 目前支持连续、离散、枚举类型数据的Scale，并支持位置、形状、大小和颜色编码的映射。
在使用 L7 过程中，默认情况下不需要进行 Scale 的配置，因为 L7 会根据数据类型对 scale 推断，推断过程如下：
查看用户是否设置了 Scale，如果没有:
判断字段的第一条数据的字段类型，如果数据中不存在对应的字段：
认为是常量为固定值
如果是数字则为 ‘linear’;
如果是字符串类型 ‘cat’;
scale
参数： (field: string, scaleOptions: IscaleOptions)
field指定 source 中传入的数据中用于映射的字段名scaleOptions列定义配置，对象类型- type scale 类型
- unknown 未匹配颜色 可选 默认透明
- domain 值域 可选
interface IscaleOptions {
type: ScaleTypeName;
domain?: any[];
...
}
layer.color('id', ['#f00', '#ff0'])
.size('mag', [1, 80])
.scale('mag', {
type: 'linear',
domain: [ 1, 50]
})；类型
Range 和 domain 是 Scale 中非常重要的两个参数
domain: 地图数据值的定义区间 range：视觉值的区间 不同Scale 的差异在于 domain->range 的转换方法的不同
- domain: 地图数据值的定义区间
- range：视觉值的区间定义
| 数据类 | 度量类型 |
|---|---|
| 连续 | linear、log、pow |
| 连续分类 | quantize quantile,threshold,diverging |
| 分类 枚举 | cat |
Cat
Cat 指枚举类型，用于展示分类数据，比如农作物种植区分布图，水稻、玉米、大豆等不同类别需要映射为不同的颜色。
// 三种作物会分别转成对应的颜色
// domain = ['corn','rice', 'soybean'];
// range = ['red','white','blue'];
const data = [
{ lng: 120, lat: 30, t: 'corn' },
{ lng: 121, lat: 30, t: 'rice' },
{ lng: 122, lat: 30, t: 'soybean' },
];
layer.source(data, {
parser: {
type: 'type',
x: 'lng',
y: 'lat',
},
});
layer.scale('t', { type: 'cat' });
layer.color('t', ['red', 'white', 'blue']);identify
数据值和映射值相同 比如数据中value 字段记录了每个要素的颜色，数值既为要映射的结果值s
// 设置为 identify
layer.scale('value', { type: 'identify' });
// 或者
layer.scale('value'); // L7 能够自动推断为 identifylinear
线性是连续数据的映射方法，数据和视觉值是通过线性方法换算的。如数据值 1-100 线性映射到红到蓝的线下渐变色每个数字对应一个颜色
quantize
相等间隔会将属性值的范围划分为若干个大小相等的子范围。相等间隔最适用于常见的数据范围，如百分比和温度。这种方法强调的是某个属性值相对于其他值的量
quantile
每个类都含有相等数量的要素。分位数分类非常适用于呈线性分布的数据。分位数为每个类分配数量相等的数据值。不存在空类，也不存在值过多或过少的类。 由于使用“分位数”分类将要素以同等数量分组到每个类中，因此得到的地图往往具有误导性。可能会将相似的要素置于相邻的类中，或将值差异较大的要素置于相同类中。可通过增加类的数量将这种失真降至最低。
threshold
他允许将域的任意子集（非统一段）映射到范围内的离散值。输入域仍然是连续的，并根据提供给域属性的一组阈值划分为多个切片。 range 属性必须有 N+1 个元素，其中 N 是域中提供的阈值边界数
手动设置间隔 Manual interval 手动设置分级分类区间，某些数据会有相应的业界标准，或者需要进行某种特殊的显示。如空气质量数据有严格数据分段标准
-1 => "red"
0 => "white"
0.5 => "white"
1.0 => "blue"
1000 => "bluediverging
离散分类通常与两种相反的色调一起使用，以显示从负值到中心到正值的变化。这些类型的地图显示了彼此相关的值的大小。
getScale(scaleName:string)
根据视觉通道名称获取 scale 实例,调用之前确保 layer 已经初始化完成
const scale = layer.getScale('color');
const color = scale(1); // 将数值转换成颜色更多是方法 scale 示例使用
视觉编码方法
可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。
filter
数据过滤方法,支持回调函数，将数据映射为true | false, 结果为true 时可见
pointLayer.filter('type', (type) => {
// 回调函数
if (type === 'a') {
return false;
}
return true;
});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) 等。
如果数据为映射到颜色，默认为透明色不显示，如果需要设置该颜色，需要在scale 中设置
示例
layer.color('name'); // 映射数据字段
layer.color('white'); // 指定颜色color(field, colors)
参数：
-
field: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 -
colors: string | array | function
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。
layer.scale('name',{
type:'quantile'
unknown:'#ccc' // 设置无效颜色
})
layer.color('name'); // 使用identity
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);
shape(field, callback)
- shape 也支持回调函数的写法
.shape('key', value => {
if(value > 10) {
return 'circle';
} else {
return 'triangle';
}
}rotate
将数据值映射到图形的旋转角度上的方法，用于控制点图层图标/图形的旋转。
layer.rotate(45); // 常量，所有元素旋转 45 度
layer.rotate('angle'); // 字段映射
layer.rotate('angle', [0, 360]); // 字段映射到角度范围
layer.rotate('angle', (angle) => {
return angle * (Math.PI / 180); // 回调函数
});label
为图层设置标注（文字标签），将数据字段映射为标注内容显示在图层元素旁边。主要在特定图层类型（如 PointLayer 的文字标注）中生效。
layer.label('name'); // 以 name 字段的值作为标注文本
layer.label('name', (name) => `${name}市`); // 回调函数处理标注文本style
style 方法通常用于描述图层具体的样式，大多数图层会支持一些比较通用的属性， 如 opacity 属性，同时每个图层也会有仅限本图层支持的属性，如只有 CityBuildingLayer 支持的 windowColor 属性，每个图层具体要如何配置属性请查看每个图层的详细文档。
-
opacity 设置透明度 大部分图层都支持
-
stroke 线填充颜色 仅点图层支持
-
strokeWidth 线的宽度 仅点图层支持
layer.style({
opacity: 0.8,
stroke: 'white',
});- 样式数据映射🌟
在正常情况下，style 的参数会作用到一个图层上的所有图形，如一个 PointLayer 中有十个点，我们设置 opacity = 0.5， 这样十个点的透明度都是 0.5。
而在特殊情况下，我们可能需要为每个点分别设置一个透明度，这时候按照原来的方式直接设置 style 方法的 opacity 的值就无法满足需求了，为此我们需要提供特殊的赋值方式。
通常我们会根据传入图层的数据为图层的每个图形设置单独的值，因此我们称之为“样式数据映射”。
我们支持几种设置 style 中的参数从 source 数据中动态取值的写法。
// 根据数据中的 v 字段的值设置点图层各个点的透明度
const data = [
{
lng: 120,
lat: 30,
v: 0.5
},
...
]
const layer = new PointLayer()
.source(data, {
parser: {
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#f00')
.size({
// 第一种写法 根据字段从 data 中直接取值
opacity: 'v'// opacity = 0.5
});
scene.addLayer(layer);从 L7 2.5 开始，各图层样式将逐步支持样式数据映射，目前支持样式数据映射的 style 参数如下：
| layer 类型/shape | 支持的样式字段 | 备注 |
|---|---|---|
| pointLayer/fill | opacity、strokeOpacity、strokeWidth、stroke、offsets | shape circle、triangle… |
| pointLayer/image | opacity、offsets | offsets 经纬度偏移 |
| pointLayer/normal | opacity、offsets | |
| pointLayer/text | opacity、strokeWidth、stroke、textOffset | textOffset 相对文字画布位置的偏移 |
| pointLayer/extrude | opacity | |
| polygonLayer/fill | opacity | |
| polygonLayer/extrude | opacity | |
| lineLayer/line | opacity | |
| lineLayer/arc | opacity、thetaOffset | thetaOffset 弧线的弯曲弧度 |
| lineLayer/arc3d | opacity | |
| lineLayer/great_circle | opacity |
texture
目前只在线图层上支持了纹理方法
- texture 方法支持传入由 scene.addImage 方法添加的全局 icon 贴图资源
// 首先在全局加载图片资源
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
const layer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(25)
.shape('arc')
.texture('plane') // 为图层绑定纹理
.color('#8C1EB2')
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 30, // 设置贴图纹理的间距
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
});图层更新方法
如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 scene.render()更新渲染即可
scale 更新
重新调用scale 方法
layer.scale('value', {
type: 'quantile',
});
scene.render();数据映射
重新调用 color/size/filter/shape等方法
layer.color('blue');
layer.size(10);
scene.render();layer.style
layer.style({
opacity: 1,
});
scene.render();setData(data, option?: {})
更新 Source 数据
参数:
- data 数据
- option 默认和初始配置项一致，如果数据格式相同可不设置
调用 setData 方法会自动更新图层渲染
layer.setData(data);setBlend(type: string)
设置图层叠加方法 参数：
- type blend 类型 normal ｜ additive ｜ subtractive ｜ max
图层控制方法
show()
图层显示
layer.show();hide()
图层隐藏
layer.hide();isVisible(): boolean
图层是否可见
layer.isVisible();setIndex(zIndex: int)
设置图层绘制顺序
layer.setIndex(1);fitBounds()
缩放到图层范围
layer.fitBounds();setMinZoom(zoom: number)
设置图层最小缩放等级
layer.setMinZoom(zoom);setMaxZoom(zoom: number)
设置图层最大缩放等级
参数
- zoom {number}
layer.setMaxZoom(zoom);getMinZoom(): number
获取图层最小缩放等级
const minZoom = layer.getMinZoom();getMaxZoom(): number
获取图层最大缩放等级
const maxZoom = layer.getMaxZoom();destroy()
销毁图层，释放相关资源。场景调用 removeLayer 时会自动销毁图层，一般不需要手动调用。
layer.destroy();图层交互方法
active(activeOption | boolean)
- 开启或者关闭 mousehover 元素高亮效果
activeOptioncolor: 高亮颜色mix: 可选参数，默认为 0，表示高亮颜色是指定纯色，最大有效值是1，表示高亮色全部是底色
activeOption: {
color: '#f00';
mix: 0.6;
}// 开启 Active 使用默认高亮颜色
layer.active(true);
// 开启 Active 自定义高亮颜色
layer.active({
color: 'red',
mix: 0.6,
});
// 关闭高亮效果
layer.active(false);setActive(featureId: int)
根据元素 ID 设置指定元素 hover 高亮
🌟 指定元素高亮不等于图层高亮，一个图层包含多个元素，一般传入 source 的数据数组中有多少单条数据，一个图层就有多少元素
layer.setActive(featureId);select(selectOption | boolean)
- 开启或者关闭 mouseclick 元素选中高亮效果
- selectOption
color: 选中高亮颜色mix: 可选参数，默认为 0，表示选中高亮颜色是指定纯色，最大有效值是1，表示选中高亮色全部是底色
selectOption: {
color: '#f00';
mix: 0.6;
}// 开启 Active 使用默认高亮颜色
layer.select(true);
// 开启 Active 自定义高亮颜色
layer.select({
color: 'red',
mix: 0.6,
});
// 关闭高亮效果
layer.select(false);setSelect(featureId: int)
根据元素 ID 设置指定元素 click 选中 高亮
🌟 指定元素高亮不等于图层高亮，一个图层包含多个元素，一般传入 source 的数据数组中有多少单条数据，一个图层就有多少元素
layer.setSelect(featureId);setAutoFit(autoFit: boolean)
让用户可以主动设置图层的 autoFit 参数
🌟 设置完该方法后会在图层发生更新的时候生效，如在 setData 之后触发
// 使用方法
layer.setAutoFit(true);
// 内部实现
public setAutoFit(autoFit: boolean): ILayer {
this.updateLayerConfig({
autoFit,
});
return this;
}getScale(attr: string)
支持单独获取某个图形经过 scale 计算后的值， 满足用户获取图层某些 feature 值的需求。
- attr scale 的属性值
const data = [
{ lng: 120, lat: 30, name: 'n1' },
{ lng: 120, lat: 30, name: 'n2' },
];
const layer = new PointLayer()
.source(data, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('circle')
.color('name', ['#f00', '#ff0'])
.size('name', [20, 40]);
scene.addLayer(layer);
// 此时在 scene 上绘制两个点
// 一个颜色为黄色，大小为 40 的点，对应 name 为 n1
// 一个颜色为红色，大小为 20 的点，对应 name 为 n2
const colorScale = layer.getScale('color'); // 获取 color 方法产生的 scale
const color1 = colorScale('n1'); // '#ff0'
const color1 = colorScale('n2'); // '#f00'
const sizeScale = layer.getScale('size'); // 获取 size 方法产生的 scale
const size1 = sizeScale('n1'); // 40
const size2 = sizeScale('n2'); // 20getLegendItems(type: string)
不推荐使用，将废弃，
获取图例配置
- type 图例类型
- index 可选 默认
layer.getLegendItems('color');
layer.getLegendItems('size');getLegend(type: string)
getLegendItems方法的替代方法
该方法需要
返回值
- type 图例类型
- field 映射字段
- items 图例项
layer.getLegend('color');
layer.getLegend('size');注：rasterayer 只支持 color 类型
图层掩模方法
addMask
添加 Mask 图层const polygonLayer = new Polygon();
layer.addMask(polygonLayer);
scene.render();removeMask
const polygonLayer = new Polygon();
layer.removeMask(polygonLayer);
scene.render();disableMask
layer.disableMask();
scene.render();enableMask
layer.enableMask();
scene.render();鼠标事件
鼠标事件回调参数 target
layer.on(eventName, (target) => console.log(target));- x: number 鼠标 在地图位置 x 坐标
- y: number 鼠标 在地图位置 y 坐标
- type: string 鼠标事件类型
- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
- feature: any; 数据选中的地理要素信息
- featureId: number | null; 数据选中的地理要素的 ID
click
点击事件
layer.on('click', (e) => console.log(e));dblclick
双击
layer.on('dblclick', (e) => console.log(e));mousemove
鼠标移动事件
layer.on('mousemove', (e) => console.log(e));mouseout
鼠标移除
layer.on('mouseout', (e) => console.log(e));mouseup
鼠标抬起
layer.on('mouseup', (e) => console.log(e));mousedown
鼠标按下
layer.on('mousedown', (e) => console.log(e));contextmenu
鼠标右键
layer.on('contextmenu', (e) => console.log(e));dblclick
双击拾取元素
layer.on('dblclick', (e) => console.log(e));mouseenter
鼠标进入图层要素时触发
layer.on('mouseenter', (e) => console.log(e));unclick
点击未拾取到元素
layer.on('unclick', (e) => console.log(e));unmousemove
鼠标移动未拾取到元素
layer.on('unmousemove', (e) => console.log(e));unmouseup
鼠标抬起未拾取到元素
layer.on('unmouseup', (e) => console.log(e));unmousedown
鼠标按下未拾取到元素
layer.on('unmousedown', (e) => console.log(e));uncontextmenu
鼠标右键位拾取到元素
layer.on('uncontextmenu', (e) => console.log(e));unpick
所有鼠标事件未拾取到
layer.on('unpick', (e) => console.log(e));touchstart
移动端事件 touchstart
layer.on('touchstart', (e) => console.log(e));touchend
移动端事件 touchend
layer.on('touchend', (e) => console.log(e));使用示例
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
layer.on('mouseenter', (ev) => {}); // 鼠标进入图层要素
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
// 鼠标在图层外的事件
layer.on('unclick', (ev) => {}); // 图层外点击
layer.on('unmousemove', (ev) => {}); // 图层外移动
layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件图层事件
inited
参数 option
- target 当前 layer
- type 事件类型
图层初始化完成后触发
layer.on('inited', (option) => {});add
图层添加到 scene
参数 option
- target 当前 layer
- type 事件类型
layer.on('add', (type) => console.log(type));remove
图层移除时触发
参数 option
- target 当前 layer
- type 事件类型
layer.on('remove', (type) => console.log(type));legend
数据映射更新，图例发生变化,主要 color、size
legend:color
数据映射更新，图例 color 颜色改变
参数 option：
- type 图例类型
- field 映射字段
- items 图例项
layer.on('legend:color', (ev) => console.log(ev));legend:size
数据映射更新，图例 size 大小改变
参数 option：
- type 图例类型
- field 映射字段
- items 图例项
layer.on('legend:size', (ev) => console.log(ev));图层框选
boxSelect
参数 option
- box [x1: number, y1: number, x2: number, y2: number] 相较于
- cb (…args: any[]) => void 传入的回调方法，返回框选内部的 feature
layer.boxSelect(box, cb);
// (x1, y1), (x2, y2) 框选的方框左上角和右下角相对于地图左上角的像素坐标
// cb 是传入的回调函数，回调函数返回的参数是选中的 feature 对象数组，对象的字段和用户传入的数据相关