Skip to content

Commit 2d971d3

Browse files
MyShallowTimeMyShallowTime
committed
[feature] 新增 Text、 SimpleLine 符号类
review by zhaoq
1 parent 03d4a2a commit 2d971d3

File tree

5 files changed

+273
-26
lines changed

5 files changed

+273
-26
lines changed

‎src/common/commontypes/symbol/DefaultValue.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const IMAGE_POINT_DEFAULT_VALUE = {
2323
export const SIMPLE_POINT_DEFAULT_VALUE = {
2424
...POINT_DEFAULT_VALUE,
2525
shape: 'circle',
26-
stroke: '#fff',
26+
strokeColor: '#FFF',
2727
strokeWidth: 0,
2828
strokeOpacity: COMMON_DEFAULT_VALUE.opacity,
2929
blur: COMMON_DEFAULT_VALUE.blur,
@@ -45,4 +45,17 @@ export const LINE_DEFAULT_VALUE = {
4545
export const POLYGON_DEFAULT_VALUE = {
4646
color: COMMON_DEFAULT_VALUE.color,
4747
opacity: COMMON_DEFAULT_VALUE.opacity
48+
}
49+
50+
export const TEXT_DEFAULT_VALUE = {
51+
field: '',
52+
size: 16,
53+
color: COMMON_DEFAULT_VALUE.color,
54+
opacity: COMMON_DEFAULT_VALUE.opacity,
55+
translate: COMMON_DEFAULT_VALUE.translate,
56+
fontFamily: ["Open Sans Regular","Arial Unicode MS Regular"],
57+
haloWidth: 0,
58+
anchor: 'center',
59+
spacing: 0,
60+
allowOverlap: false
4861
}

‎src/common/commontypes/symbol/SimplePoint.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
2+
* This program are made available under the terms of the Apache License, Version 2.0
3+
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4+
import {Point} from './Point';
5+
import {Util} from '../Util';
6+
import { SIMPLE_POINT_DEFAULT_VALUE } from './DefaultValue';
7+
8+
/**
9+
* @class SimplePointSymbol
10+
* @aliasclass Symbol.SimplePoint
11+
* @classdesc 简单点符号类。
12+
* @category BaseTypes Symbol
13+
* @extends {Point}
14+
* @param {number} [strokeColor = "#FFF"] - 符号边框颜色。
15+
* @param {string} [strokeWidth = 0] - 符号边框宽度。
16+
* @param {number} [strokeOpacity = 1] - 符号边框透明度。
17+
* @param {number} [translate = [0, 0]] - 符号偏移值。
18+
* @param {number} [blur = 0] - 符号模糊半径。
19+
* @param {string} [type = 'SimplePoint'] - 符号类型。
20+
* @example
21+
* const symbol = new SimplePointSymbol();
22+
* @usage
23+
*/
24+
export class SimplePoint extends Point {
25+
26+
constructor(option) {
27+
super();
28+
const { strokeColor, strokeWidth, strokeOpacity, translate, blur } = option ?? {};
29+
30+
/**
31+
* @member {number} SimplePointSymbol.prototype.strokeColor
32+
* @description 符号边框颜色，默认值："#FFF"。
33+
*/
34+
this.strokeColor = strokeColor ?? SIMPLE_POINT_DEFAULT_VALUE.strokeColor;
35+
36+
/**
37+
* @member {string} SimplePointSymbol.prototype.strokeWidth
38+
* @description 符号边框宽度，默认值：0。
39+
*/
40+
this.strokeWidth = strokeWidth ?? SIMPLE_POINT_DEFAULT_VALUE.strokeWidth;
41+
42+
/**
43+
* @member {string} SimplePointSymbol.prototype.strokeOpacity
44+
* @description 符号边框透明度，默认值：1。
45+
*/
46+
this.strokeOpacity = strokeOpacity ?? SIMPLE_POINT_DEFAULT_VALUE.strokeOpacity;
47+
48+
/**
49+
* @member {number} SimplePointSymbol.prototype.translate
50+
* @description 符号偏移值，默认值：[0, 0]
51+
*/
52+
this.translate = translate ?? SIMPLE_POINT_DEFAULT_VALUE.translate;
53+
54+
/**
55+
* @member {number} SimplePointSymbol.prototype.blur
56+
* @description 符号模糊半径，默认值：0
57+
*/
58+
this.blur = blur ?? SIMPLE_POINT_DEFAULT_VALUE.blur;
59+
60+
/**
61+
* @member {string} SimplePointSymbol.prototype.type
62+
* @description 符号类型。
63+
*/
64+
this.type = "SimplePoint";
65+
this.CLASS_NAME = "SuperMap.Symbol.SimplePoint";
66+
}
67+
68+
/**
69+
* @function SimplePointSymbol.prototype.clone
70+
* @description 克隆符号。
71+
* @returns {SimplePointSymbol} 克隆后的符号。
72+
*/
73+
clone(obj) {
74+
if (obj == null) {
75+
obj = new SimplePoint();
76+
}
77+
78+
// catch any randomly tagged-on properties
79+
Util.applyDefaults(obj, this);
80+
81+
return obj;
82+
}
83+
84+
/**
85+
* @function SimplePointSymbol.prototype.destroy
86+
* @description 释放符号的资源。
87+
*/
88+
destroy() {
89+
this.strokeColor = null;
90+
this.strokeWidth = null;
91+
this.strokeOpacity = null;
92+
this.translate = null;
93+
this.blur = null;
94+
super.destroy();
95+
}
96+
}

‎src/common/commontypes/symbol/Text.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
2+
* This program are made available under the terms of the Apache License, Version 2.0
3+
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4+
import {Symbol} from '../Symbol';
5+
import {Util} from '../Util';
6+
import { TEXT_DEFAULT_VALUE } from './DefaultValue';
7+
8+
/**
9+
* @class TextSymbol
10+
* @aliasclass Symbol.Text
11+
* @classdesc 文本符号类。
12+
* @category BaseTypes Symbol
13+
* @extends {Symbol}
14+
* @param {number} [field = ''] - 文本标签。
15+
* @param {number} [size = 16] - 文本大小。
16+
* @param {string} [color = "#000"] - 文本颜色。
17+
* @param {number} [opacity = 1] - 文本透明度。
18+
* @param {number} [translate = [0, 0]] - 文本偏移值。
19+
* @param {number} [fontFamily = ["Open Sans Regular", "Arial Unicode MS Regular"]] - 文本字体。
20+
* @param {number} [haloWidth = 0] - 文本光晕宽度。
21+
* @param {number} [anchor = 'center'] - 文本锚点。
22+
* @param {number} [spacing = 0] - 文本间隔。
23+
* @param {number} [allowOverlap = false] - 文本是否允许压盖。
24+
* @param {string} [type = 'Text'] - 符号类型。
25+
* @example
26+
* const symbol = new TextSymbol();
27+
* @usage
28+
*/
29+
export class Text extends Symbol {
30+
31+
constructor(option) {
32+
super();
33+
const { field, size, color, opacity, translate, fontFamily, haloWidth, anchor, spacing, allowOverlap } = option ?? {};
34+
35+
/**
36+
* @member {number} TextSymbol.prototype.field
37+
* @description 文本标签，默认值：""。
38+
*/
39+
this.field = field ?? TEXT_DEFAULT_VALUE.field;
40+
41+
/**
42+
* @member {number} TextSymbol.prototype.size
43+
* @description 文本大小，默认值：16。
44+
*/
45+
this.size = size ?? TEXT_DEFAULT_VALUE.size;
46+
47+
/**
48+
* @member {string} TextSymbol.prototype.color
49+
* @description 文本颜色，默认值："#000"。
50+
*/
51+
this.color = color ?? TEXT_DEFAULT_VALUE.color;
52+
53+
/**
54+
* @member {number} TextSymbol.prototype.opacity
55+
* @description 文本透明度，默认值：1
56+
*/
57+
this.opacity = opacity ?? TEXT_DEFAULT_VALUE.opacity;
58+
59+
/**
60+
* @member {number} TextSymbol.prototype.translate
61+
* @description 文本偏移值，默认值：[0, 0]
62+
*/
63+
this.translate = translate ?? TEXT_DEFAULT_VALUE.translate;
64+
65+
/**
66+
* @member {number} TextSymbol.prototype.fontFamily
67+
* @description 文本字体，默认值：[0, 0]
68+
*/
69+
this.fontFamily = fontFamily ?? TEXT_DEFAULT_VALUE.fontFamily;
70+
71+
/**
72+
* @member {number} TextSymbol.prototype.haloWidth
73+
* @description 文本光晕宽度，默认值：0
74+
*/
75+
this.haloWidth = haloWidth ?? TEXT_DEFAULT_VALUE.haloWidth;
76+
77+
/**
78+
* @member {number} TextSymbol.prototype.anchor
79+
* @description 文本对齐锚点，默认值：'center'
80+
*/
81+
this.anchor = anchor ?? TEXT_DEFAULT_VALUE.anchor;
82+
83+
/**
84+
* @member {number} TextSymbol.prototype.spacing
85+
* @description 文本间隔，默认值：0
86+
*/
87+
this.spacing = spacing ?? TEXT_DEFAULT_VALUE.spacing;
88+
89+
/**
90+
* @member {number} TextSymbol.prototype.allowOverlap
91+
* @description 文本是否允许覆盖，默认值：false
92+
*/
93+
this.allowOverlap = allowOverlap ?? TEXT_DEFAULT_VALUE.allowOverlap;
94+
95+
/**
96+
* @member {string} TextSymbol.prototype.type
97+
* @description 文本符号的类型。
98+
*/
99+
this.type = "Text";
100+
this.CLASS_NAME = "SuperMap.Symbol.Text";
101+
}
102+
103+
/**
104+
* @function TextSymbol.prototype.clone
105+
* @description 克隆文本符号。
106+
* @returns {TextSymbol} 克隆后的文本符号。
107+
*/
108+
clone(obj) {
109+
if (obj == null) {
110+
obj = new Text();
111+
}
112+
113+
// catch any randomly tagged-on properties
114+
Util.applyDefaults(obj, this);
115+
116+
return obj;
117+
}
118+
119+
/**
120+
* @function TextSymbol.prototype.destroy
121+
* @description 释放符号资源。
122+
*/
123+
destroy() {
124+
this.field = null;
125+
this.size = null;
126+
this.color = null;
127+
this.opacity = null;
128+
this.translate = null;
129+
this.fontFamily = null;
130+
this.haloWidth = null;
131+
this.anchor = null;
132+
this.spacing = null;
133+
this.allowOverlap = null;
134+
super.destroy();
135+
}
136+
}

‎src/mapboxgl/core/symbol/MapboxSymbolLayerManager.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,9 @@ const MapboxSymbolLayerManager = (m) => {
134134
this.setSimpleSymbol(layerIds[index], style);
135135
} else {
136136
const layer = map.getLayer(layerId);
137-
if (!layer) return;
137+
if (!layer) {
138+
return;
139+
}
138140
const { source, sourceLayer, filter } = layer;
139141
id = uniqueId(layerId + '_');
140142
const layerInfo = {

‎src/mapboxgl/core/symbol/SymbolTransformUtil.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IMAGE_POINT_DEFAULT_VALUE, LINE_DEFAULT_VALUE, POLYGON_DEFAULT_VALUE, SIMPLE_POINT_DEFAULT_VALUE } from "../../../common/commontypes/symbol/DefaultValue";
1+
import { IMAGE_POINT_DEFAULT_VALUE, LINE_DEFAULT_VALUE, POLYGON_DEFAULT_VALUE, SIMPLE_POINT_DEFAULT_VALUE, TEXT_DEFAULT_VALUE } from "../../../common/commontypes/symbol/DefaultValue";
22

33
// 根据symbol类型，获取图层类型
44
export function getLayerTypeByRender(symbolInfo) {
@@ -22,14 +22,14 @@ export function getLayerTypeByRender(symbolInfo) {
2222
export function getSymbolPaintLayout(symbolInfo) {
2323
return {
2424
paint: {
25-
'icon-color': symbolInfo.color || IMAGE_POINT_DEFAULT_VALUE.color,
26-
'icon-opacity': symbolInfo.opacity || IMAGE_POINT_DEFAULT_VALUE.opacity,
27-
'icon-translate': symbolInfo.translate || IMAGE_POINT_DEFAULT_VALUE.translate
25+
'icon-color': symbolInfo.color ?? IMAGE_POINT_DEFAULT_VALUE.color,
26+
'icon-opacity': symbolInfo.opacity ?? IMAGE_POINT_DEFAULT_VALUE.opacity,
27+
'icon-translate': symbolInfo.translate ?? IMAGE_POINT_DEFAULT_VALUE.translate
2828
},
2929
layout: {
30-
'icon-size': symbolInfo.size || IMAGE_POINT_DEFAULT_VALUE.size,
30+
'icon-size': symbolInfo.size ?? IMAGE_POINT_DEFAULT_VALUE.size,
3131
'icon-image': symbolInfo.image,
32-
'icon-rotate': symbolInfo.rotate || IMAGE_POINT_DEFAULT_VALUE.rotate
32+
'icon-rotate': symbolInfo.rotate ?? IMAGE_POINT_DEFAULT_VALUE.rotate
3333
// 符号库暂未支持的属性
3434
// 'icon-anchor': symbolInfo.anchor,
3535
// 'icon-allow-overlap': symbolInfo.allowOverlap,
@@ -44,14 +44,14 @@ export function getSymbolPaintLayout(symbolInfo) {
4444
export function getCirclePaintLayout(symbolInfo) {
4545
return {
4646
paint: {
47-
'circle-blur': symbolInfo.blur || SIMPLE_POINT_DEFAULT_VALUE.blur,
48-
'circle-color': symbolInfo.color || SIMPLE_POINT_DEFAULT_VALUE.color,
49-
'circle-opacity': symbolInfo.opacity || SIMPLE_POINT_DEFAULT_VALUE.opacity,
50-
'circle-radius': symbolInfo.size || SIMPLE_POINT_DEFAULT_VALUE.size,
51-
'circle-stroke-color': symbolInfo.stroke || SIMPLE_POINT_DEFAULT_VALUE.stroke,
52-
'circle-stroke-width': symbolInfo.strokeWidth || SIMPLE_POINT_DEFAULT_VALUE.strokeWidth,
53-
'circle-stroke-opacity': symbolInfo.strokeOpacity || SIMPLE_POINT_DEFAULT_VALUE.strokeOpacity,
54-
'circle-translate': symbolInfo.translate || SIMPLE_POINT_DEFAULT_VALUE.translate
47+
'circle-blur': symbolInfo.blur ?? SIMPLE_POINT_DEFAULT_VALUE.blur,
48+
'circle-color': symbolInfo.color ?? SIMPLE_POINT_DEFAULT_VALUE.color,
49+
'circle-opacity': symbolInfo.opacity ?? SIMPLE_POINT_DEFAULT_VALUE.opacity,
50+
'circle-radius': symbolInfo.size ?? SIMPLE_POINT_DEFAULT_VALUE.size,
51+
'circle-stroke-color': symbolInfo.strokeColor ?? SIMPLE_POINT_DEFAULT_VALUE.strokeColor,
52+
'circle-stroke-width': symbolInfo.strokeWidth ?? SIMPLE_POINT_DEFAULT_VALUE.strokeWidth,
53+
'circle-stroke-opacity': symbolInfo.strokeOpacity ?? SIMPLE_POINT_DEFAULT_VALUE.strokeOpacity,
54+
'circle-translate': symbolInfo.translate ?? SIMPLE_POINT_DEFAULT_VALUE.translate
5555
// 符号库暂未支持的属性
5656
// 'circle-translate-anchor': symbolInfo.translateAnchor
5757
},
@@ -148,26 +148,26 @@ export function polygonSymbolToPaintLayout(symbolInfo) {
148148
* @returns
149149
*/
150150
export function textSymbolToPaintLayout(symbolInfo) {
151-
const {field, color, opacity, size, fontFamily} = symbolInfo;
151+
const {field, color, opacity, size, fontFamily, translate, haloWidth, anchor, allowOverlap} = symbolInfo;
152152
return {
153153
type: 'symbol',
154154
paint: {
155-
'text-color': color,
156-
'text-opacity': opacity
155+
'text-color': color ?? TEXT_DEFAULT_VALUE.color,
156+
'text-opacity': opacity ?? TEXT_DEFAULT_VALUE.opacity,
157+
'text-translate': translate ?? TEXT_DEFAULT_VALUE.translate,
158+
'text-halo-width': haloWidth ?? TEXT_DEFAULT_VALUE.haloWidth
157159
// 符号库暂未支持的属性
158160
// 'text-halo-blur': symbolInfo.textHaloBlur,
159161
// 'text-halo-color': symbolInfo.textHaloColor,
160-
// 'text-halo-width': symbolInfo.textHaloWidth,
161-
// 'text-translate': symbolInfo.textTranslate,
162162
// 'text-translate-anchor': symbolInfo.textTranslateAnchor
163163
},
164164
layout: {
165-
'text-field': field,
166-
'text-size': size,
167-
'text-font': fontFamily
165+
'text-field': field ?? TEXT_DEFAULT_VALUE.field,
166+
'text-size': size ?? TEXT_DEFAULT_VALUE.size,
167+
'text-font': fontFamily ?? TEXT_DEFAULT_VALUE.fontFamily,
168+
'text-anchor': anchor ?? TEXT_DEFAULT_VALUE.anchor,
169+
'text-allow-overlap': allowOverlap ?? TEXT_DEFAULT_VALUE.allowOverlap
168170
// 符号库暂未支持的属性
169-
// 'text-allow-overlap': symbolInfo.textAllowOverlap,
170-
// 'text-anchor': symbolInfo.textAnchor,
171171
// 'text-ignore-placement': symbolInfo.textIgnorePlacement,
172172
// 'text-justify': symbolInfo.justify,
173173
// 'text-letter-spacing': symbolInfo.textLetterSpacing,

0 commit comments

Comments
 (0)