Skip to content

Commit 5339df3

Browse files
qiulinFVqiulinFV
committed
# Conflicts: # src/openlayers/mapping/WebMap.js
2 parents 0f200b2 + cf2584a commit 5339df3

File tree

2 files changed

+167
-65
lines changed

2 files changed

+167
-65
lines changed

‎src/openlayers/core/StyleUtils.js

Lines changed: 76 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,8 @@ export class StyleUtils {
610610
lineCap,
611611
src,
612612
scale,
613+
offsetX,
614+
offsetY,
613615
//size,
614616
//imgSize,
615617
anchor
@@ -647,14 +649,15 @@ export class StyleUtils {
647649
}
648650
} else {
649651
newImage = new CircleStyle({
650-
radius: radius,
652+
radius,
651653
fill: new FillStyle({
652654
color: fillColorArray
653655
}),
654656
stroke: new StrokeStyle({
655657
width: strokeWidth || ZERO,
656658
color: strokeColorArray
657-
})
659+
}),
660+
displacement: this.getCircleDisplacement(radius, offsetX, offsetY)
658661
});
659662
}
660663
olStyle.setImage(newImage);
@@ -692,6 +695,44 @@ export class StyleUtils {
692695
return olStyle;
693696
}
694697

698+
/**
699+
* @function ol.supermap.StyleUtils.getIconAnchor
700+
* @description 获取图标的锚点
701+
* @param {number} offsetX - X方向偏移分数
702+
* @param {number} offsetY - Y方向偏移分数
703+
* @returns {array}
704+
*/
705+
static getIconAnchor(offsetX, offsetY) {
706+
return [offsetX, offsetY];
707+
}
708+
/**
709+
* @function ol.supermap.StyleUtils.getCircleDisplacement
710+
* @description 获取圆圈的偏移
711+
* @param {number} radius - 圆圈半径
712+
* @param {number} offsetX - X方向偏移分数
713+
* @param {number} offsetY - Y方向偏移分数
714+
* @returns {array}
715+
*/
716+
static getCircleDisplacement(radius, offsetX, offsetY) {
717+
const dispX = radius*offsetX, dispY = radius*offsetY;
718+
return [dispX, -dispY];
719+
}
720+
/**
721+
* @function ol.supermap.StyleUtils.getTextOffset
722+
* @description 获取字体图标的偏移值
723+
* @param {string} fontSize - 字体大小，如12px
724+
* @param {number} offsetX - X方向偏移分数
725+
* @param {number} offsetY - Y方向偏移分数
726+
* @returns {object}
727+
*/
728+
static getTextOffset(fontSize, offsetX, offsetY) {
729+
const radius = fontSize.substr(0, fontSize.length - 2) / 2;
730+
return {
731+
x: radius*offsetX,
732+
y: radius*offsetY
733+
};
734+
}
735+
695736
/**
696737
* 获取文字标注对应的canvas
697738
* @param style
@@ -1033,23 +1074,28 @@ export class StyleUtils {
10331074

10341075
let fontSize = isRank ? 2 * parameters.radius + "px" : parameters.fontSize;
10351076

1077+
const {offsetX, offsetY, rotation} = parameters;
1078+
const offset = StyleUtils.getTextOffset(fontSize, offsetX, offsetY);
10361079
return new Style({
1037-
text: new Text({
1038-
text: text,
1039-
font: fontSize + " supermapol-icons",
1040-
placement: 'point',
1041-
textAlign: 'center',
1042-
fill: new FillStyle({
1043-
color: fillColor
1044-
}),
1045-
backgroundFill: new FillStyle({
1046-
color: [0, 0, 0, 0]
1047-
}),
1048-
stroke: new StrokeStyle({
1049-
width: parameters.strokeWidth || 0.000001,
1050-
color: strokeColor
1080+
text: new Text({
1081+
text: text,
1082+
font: fontSize + " supermapol-icons",
1083+
placement: 'point',
1084+
textAlign: 'center',
1085+
fill: new FillStyle({
1086+
color: fillColor
1087+
}),
1088+
backgroundFill: new FillStyle({
1089+
color: [0, 0, 0, 0]
1090+
}),
1091+
stroke: new StrokeStyle({
1092+
width: parameters.strokeWidth || 0.000001,
1093+
color: strokeColor
1094+
}),
1095+
offsetX: offset.x,
1096+
offsetY: offset.y,
1097+
rotation
10511098
})
1052-
})
10531099
});
10541100
}
10551101
/**
@@ -1063,14 +1109,18 @@ export class StyleUtils {
10631109
that.svgDiv = document.createElement('div');
10641110
document.body.appendChild(that.svgDiv);
10651111
}
1066-
StyleUtils.getCanvasFromSVG(styleParams.url, that.svgDiv, function (canvas) {
1112+
const { url, radius, offsetX, offsetY, fillOpacity, rotation } = styleParams;
1113+
let anchor = this.getIconAnchor(offsetX, offsetY);
1114+
StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
10671115
style = new Style({
10681116
image: new Icon({
10691117
img: that.setColorToCanvas(canvas, styleParams),
1070-
scale: styleParams.radius / canvas.width,
1118+
scale: 2 * radius / canvas.width,
10711119
imgSize: [canvas.width, canvas.height],
1072-
anchor: [0.5, 0.5],
1073-
opacity: styleParams.fillOpacity
1120+
anchor: anchor || [0.5, 0.5],
1121+
opacity: fillOpacity,
1122+
anchorOrigin: 'bottom-right',
1123+
rotation
10741124
})
10751125
});
10761126
});
@@ -1111,14 +1161,17 @@ export class StyleUtils {
11111161
//要组装成完整的url
11121162
imgDom.src = imageInfo.url;
11131163
}
1164+
const { offsetX, offsetY, rotation } = styleParams;
1165+
let anchor = this.getIconAnchor(offsetX, offsetY);
11141166
return new Style({
11151167
image: new Icon({
11161168
img: imgDom,
11171169
scale,
11181170
imgSize: [size.w, size.h],
1119-
anchor: [0.5, 0.5]
1171+
anchor: anchor || [0.5, 0.5],
1172+
anchorOrigin: 'bottom-right',
1173+
rotation
11201174
})
11211175
});
11221176
}
1123-
11241177
}

‎src/openlayers/mapping/WebMap.js

Lines changed: 91 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import * as olSource from 'ol/source';
4040
import Feature from 'ol/Feature';
4141
import Style from 'ol/style/Style';
4242
import FillStyle from 'ol/style/Fill';
43+
import StrokeStyle from 'ol/style/Stroke';
4344
import Text from 'ol/style/Text';
4445
import Collection from 'ol/Collection';
4546
import { containsCoordinate, getCenter } from "ol/extent";
@@ -1113,6 +1114,25 @@ export class WebMap extends Observable {
11131114
that.errorCallback && that.errorCallback(error, 'getWmtsFaild', that.map)
11141115
});
11151116
}
1117+
/**
1118+
* @private
1119+
* @function ol.supermap.WebMap.prototype.getWMTSUrl
1120+
* @description 获取wmts请求文档的url
1121+
* @param {string} url - 图层信息。
1122+
* @param {boolean} isKvp - 是否为kvp模式
1123+
*/
1124+
getWMTSUrl(url, isKvp) {
1125+
let splitStr = '?';
1126+
if (url.indexOf('?') > -1) {
1127+
splitStr = '&'
1128+
}
1129+
if (isKvp) {
1130+
url += splitStr + 'SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities';
1131+
} else {
1132+
url += splitStr + '/1.0.0/WMTSCapabilities.xml';
1133+
}
1134+
return this.getRequestUrl(url);
1135+
}
11161136

11171137
/**
11181138
* @private
@@ -1127,7 +1147,8 @@ export class WebMap extends Observable {
11271147
withCredentials: true,
11281148
withoutFormatSuffix: true
11291149
};
1130-
return FetchRequest.get(that.getRequestUrl(layerInfo.url), null, options).then(function (response) {
1150+
const isKvp = !layerInfo.requestEncoding || layerInfo.requestEncoding === 'KVP';
1151+
return FetchRequest.get(that.getWMTSUrl(layerInfo.url, isKvp), null, options).then(function (response) {
11311152
return response.text();
11321153
}).then(function (capabilitiesText) {
11331154
const format = new WMTSCapabilities();
@@ -1175,8 +1196,7 @@ export class WebMap extends Observable {
11751196
} else {
11761197
extent = olProj.get(that.baseProjection).getExtent()
11771198
}
1178-
const isKvp = !layerInfo.requestEncoding || layerInfo.requestEncoding === 'KVP';
1179-
layerInfo.tileUrl = that.getTileUrl(capabilities.OperationsMetadata.GetTile.DCP.HTTP.Get, isKvp, layerInfo.layer, layerInfo.tileMatrixSet);
1199+
layerInfo.tileUrl = that.getTileUrl(capabilities.OperationsMetadata.GetTile.DCP.HTTP.Get, layer, layerFormat, isKvp);
11801200
//将需要的参数补上
11811201
layerInfo.extent = extent;
11821202
layerInfo.matrixSet = matrixSet;
@@ -1204,22 +1224,23 @@ export class WebMap extends Observable {
12041224
* @function ol.supermap.WebMap.prototype.getTileUrl
12051225
* @description 获取wmts的图层参数。
12061226
* @param {array} getTileArray - 图层信息。
1207-
* @param {boolean} isKvp - 是否是kvp方式
12081227
* @param {string} layer - 选择的图层
1209-
* @param {string} matrixSet -选择比例尺
1228+
* @param {string} format - 选择的出图方式
1229+
* @param {boolean} isKvp - 是否是kvp方式
12101230
*/
1211-
getTileUrl(getTileArray, isKvp, layer, matrixSet) {
1212-
let url, type = isKvp ? 'KVP' : 'RESTful';
1231+
getTileUrl(getTileArray, layer, format, isKvp) {
1232+
let url;
1233+
if(isKvp) {
12131234
getTileArray.forEach(data => {
1214-
if(data.Constraint[0].AllowedValues.Value[0].toUpperCase() === type.toUpperCase()) {
1235+
if(data.Constraint[0].AllowedValues.Value[0].toUpperCase() === 'KVP') {
12151236
url = data.href;
1216-
}
1237+
}
12171238
})
1218-
if(!isKvp) {
1219-
//Restful格式
1220-
url = `${url}${layer}/default/${matrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png`;
1221-
//supermap iserver发布的restful会有一个？
1222-
url = url.replace('?', '/');
1239+
} else {
1240+
const reuslt = layer.ResourceURL.filter(resource => {
1241+
return resource.format === format;
1242+
})
1243+
url = reuslt[0].template;
12231244
}
12241245
return url;
12251246
}
@@ -2250,7 +2271,7 @@ export class WebMap extends Observable {
22502271
* @param {array} allFeatures - 图层上的feature集合
22512272
*/
22522273
getFiterFeatures(filterCondition, allFeatures) {
2253-
let condition = this.replaceFilterCharacter(filterCondition);
2274+
let condition = this.parseFilterCondition(filterCondition);
22542275
let sql = "select * from json where (" + condition + ")";
22552276
let filterFeatures = [];
22562277
for (let i = 0; i < allFeatures.length; i++) {
@@ -2274,14 +2295,29 @@ export class WebMap extends Observable {
22742295

22752296
/**
22762297
* @private
2277-
* @function ol.supermap.WebMap.prototype.replaceFilterCharacter
2278-
* @description 替换查询语句 中的 and / AND / or / OR / = / !=
2279-
* @param {string} filterString - 过滤条件
2298+
* @function ol.supermap.WebMap.prototype.parseFilterCondition
2299+
* @description 1、替换查询语句 中的 and / AND / or / OR / = / !=
2300+
* 2、匹配 Name in ('', '')，多条件需用()包裹
2301+
* @param {string} filterCondition - 过滤条件
22802302
* @return {string} 换成组件能识别的字符串
22812303
*/
2282-
replaceFilterCharacter(filterString) {
2283-
filterString = filterString.replace(/=/g, '==').replace(/AND|and/g, '&&').replace(/or|OR/g, '||').replace(/<==/g, '<=').replace(/>==/g, '>=');
2284-
return filterString;
2304+
parseFilterCondition(filterCondition) {
2305+
return filterCondition
2306+
.replace(/=/g, "==")
2307+
.replace(/AND|and/g, "&&")
2308+
.replace(/or|OR/g, "||")
2309+
.replace(/<==/g, "<=")
2310+
.replace(/>==/g, ">=")
2311+
.replace(/\(?[^\(]+?\s+in\s+\([^\)]+?\)\)?/g, (res) => {
2312+
// res格式：(省份 in ('四川', '河南'))
2313+
const data = res.match(/([^(]+?)\s+in\s+\(([^)]+?)\)/);
2314+
return data.length === 3
2315+
? `(${data[2]
2316+
.split(",")
2317+
.map((c) => `${data[1]} == ${c.trim()}`)
2318+
.join(" || ")})`
2319+
: res;
2320+
});
22852321
}
22862322

22872323
/**
@@ -2414,28 +2450,41 @@ export class WebMap extends Observable {
24142450
*/
24152451
getLabelStyle(parameters, layerInfo) {
24162452
let style = layerInfo.style || layerInfo.pointStyle;
2417-
let radius = style.radius || 0;
2418-
let strokeWidth = style.strokeWidth || 0;
2419-
let offsetY = -1.8 * radius - strokeWidth;
2420-
if (offsetY > -20) {
2421-
offsetY = -20;
2453+
const {radius=0, strokeWidth=0} = style,
2454+
beforeOffsetY = -(radius + strokeWidth);
2455+
const {
2456+
fontSize = '14px',
2457+
fontFamily,
2458+
fill,
2459+
backgroundFill,
2460+
offsetX = 0,
2461+
offsetY = beforeOffsetY,
2462+
placement = "point",
2463+
textBaseline = "bottom",
2464+
textAlign='center',
2465+
outlineColor = "#000000",
2466+
outlineWidth = 0
2467+
} = parameters;
2468+
const option = {
2469+
font: `${fontSize} ${fontFamily}`,
2470+
placement,
2471+
textBaseline,
2472+
textAlign,
2473+
fill: new FillStyle({ color: fill }),
2474+
backgroundFill: new FillStyle({ color: backgroundFill }),
2475+
padding: [3, 3, 3, 3],
2476+
offsetX: layerInfo.featureType === 'POINT' ? offsetX : 0,
2477+
offsetY: layerInfo.featureType === 'POINT' ? offsetY : 0
2478+
};
2479+
if (outlineWidth > 0) {
2480+
option.stroke = new StrokeStyle({
2481+
color: outlineColor,
2482+
width: outlineWidth
2483+
});
24222484
}
2423-
parameters.offsetY = offsetY;
24242485

24252486
return new Style({
2426-
text: new Text({
2427-
font: `${parameters.fontSize || '14px'} ${parameters.fontFamily}`,
2428-
placement: 'point',
2429-
textAlign: 'center',
2430-
fill: new FillStyle({
2431-
color: parameters.fill
2432-
}),
2433-
backgroundFill: new FillStyle({
2434-
color: parameters.backgroundFill || [255, 255, 255, 0.7]
2435-
}),
2436-
padding: [3, 3, 3, 3],
2437-
offsetY: parameters.offsetY
2438-
})
2487+
text: new Text(option)
24392488
});
24402489
}
24412490

@@ -2896,7 +2945,7 @@ export class WebMap extends Observable {
28962945
});
28972946
if(layerInfo.filterCondition) {
28982947
//过滤条件
2899-
let condition = that.replaceFilterCharacter(layerInfo.filterCondition);
2948+
let condition = that.parseFilterCondition(layerInfo.filterCondition);
29002949
let sql = "select * from json where (" + condition + ")";
29012950
let filterResult = window.jsonsql.query(sql, {
29022951
attributes: feature.get('attributes')
@@ -3046,7 +3095,7 @@ export class WebMap extends Observable {
30463095
return function (feature) {
30473096
if(layerInfo.filterCondition) {
30483097
//过滤条件
3049-
let condition = that.replaceFilterCharacter(layerInfo.filterCondition);
3098+
let condition = that.parseFilterCondition(layerInfo.filterCondition);
30503099
let sql = "select * from json where (" + condition + ")";
30513100
let filterResult = window.jsonsql.query(sql, {
30523101
attributes: feature.get('attributes')

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy