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: {