Skip to content

Commit 105dcee

Browse files
Yuki-ZhaoYuki-Zhao
committed
【update】1）webmap增加对接数据流图层以及等级符号专题图
 2）webmap对接支持多做表现，不止4326和3857两种坐标系（edited by yuzy） 3) 修复webmap中标签图层过滤的问题 4）增加天地图token，让天地图能够正常使用 5）暂时注释webmap的单元测试 （edited by zhaoq reviewed by songym）
1 parent 5b28ffe commit 105dcee

File tree

4 files changed

+1215
-257
lines changed

4 files changed

+1215
-257
lines changed

‎src/openlayers/core/StyleUtils.js

Lines changed: 172 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ export class StyleUtils {
428428
var str = style.strokeDashstyle || style.lineDash;
429429
switch (str) {
430430
case 'solid':
431-
return [];
431+
return [0];
432432
case 'dot':
433433
return [1, 4 * w];
434434
case 'dash':
@@ -641,7 +641,7 @@ export class StyleUtils {
641641
});
642642
}
643643
olStyle.setImage(newImage);
644-
} else if (type === "LINE" || type === "LINESTRING") {
644+
} else if (type === "LINE" || type === "LINESTRING" || type === 'MULTILINESTRING' || type === 'LINEARRING') {
645645
newStroke = new ol.style.Stroke({
646646
width: strokeWidth || ZERO,
647647
color: strokeColorArray,
@@ -650,7 +650,7 @@ export class StyleUtils {
650650
});
651651
olStyle.setStroke(newStroke);
652652
} else if(type === 'POLYGON' ||
653-
type === 'MULTIPOLYGON'){
653+
type === 'MULTIPOLYGON' || type === 'REGION'){
654654
newFill = new ol.style.Fill({
655655
color: fillColorArray
656656
});
@@ -932,6 +932,175 @@ export class StyleUtils {
932932
}
933933
}
934934

935+
/**
936+
* @function ol.supermap.StyleUtils.getMarkerDefaultStyle 获取默认标注图层feature的样式
937+
* @param featureType {String} feature的类型
938+
* @param server {String} 当前地图前缀
939+
* @returns {Object} style对象
940+
*/
941+
static getMarkerDefaultStyle(featureType, server) {
942+
let style;
943+
switch (featureType) {
944+
case 'POINT':
945+
style = {
946+
src: `${server}apps/dataviz/static/imgs/markers/mark_red.png`,
947+
scale: 1,
948+
anchor: [0.5, 1]
949+
};
950+
break;
951+
case 'LINE':
952+
case 'LINESTRING':
953+
case 'MULTILINESTRING':
954+
style = {
955+
strokeColor: '#3498db',
956+
strokeOpacity: 1,
957+
strokeWidth: 5,
958+
lineCap: 'round',
959+
lineDash: 'solid'
960+
};
961+
break;
962+
case 'REGION':
963+
case 'POLYGON':
964+
case 'MULTIPOLYGON':
965+
style = {
966+
fillColor: '#1abd9c',
967+
fillOpacity: 1,
968+
strokeColor: '#3498db',
969+
strokeOpacity: 1,
970+
strokeWidth: 3,
971+
lineCap: 'round',
972+
lineDash: 'solid'
973+
};
974+
break;
975+
}
976+
return style;
977+
}
978+
979+
/**
980+
* @function ol.supermap.StyleUtils.getOpenlayerStyle 获取专题图对应的openlayers格式的style
981+
* @param styleParams {String} 样式参数
982+
* @param featureType {String} feature类型
983+
* @returns {Object} style对象
984+
*/
985+
static getOpenlayersStyle(styleParams, featureType) {
986+
let style;
987+
if(styleParams.type === "BASIC_POINT") {
988+
style = this.toOpenLayersStyle(styleParams, featureType);
989+
} else if(styleParams.type === "SYMBOL_POINT") {
990+
style = this.getSymbolStyle(styleParams);
991+
} else if(styleParams.type === "SVG_POINT"){
992+
style = this.getSVGStyle(styleParams);
993+
} else if (styleParams.type === 'IMAGE_POINT') {
994+
style = this.getImageStyle(styleParams);
995+
}
996+
return style;
997+
}
998+
999+
/**
1000+
* @function ol.supermap.StyleUtils.getSymbolStyle 获取符号样式
1001+
* @param {object} parameters - 样式参数
1002+
* @returns {Object} style对象
1003+
*/
1004+
static getSymbolStyle(parameters) {
1005+
let text = '';
1006+
if (parameters.unicode) {
1007+
text = String.fromCharCode(parseInt(parameters.unicode.replace(/^&#x/, ''), 16));
1008+
}
1009+
// 填充色 + 透明度
1010+
let fillColor = StyleUtils.hexToRgb(parameters.fillColor);
1011+
fillColor.push(parameters.fillOpacity);
1012+
// 边框充色 + 透明度
1013+
let strokeColor = StyleUtils.hexToRgb(parameters.strokeColor);
1014+
strokeColor.push(parameters.strokeOpacity);
1015+
1016+
return new ol.style.Style({
1017+
text: new ol.style.Text({
1018+
text: text,
1019+
font: parameters.fontSize + " " + "supermapol-icons",
1020+
placement: 'point',
1021+
textAlign: 'center',
1022+
fill: new ol.style.Fill({
1023+
color: fillColor
1024+
}),
1025+
backgroundFill: new ol.style.Fill({
1026+
color: [0, 0, 0, 0]
1027+
}),
1028+
stroke: new ol.style.Stroke({
1029+
width: parameters.strokeWidth || 0.000001,
1030+
color: strokeColor
1031+
})
1032+
})
1033+
});
1034+
}
1035+
/**
1036+
* @function ol.supermap.StyleUtils.getSVGStyle 获取svg的样式
1037+
* @param {object} styleParams - 样式参数
1038+
* @returns {Object} style对象
1039+
*/
1040+
static getSVGStyle(styleParams) {
1041+
let style, that = this;
1042+
if(!that.svgDiv) {
1043+
that.svgDiv = document.createElement('div');
1044+
document.body.appendChild(that.svgDiv);
1045+
}
1046+
StyleUtils.getCanvasFromSVG(styleParams.url, that.svgDiv, function (canvas) {
1047+
style = new ol.style.Style({
1048+
image: new ol.style.Icon({
1049+
img: that.setColorToCanvas(canvas,styleParams),
1050+
scale: styleParams.radius/canvas.width,
1051+
imgSize: [canvas.width, canvas.height],
1052+
anchor : [0.5, 0.5],
1053+
opacity: styleParams.fillOpacity
1054+
})
1055+
});
1056+
});
1057+
return style;
1058+
}
1059+
1060+
/**
1061+
* @function ol.supermap.StyleUtils.setColorToCanvas 将颜色，透明度等样式设置到canvas上
1062+
* @param {object} canvas - 渲染的canvas对象
1063+
* @param {object} parameters - 样式参数
1064+
* @returns {Object} style对象
1065+
*/
1066+
static setColorToCanvas(canvas, parameters) {
1067+
let context = canvas.getContext('2d');
1068+
let fillColor = StyleUtils.hexToRgb(parameters.fillColor);
1069+
fillColor && fillColor.push(parameters.fillOpacity);
1070+
let strokeColor = StyleUtils.hexToRgb(parameters.strokeColor);
1071+
strokeColor && strokeColor.push(parameters.strokeOpacity);
1072+
context.fillStyle = StyleUtils.formatRGB(fillColor);
1073+
context.fill();
1074+
context.strokeStyle = StyleUtils.formatRGB(strokeColor);
1075+
context.lineWidth = parameters.strokeWidth;
1076+
context.stroke();
1077+
return canvas;
1078+
}
1079+
/**
1080+
* @function ol.supermap.StyleUtils.getImageStyle 获取图片样式
1081+
* @param {object} styleParams - 样式参数
1082+
* @returns {Object} style对象
1083+
*/
1084+
static getImageStyle(styleParams) {
1085+
let size = styleParams.imageInfo.size,
1086+
scale = 2 * styleParams.radius / size.w;
1087+
let imageInfo = styleParams.imageInfo;
1088+
let imgDom = imageInfo.img;
1089+
if (!imgDom || !imgDom.src) {
1090+
imgDom = new Image();
1091+
//要组装成完整的url
1092+
imgDom.src = imageInfo.url;
1093+
}
1094+
return new ol.style.Style({
1095+
image: new ol.style.Icon({
1096+
img: imgDom,
1097+
scale,
1098+
imgSize: [size.w, size.h],
1099+
anchor : [0.5, 0.5]
1100+
})
1101+
});
1102+
}
1103+
9351104
}
9361105

9371106
ol.supermap.StyleUtils = StyleUtils;

‎src/openlayers/mapping/TileSuperMapRest.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,8 @@ export class TileSuperMapRest extends ol.source.TileImage {
232232
if (unit === 'degrees') {
233233
unit = Unit.DEGREE;
234234
}
235-
if (unit === 'm') {
235+
//通过wkt方式自定义坐标系的时候，是meter
236+
if (unit === 'm' || unit === 'meter') {
236237
unit = Unit.METER;
237238
}
238239
var scale = Util.resolutionToScale(resolution, dpi, unit);

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