diff --git a/dev-demos/features/point/demos/text2.tsx b/dev-demos/features/point/demos/text2.tsx
new file mode 100644
index 0000000000..9123ae73d9
--- /dev/null
+++ b/dev-demos/features/point/demos/text2.tsx
@@ -0,0 +1,80 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap} from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+ useEffect( () => {
+ const scene = new Scene({
+ id: 'map',
+ map: new GaodeMap({
+ center: [ 110, 36 ],
+ style: 'blank',
+ zoom: 3
+ })
+ });
+ scene.on('loaded', () => {
+ fetch('https://mdn.alipayobjects.com/afts/file/A*N5AuT5BKK3gAAAAAAAAAAAAADrd2AQ/china_point.json')
+ .then(res => res.json())
+ .then(data => {
+ const pointLayer1 = new PointLayer({})
+ .source(data)
+ .shape('circle')
+ .size(5)
+ .color('blue')
+ .style({
+ stroke: '#f00',
+ strokeWidth: 2,
+ offset: [ 10, 10 ]
+ })
+ const pointLayer = new PointLayer({})
+ .source(data)
+ .shape('NAME', 'text')
+ .size(12)
+ .color('red')
+ .scale('Alignment', {
+ type: 'cat',
+ range: [ '1', '2', '3' ],
+ })
+ .style({
+ // textAllowOverlap: true,
+ textAnchor: {
+ field:'Alignment',
+ value:[ 'left', 'top', 'right' ],
+ },// 文本相对锚点的位置 center|left|right|top|bottom|top-left
+ // textOffset: {
+ // field:'Location',
+ // value: (v)=>{
+ // return [v *2, 10+ 20* Math.random()]
+ // }
+ // }, // 文本相对锚点的偏移量 [水平, 垂直]
+ spacing: 2, // 字符间距
+ padding: [ 1, 1 ], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
+ stroke: '#ffffff', // 描边颜色
+ strokeWidth: 2, // 描边宽度
+ strokeOpacity: 1.0
+ });
+ scene.addLayer(pointLayer1);
+ scene.addLayer(pointLayer);
+
+ });
+
+ });
+
+ return ()=>{
+ scene.destroy();
+ }
+
+ }, []);
+ return (
+
+ );
+ };
+
\ No newline at end of file
diff --git a/dev-demos/features/point/pointText2.md b/dev-demos/features/point/pointText2.md
new file mode 100644
index 0000000000..799cd0d422
--- /dev/null
+++ b/dev-demos/features/point/pointText2.md
@@ -0,0 +1,3 @@
+### Point - text2
+#### 文本偏移
+
\ No newline at end of file
diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
index 4e4a3798db..ad65e0eed3 100644
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@@ -344,7 +344,8 @@ export interface ILayer {
layerPickService: ILayerPickService;
textureService: ITextureService;
sourceLayer?: string;
- enableEncodeStyles: string[];
+ enableShaderEncodeStyles: string[];
+ enableDataEncodeStyles: string[];
parent: ILayer;
id: string; // 一个场景中同一类型 Layer 可能存在多个
type: string; // 代表 Layer 的类型
diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 145399f06a..a6e323ed9e 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -224,7 +224,14 @@ export default class BaseLayer
public encodeStyleAttribute: Record = {};
- public enableEncodeStyles: string[] = [];
+ // Shader 的数据映射
+ public enableShaderEncodeStyles: string[] = [];
+
+ // 数据层数据映射
+
+ public enableDataEncodeStyles: string[] = [];
+
+ public enablg: string[] = [];
/**
* 待更新样式属性,在初始化阶段完成注册
@@ -731,9 +738,12 @@ export default class BaseLayer
Object.keys(options).forEach((key: string) => {
if (
// 需要数据映射
- this.enableEncodeStyles.includes(key) && // 支持的数据映射类型
- isPlainObject(options[key]) && //
- (options[key].field || options[key].value) && // 有数据映射的配置
+ [
+ this.enableShaderEncodeStyles,
+ ...this.enableDataEncodeStyles,
+ ].includes(key) &&
+ isPlainObject(options[key]) &&
+ (options[key].field || options[key].value) &&
!isEqual(this.encodeStyleAttribute[key], options[key]) // 防止计算属性重复计算
) {
this.encodeStyleAttribute[key] = options[key];
diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts
index 2fede2146f..3e197837f4 100644
--- a/packages/layers/src/core/BaseModel.ts
+++ b/packages/layers/src/core/BaseModel.ts
@@ -259,20 +259,22 @@ export default class BaseModel
offsets: 'vec2',
textOffset: 'vec2',
};
- this.layer.enableEncodeStyles.forEach((key: string) => {
+ this.layer.enableShaderEncodeStyles.forEach((key: string) => {
if (encodeStyleAttribute[key]) {
str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`;
}
str += `
- #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
- attribute ${attrType[key]} a_${key.charAt(0).toUpperCase() + key.slice(1)};
-#else
- uniform ${attrType[key]} u_${key};
-#endif\n
-`;
+ #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
+ attribute ${attrType[key]} a_${
+ key.charAt(0).toUpperCase() + key.slice(1)
+ };
+ #else
+ uniform ${attrType[key]} u_${key};
+ #endif\n
+ `;
});
let innerStr = '';
- this.layer.enableEncodeStyles.forEach((key) => {
+ this.layer.enableShaderEncodeStyles.forEach((key) => {
innerStr += `\n
#ifdef USE_ATTRIBUTE_${key.toUpperCase()}
${attrType[key]} ${key} = a_${key.charAt(0).toUpperCase() + key.slice(1)};
@@ -298,7 +300,7 @@ export default class BaseModel
stroke: [1, 0, 0, 1],
offsets: [0, 0],
};
- this.layer.enableEncodeStyles.forEach((key) => {
+ this.layer.enableShaderEncodeStyles.forEach((key) => {
if (!this.layer.encodeStyleAttribute[key]) {
// @ts-ignore
const keyValue = this.layer.getLayerConfig()[key];
diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts
index 6540bf6eb8..c224d40266 100644
--- a/packages/layers/src/line/index.ts
+++ b/packages/layers/src/line/index.ts
@@ -5,7 +5,7 @@ import LineModels, { LineModelType } from './models';
export default class LineLayer extends BaseLayer {
public type: string = 'LineLayer';
- public enableEncodeStyles = ['opacity', 'offsets', 'stroke'];
+ public enableShaderEncodeStyles = ['opacity', 'offsets', 'stroke'];
public arrowInsertCount: number = 0;
public defaultSourceConfig = {
data: [
diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts
index cb5a105093..b253133ad8 100644
--- a/packages/layers/src/line/models/arc_3d.ts
+++ b/packages/layers/src/line/models/arc_3d.ts
@@ -26,7 +26,7 @@ const lineStyleObj: { [key: string]: number } = {
};
export default class Arc3DModel extends BaseModel {
protected texture: ITexture2D;
- // public enableEncodeStyles = ['opacity'];
+ // public enableShaderEncodeStyles = ['opacity'];
public getUninforms(): IModelUniform {
const {
sourceColor,
diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts
index eb5514a2c3..6a5265ea5b 100644
--- a/packages/layers/src/point/index.ts
+++ b/packages/layers/src/point/index.ts
@@ -5,7 +5,8 @@ import PointModels, { PointType } from './models/index';
export default class PointLayer extends BaseLayer {
public type: string = 'PointLayer';
- public enableEncodeStyles = ['opacity', 'offsets', 'stroke'];
+ public enableShaderEncodeStyles = ['opacity', 'offsets', 'stroke'];
+ public enableDataEncodeStyles = ['textOffset', 'textAnchor'];
public defaultSourceConfig = {
data: [],
options: {
diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts
index e41a20f638..c1822859cd 100644
--- a/packages/layers/src/point/models/text.ts
+++ b/packages/layers/src/point/models/text.ts
@@ -101,7 +101,6 @@ export default class TextModel extends BaseModel {
private preTextStyle: Partial = {};
public getUninforms(): IModelUniform {
const {
- opacity = 1.0,
stroke = '#fff',
strokeWidth = 0,
halo = 0.5,
@@ -118,7 +117,6 @@ export default class TextModel extends BaseModel {
this.preTextStyle = this.getTextStyle();
return {
u_raisingHeight: Number(raisingHeight),
- // u_opacity: opacity,
u_stroke_width: strokeWidth,
u_stroke_color: rgb2arr(stroke),
u_sdf_map: this.texture,
@@ -398,18 +396,26 @@ export default class TextModel extends BaseModel {
const data = this.rawEncodeData;
this.glyphInfo = data.map((feature: IEncodeFeature) => {
const { shape = '', id, size = 1 } = feature;
+ const offset = feature.textOffset
+ ? feature.textOffset
+ : textOffset || [0, 0];
+ const anchor = feature.textAnchor
+ ? feature.textAnchor
+ : textAnchor || 'center';
+
const shaping = shapeText(
shape.toString(),
mapping,
// @ts-ignore
size,
- textAnchor,
+ anchor,
'left',
spacing,
- textOffset, // || feature['textOffset'] || [0, 0],// TODO: 文字偏移量 CPU 计算
+ offset, //
iconfont,
);
- const glyphQuads = getGlyphQuads(shaping, textOffset, false);
+
+ const glyphQuads = getGlyphQuads(shaping, offset, false);
feature.shaping = shaping;
feature.glyphQuads = glyphQuads;
// feature.centroid = calculteCentroid(coordinates);
diff --git a/packages/layers/src/polygon/index.ts b/packages/layers/src/polygon/index.ts
index 5879f27084..2be0ae03d5 100644
--- a/packages/layers/src/polygon/index.ts
+++ b/packages/layers/src/polygon/index.ts
@@ -5,7 +5,7 @@ import PolygonModels, { PolygonModelType } from './models/';
export default class PolygonLayer extends BaseLayer {
public type: string = 'PolygonLayer';
- public enableEncodeStyles = ['opacity'];
+ public enableShaderEncodeStyles = ['opacity'];
public defaultSourceConfig: {
data: [];
options: {