fix(boundry): 文字新增style 属性

This commit is contained in:
thinkinggis 2020-07-02 17:49:09 +08:00
parent e462d3eafa
commit 21abe66d06
8 changed files with 56 additions and 20 deletions

View File

@ -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 计算

View File

@ -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 计算

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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],

View File

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

View File

@ -46,6 +46,7 @@ export default class Country extends React.Component {
enable: true,
textAllowOverlap: false,
field: 'NAME_ENG',
padding: [5, 5],
},
popup: {
enable: true,