mirror of https://gitee.com/antv-l7/antv-l7
fix(boundry): 文字新增style 属性
This commit is contained in:
parent
e462d3eafa
commit
21abe66d06
|
@ -40,7 +40,8 @@ scene.addMarkerLayer(markerLayer);
|
|||
- field `string` 聚合统计字段
|
||||
- method `sum| max| min| mean`
|
||||
- element `function` 通过回调函数设置聚合 Marker 的样式,返回 dom 元素
|
||||
参数:feature
|
||||
|
||||
回调函数包含以下参数
|
||||
point_count 默认 聚合元素个数
|
||||
clusterData `Array` 聚合节点的原始数据
|
||||
point_sum 聚合求和 根据 field 和 method 计算
|
||||
|
|
|
@ -41,9 +41,7 @@ scene.addMarkerLayer(markerLayer);
|
|||
- field `string` 聚合统计字段
|
||||
- method `sum| max| min| mean`
|
||||
- element `function` 通过回调函数设置聚合 Marker 的样式,返回 dom 元素
|
||||
|
||||
参数:feature
|
||||
|
||||
回调函数包含以下参数
|
||||
- point_count 默认 聚合元素个数
|
||||
- clusterData `Array` 聚合节点的原始数据
|
||||
- point_sum 聚合求和 根据 field 和 method 计算
|
||||
|
|
|
@ -112,6 +112,8 @@ export default class BaseLayer extends EventEmitter {
|
|||
strokeWidth: 2,
|
||||
textAllowOverlap: true,
|
||||
opacity: 1,
|
||||
textOffset: [0, 0],
|
||||
padding: [0, 0],
|
||||
},
|
||||
bubble: {
|
||||
enable: false,
|
||||
|
@ -285,7 +287,7 @@ export default class BaseLayer extends EventEmitter {
|
|||
protected addLabel(labelData: any, type: string = 'json') {
|
||||
const { label, zIndex, visible } = this.options;
|
||||
const labelLayer = new PointLayer({
|
||||
zIndex: zIndex + 0.4,
|
||||
zIndex: zIndex + 5,
|
||||
visible,
|
||||
})
|
||||
.source(labelData, {
|
||||
|
@ -297,12 +299,7 @@ export default class BaseLayer extends EventEmitter {
|
|||
.color(label.color as StyleAttrField)
|
||||
.shape(label.field as StyleAttrField, 'text')
|
||||
.size(10)
|
||||
.style({
|
||||
opacity: label.opacity,
|
||||
stroke: label.stroke,
|
||||
strokeWidth: label.strokeWidth,
|
||||
textAllowOverlap: label.textAllowOverlap,
|
||||
});
|
||||
.style(label);
|
||||
|
||||
this.setLayerAttribute(labelLayer, 'filter', label.filter);
|
||||
return labelLayer;
|
||||
|
|
|
@ -4,6 +4,21 @@ import {
|
|||
StyleAttributeField,
|
||||
StyleAttributeOption,
|
||||
} from '@antv/l7';
|
||||
export type anchorType =
|
||||
| 'right'
|
||||
| 'top-right'
|
||||
| 'left'
|
||||
| 'bottom-right'
|
||||
| 'left'
|
||||
| 'top-left'
|
||||
| 'bottom-left'
|
||||
| 'bottom'
|
||||
| 'bottom-right'
|
||||
| 'bottom-left'
|
||||
| 'top'
|
||||
| 'top-right'
|
||||
| 'top-left'
|
||||
| 'center';
|
||||
export interface ILabelOption {
|
||||
enable: boolean;
|
||||
color: string;
|
||||
|
@ -12,6 +27,12 @@ export interface ILabelOption {
|
|||
stroke: string;
|
||||
strokeWidth: number;
|
||||
textAllowOverlap: boolean;
|
||||
padding: [number, number];
|
||||
strokeOpacity: number;
|
||||
fontWeight: number;
|
||||
spacing: number;
|
||||
textAnchor: anchorType;
|
||||
textOffset: [number, number];
|
||||
opacity: number;
|
||||
filter: AttributeType;
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ import BaseModel from '../../core/BaseModel';
|
|||
import CollisionIndex from '../../utils/collision-index';
|
||||
import { calculteCentroid } from '../../utils/geo';
|
||||
import {
|
||||
anchorType,
|
||||
getGlyphQuads,
|
||||
IGlyphQuad,
|
||||
shapeText,
|
||||
|
@ -22,7 +23,7 @@ import textFrag from '../shaders/text_frag.glsl';
|
|||
import textVert from '../shaders/text_vert.glsl';
|
||||
interface IPointTextLayerStyleOptions {
|
||||
opacity: number;
|
||||
textAnchor: string;
|
||||
textAnchor: anchorType;
|
||||
spacing: number;
|
||||
padding: [number, number];
|
||||
stroke: string;
|
||||
|
|
|
@ -1,7 +1,24 @@
|
|||
import { type } from 'os';
|
||||
|
||||
interface IPoint {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
export type anchorType =
|
||||
| 'right'
|
||||
| 'top-right'
|
||||
| 'left'
|
||||
| 'bottom-right'
|
||||
| 'left'
|
||||
| 'top-left'
|
||||
| 'bottom-left'
|
||||
| 'bottom'
|
||||
| 'bottom-right'
|
||||
| 'bottom-left'
|
||||
| 'top'
|
||||
| 'top-right'
|
||||
| 'top-left'
|
||||
| 'center';
|
||||
export interface IGlyphQuad {
|
||||
tr: IPoint;
|
||||
tl: IPoint;
|
||||
|
@ -22,10 +39,9 @@ export interface IGlyphQuad {
|
|||
* @param {string} anchor 锚点位置
|
||||
* @return {alignment} alignment
|
||||
*/
|
||||
function getAnchorAlignment(anchor: string) {
|
||||
function getAnchorAlignment(anchor: anchorType) {
|
||||
let horizontalAlign = 0.5;
|
||||
let verticalAlign = 0.5;
|
||||
|
||||
switch (anchor) {
|
||||
case 'right':
|
||||
case 'top-right':
|
||||
|
@ -109,7 +125,7 @@ function shapeLines(
|
|||
glyphMap: any,
|
||||
lines: any[],
|
||||
lineHeight: number,
|
||||
textAnchor: string,
|
||||
textAnchor: anchorType,
|
||||
textJustify: string,
|
||||
spacing: number,
|
||||
) {
|
||||
|
@ -197,7 +213,7 @@ export function shapeText(
|
|||
text: string,
|
||||
glyphs: any,
|
||||
lineHeight: number,
|
||||
textAnchor: string,
|
||||
textAnchor: anchorType,
|
||||
textJustify: string,
|
||||
spacing: number,
|
||||
translate: [number, number] = [0, 0],
|
||||
|
|
|
@ -202,10 +202,11 @@ export default class Country extends React.Component {
|
|||
geoDataLevel: 1,
|
||||
joinBy: ['NAME_CHN', 'name'],
|
||||
showBorder: false,
|
||||
// label: {
|
||||
// field: 'NAME_CHN',
|
||||
// textAllowOverlap: true,
|
||||
// },
|
||||
label: {
|
||||
field: 'name',
|
||||
padding: [5, 5],
|
||||
textAllowOverlap: true,
|
||||
},
|
||||
depth: 1,
|
||||
fill: {
|
||||
color: {
|
||||
|
|
|
@ -46,6 +46,7 @@ export default class Country extends React.Component {
|
|||
enable: true,
|
||||
textAllowOverlap: false,
|
||||
field: 'NAME_ENG',
|
||||
padding: [5, 5],
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
|
|
Loading…
Reference in New Issue