From a5039ed596e0862e6ff76eeda19971a10e16bbd6 Mon Sep 17 00:00:00 2001 From: shihui Date: Tue, 15 Feb 2022 15:14:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/point_layer/column.zh.md | 20 ++++++++++ docs/common/layer/layer_style.md | 62 +++++++++++++++---------------- docs/common/layer/options.md | 4 +- 3 files changed, 54 insertions(+), 32 deletions(-) diff --git a/docs/api/point_layer/column.zh.md b/docs/api/point_layer/column.zh.md index a25e613230..178cfb3622 100644 --- a/docs/api/point_layer/column.zh.md +++ b/docs/api/point_layer/column.zh.md @@ -118,4 +118,24 @@ layer.style({ [光标柱图](../../../examples/point/column#column_light) [渐变柱图](../../../examples/point/column#column_linear) +- heightFixed 设置 3D 柱体的高度固定（保持固定的笛卡尔高度而不是等像素高度） + +🌟 3D 柱图在设置 heightFixed 为 true 后柱子的半径也会固定，从 v2.7.12 版本开始支持 + +```javascript +style({ + heightfixed: true, // 默认为 false +}); +``` + +- pickLight 设置 3D 柱体拾取高亮颜色是否支持光照计算 + +🌟 3D 柱图支持通过设置 pickLight 来控制拾取高亮颜色的光照计算，从 v2.7.12 版本开始支持 + +```javascript +style({ + pickLight: true, // 默认为 false +}); +``` + `markdown:docs/common/layer/base.md` diff --git a/docs/common/layer/layer_style.md b/docs/common/layer/layer_style.md index ce598ef4b8..9754a5dd15 100644 --- a/docs/common/layer/layer_style.md +++ b/docs/common/layer/layer_style.md @@ -16,47 +16,47 @@ layer.style({ }); ``` -- 样式数据映射 - 在大多数情况下，用户需要将 source 中传入的数据映射到图层的元素中，以此来达到需要的可视化的效果，比如想要用柱形图表示各地的人口数据，代码可能是这个样子的： +- 样式数据映射🌟 + 在正常情况下，style 的参数会作用到一个图层上的所有图形，如一个 PointLayer 中有十个点，我们设置 opacity = 0.5， 这样十个点的透明度都是 0.5。 + 而在特殊情况下，我们可能需要为每个点分别设置一个透明度，这时候按照原来的方式直接设置 style 方法的 opacity 的值就无法满足需求了，为此我们需要提供特殊的赋值方式。 + 通常我们会根据传入图层的数据为图层的每个图形设置单独的值，因此我们称之为“样式数据映射”。 + 我们支持几种设置 style 中的参数从 source 数据中动态取值的写法。 ```javascript -const population = await getPopulation(); +// 根据数据中的 v 字段的值设置点图层各个点的透明度 +const data = [ + { + lng: 120, + lat: 30, + v: 0.5 + }, + ... +] const layer = new PointLayer() - .source(population) - .shape('cylinder') - .color('#f00') - .size('population'); // population 字段表示数据中的人口值 -scene.addLayer(layer); -``` - -而在一些特殊的业务场景下，我们可能需要将除了 size、color、以外的属性根据数据动态设置，如我们在绘制文本标注的时候需要根据文本的长短来设置偏移量，以保证文本位置的相对固定。在这种情况下，我们就需要使用图层样式数据纹理来完成这一项工作。 - -案例 - -```javascript -const pointLayer = new PointLayer({}) .source(data, { parser: { - type: 'json', - x: 'j', - y: 'w', - }, + x: 'lng', + y: 'lat' + } }) - .shape('m', 'text') - .size(12) - .color('w', ['#0e0030', '#0e0030', '#0e0030']) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直] - fontFamily, - iconfont: true, - textAllowOverlap: true, - }); + .shape('circle') + .color('#f00') + .size({ + // 第一种写法 根据字段从 data 中直接取值 + opacity: 'v'// opacity = 0.5 + + // 第二种写法 根据字段从 data 中取值，同时通过回调函数赋值（通常会在回调函数中写业务逻辑） + opacity: ['v', (v: number) => v] // opacity = 0.5 + + // 第三种写法 根据字段取值，然后映射到设置的值区间 + opaicty: ['v', [0.1, 0.5]] // opacity 的值字啊 0.1 ～ 0.5 之间 + }); +scene.addLayer(layer); ``` [在线案例](../../examples/point/text#styleMap) -从 L7 2.5 开始，各图层样式将逐步支持样式数据映射 +从 L7 2.5 开始，各图层样式将逐步支持样式数据映射，目前支持样式数据映射的 style 参数如下： | layer 类型/shape | 支持的样式字段 | 备注 | | ---------------------- | ---------------------------------------------------- | --------------------------------- | diff --git a/docs/common/layer/options.md b/docs/common/layer/options.md index 653ea3c074..19cd3f69a2 100644 --- a/docs/common/layer/options.md +++ b/docs/common/layer/options.md @@ -92,4 +92,6 @@ layer 初始化完成之后，地图是否自动缩放到图层范围 是否在 maskLayer 显示 - true 在内部显示 -- false 在外部显示 +- + +