Skip to content

Commit f06e90e

Browse files
Yuki-ZhaoYuki-Zhao
committed
【bug】1) webmap接口新增功能
（reviewed by songym）
1 parent ae77282 commit f06e90e

File tree

2 files changed

+245
-14
lines changed

2 files changed

+245
-14
lines changed

‎src/openlayers/core/StyleUtils.js

Lines changed: 196 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from '../core/Util';
1111

1212
ol.supermap = ol.supermap || {};
13+
var padding = 8, doublePadding = padding*2;
1314

1415
/**
1516
* @class ol.supermap.StyleUtils
@@ -647,22 +648,215 @@ export class StyleUtils {
647648
lineDash: this.dashStyle(style, 1)
648649
});
649650
olStyle.setStroke(newStroke);
650-
} else {
651+
} else if(type === 'POLYGON' ||
652+
type === 'MULTIPOLYGON'){
651653
newFill = new ol.style.Fill({
652654
color: fillColorArray
653655
});
654656
newStroke = new ol.style.Stroke({
655657
width: strokeWidth || ZERO,
656658
color: strokeColorArray,
657659
lineCap: lineCap || 'round',
658-
lineDash: this.dashStyle(style, 1)
660+
lineDash:this.dashStyle(style, 1)
659661
});
660662
olStyle.setFill(newFill);
661663
olStyle.setStroke(newStroke);
664+
} else {
665+
let result = this.getCanvas(style);
666+
newImage = new ol.style.Icon({
667+
img: result.canvas,
668+
imgSize:[result.width,result.height],
669+
scale: 1,
670+
anchor : [0.5, 0.5]
671+
});
672+
olStyle.setImage(newImage);
662673
}
663674
return olStyle;
664675
}
665676

677+
/**
678+
* 获取文字标注对应的canvas
679+
* @param style
680+
* @returns {{canvas: *, width: number, height: number}}
681+
*/
682+
static getCanvas(style) {
683+
let canvas;
684+
if(style.canvas) {
685+
if(document.querySelector("#"+style.canvas)) {
686+
canvas = document.getElemntById(style.canvas);
687+
} else {
688+
canvas = this.createCanvas(style);
689+
}
690+
} else {
691+
//不存在canvas，当前feature
692+
canvas = this.createCanvas(style);
693+
style.canvas = canvas.id;
694+
}
695+
canvas.style.display = "none";
696+
var ctx = canvas.getContext("2d");
697+
//行高
698+
let lineHeight = Number(style.font.replace(/[^0-9]/ig,""));
699+
let textArray = style.text.split('\r\n');
700+
let lenght = textArray.length;
701+
//在改变canvas大小后再绘制。否则会被清除
702+
ctx.font = style.font;
703+
let size = this.drawRect(ctx, style, textArray, lineHeight, canvas);
704+
this.positionY = padding;
705+
if(lenght > 1) {
706+
textArray.forEach(function (text, i) {
707+
if(i !== 0) {
708+
this.positionY = this.positionY + lineHeight;
709+
}
710+
this.canvasTextAutoLine(text,style,ctx,lineHeight, size.width);
711+
}, this);
712+
} else {
713+
this.canvasTextAutoLine(textArray[0],style,ctx,lineHeight, size.width);
714+
}
715+
return {
716+
canvas: canvas,
717+
width: size.width,
718+
height: size.height
719+
};
720+
}
721+
/**
722+
* 创建当前feature对应的canvas
723+
* @param style {object}
724+
* @returns {HTMLElement}
725+
*/
726+
static createCanvas(style) {
727+
let div = document.createElement('div');
728+
document.body.appendChild(div);
729+
let canvas = document.createElement('canvas');
730+
canvas.id = style.canvas ? style.canvas : 'textCanvas' + Util.newGuid(8);
731+
div.appendChild(canvas);
732+
return canvas;
733+
}
734+
/**
735+
* 绘制矩形边框背景
736+
* @param ctx
737+
* @param style
738+
* @param textArray
739+
* @param lineHeight
740+
* @param canvas
741+
* @returns {{width: number, height: number}}
742+
*/
743+
static drawRect(ctx, style, textArray, lineHeight, canvas) {
744+
let backgroundFill = style.backgroundFill, maxWidth = style.maxWidth - doublePadding;
745+
let width, height = 0, lineCount=0, lineWidths = [];
746+
//100的宽度，去掉左右两边3padding
747+
textArray.forEach(function (arrText) {
748+
let line='', isOverMax;
749+
lineCount++;
750+
for (var n = 0; n < arrText.length; n++) {
751+
let textLine = line + arrText[n];
752+
let metrics = ctx.measureText(textLine);
753+
let textWidth = metrics.width;
754+
if ((textWidth > maxWidth && n > 0) || arrText[n] === '\n') {
755+
line = arrText[n];
756+
lineCount++;
757+
//有换行，记录当前换行的width
758+
isOverMax = true;
759+
} else {
760+
line = textLine;
761+
width = textWidth;
762+
}
763+
}
764+
if(isOverMax) {
765+
lineWidths.push(maxWidth);
766+
} else {
767+
lineWidths.push(width);
768+
}
769+
}, this);
770+
width = this.getCanvasWidth(lineWidths, maxWidth);
771+
height = lineCount * lineHeight;
772+
height += doublePadding;
773+
canvas.width = width;
774+
canvas.height = height;
775+
ctx.fillStyle = backgroundFill;
776+
ctx.fillRect(0,0,width,height);
777+
return {
778+
width: width,
779+
height: height
780+
}
781+
}
782+
/**
783+
* 获取自适应的宽度（如果没有超过最大宽度，就用文字的宽度）
784+
* @param lineWidths
785+
* @param maxWidth
786+
* @returns {number}
787+
*/
788+
static getCanvasWidth(lineWidths, maxWidth) {
789+
let width = 0;
790+
for(let i=0; i< lineWidths.length; i++) {
791+
let lineW = lineWidths[i];
792+
if(lineW >= maxWidth) {
793+
//有任何一行超过最大高度，就用最大高度
794+
return maxWidth + doublePadding;
795+
} else if(lineW > width) {
796+
//自己换行，就要比较每行的最大宽度
797+
width = lineW;
798+
}
799+
}
800+
return width + doublePadding;
801+
}
802+
/**
803+
* 绘制文字，解决换行问题
804+
* @param text
805+
* @param style
806+
* @param ctx
807+
* @param lineHeight
808+
*/
809+
static canvasTextAutoLine(text,style,ctx,lineHeight, canvasWidth) {
810+
// 字符分隔为数组
811+
ctx.font = style.font;
812+
let textAlign = style.textAlign;
813+
let x = this.getPositionX(textAlign, canvasWidth);
814+
let arrText = text.split('');
815+
let line = '', fillColor = style.fillColor;
816+
//每一行限制的高度
817+
let maxWidth= style.maxWidth - doublePadding;
818+
for (var n = 0; n < arrText.length; n++) {
819+
let testLine = line + arrText[n];
820+
let metrics = ctx.measureText(testLine);
821+
let testWidth = metrics.width;
822+
if ((testWidth > maxWidth && n > 0) || arrText[n] === '\n') {
823+
ctx.fillStyle = fillColor;
824+
ctx.textAlign=textAlign;
825+
ctx.textBaseline="top";
826+
ctx.fillText(line, x, this.positionY);
827+
line = arrText[n];
828+
this.positionY += lineHeight;
829+
} else {
830+
line = testLine;
831+
}
832+
}
833+
ctx.fillStyle = fillColor;
834+
ctx.textAlign=textAlign;
835+
ctx.textBaseline="top";
836+
ctx.fillText(line, x, this.positionY);
837+
}
838+
/**
839+
* 得到绘制的起点位置，根据align不同，位置也不同
840+
* @param textAlign
841+
* @returns {number}
842+
*/
843+
static getPositionX(textAlign, canvasWidth) {
844+
let x;
845+
let width = canvasWidth - doublePadding; //减去padding
846+
switch (textAlign) {
847+
case 'center':
848+
x = width / 2;
849+
break;
850+
case 'right':
851+
x = width;
852+
break;
853+
default:
854+
x = 8;
855+
break;
856+
}
857+
return x;
858+
}
859+
666860
/**
667861
* @function ol.supermap.StyleUtils.hexToRgb
668862
* @description 将16进制的颜色，转换成rgb格式

‎src/openlayers/mapping/WebMap.js

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const transformTools = new ol.format.GeoJSON();
3434
* @param {function} [options.errorCallback] - 加载地图失败。
3535
* @param {string} [options.credentialKey] - 凭证密钥。
3636
* @param {string} [options.credentialValue] - 凭证值。
37+
* @param {boolean} [options.excludePortalProxyUrl] - server传递过来的url是否带有代理
3738
* @param {function} [options.mapSetting.mapClickCallback] - 地图被点击的回调函数
3839
* @extends {ol.Observable}
3940
*/
@@ -49,6 +50,7 @@ export class WebMap extends ol.Observable {
4950
this.credentialKey = options.credentialKey;
5051
this.credentialValue = options.credentialValue;
5152
this.target = options.target || "map";
53+
this.excludePortalProxyUrl = options.excludePortalProxyUrl || false;
5254
}
5355
this.createMap(options.mapSetting);
5456
this.createWebmap();
@@ -92,13 +94,23 @@ export class WebMap extends ol.Observable {
9294
* @description 创建webmap
9395
*/
9496
createWebmap() {
95-
// let appUrl = this.mapUrl;
9697
let mapUrl = Util.getRootUrl(this.mapUrl) + 'web/maps/' + this.mapId + '/map';
9798
if (this.credentialValue) {
9899
mapUrl += ('.json?' + this.credentialKey + '=' + this.credentialValue);
99-
// appUrl += ('.json?' + this.credentialKey + '=' + this.credentialValue);
100+
101+
}
102+
let filter = 'getUrlResource.json?url=';
103+
if(this.excludePortalProxyUrl && this.mapUrl.indexOf(filter) > -1) {
104+
//大屏需求,或者有加上代理的
105+
let urlArray = this.mapUrl.split(filter);
106+
if(urlArray.length > 1) {
107+
let url = urlArray[1];
108+
mapUrl = urlArray[0] + filter + Util.getRootUrl(url) + 'web/maps/' + this.mapId + '/map.json';
109+
}
100110
}
101111
//todo 请求用户以及更新时间和地图标签等参数，暂时不需要
112+
// let appUrl = this.mapUrl;
113+
// appUrl += ('.json?' + this.credentialKey + '=' + this.credentialValue);
102114
// this.getAppInfo(appUrl);
103115
this.getMapInfo(mapUrl);
104116
}
@@ -133,7 +145,7 @@ export class WebMap extends ol.Observable {
133145
that.addLayers(mapInfo);
134146
}
135147
}).catch(function (error) {
136-
that.errorCallback && that.errorCallback(error, 'getMapFaild');
148+
that.errorCallback && that.errorCallback(error, 'getMapFaild', that.map);
137149
});
138150
}
139151
/**
@@ -146,7 +158,7 @@ export class WebMap extends ol.Observable {
146158
this.createView(mapInfo);
147159
let layer = this.createBaseLayer(mapInfo);
148160
this.map.addLayer(layer);
149-
if (mapInfo.baseLayer && mapInfo.baseLayer.lableLayerVisible) {
161+
if (mapInfo.baseLayer && mapInfo.baseLayer.labelLayerVisible) {
150162
let layerInfo = mapInfo.baseLayer;
151163
//存在天地图路网
152164
let labelLayer = new ol.layer.Tile({
@@ -246,16 +258,26 @@ export class WebMap extends ol.Observable {
246258
default:
247259
break;
248260
}
249-
let layer = new ol.layer.Tile({
261+
var layer = new ol.layer.Tile({
250262
source: source,
251263
zIndex: layerInfo.zIndex || 0,
252264
visible: layerInfo.visible
253265
});
266+
var layerId = Util.newGuid(8);
254267
if (layerInfo.name) {
255268
layer.setProperties({
256-
name: layerInfo.name
269+
name: layerInfo.name,
270+
layerId: layerId
257271
});
258272
}
273+
if(!mapInfo.baseLayer) {
274+
//不是底图
275+
layer.setVisible(layerInfo.visible);
276+
layerInfo.opacity && layer.setOpacity(layerInfo.opacity);
277+
}
278+
//否则没有ID，对不上号
279+
layerInfo.layer = layer;
280+
layerInfo.layerId = layerId;
259281
return layer;
260282
}
261283
/**
@@ -453,7 +475,7 @@ export class WebMap extends ol.Observable {
453475
callback(layerInfo);
454476
}
455477
}).catch(function (error) {
456-
that.errorCallback && that.errorCallback(error, 'getWmtsFaild')
478+
that.errorCallback && that.errorCallback(error, 'getWmtsFaild', that.map)
457479
});
458480
}
459481

@@ -604,6 +626,13 @@ export class WebMap extends ol.Observable {
604626
}).then(function (response) {
605627
return response.json()
606628
}).then(function (data) {
629+
if(!data.succeed === false) {
630+
//请求失败
631+
layerAdded++;
632+
that.sendMapToUser(layerAdded, len);
633+
that.errorCallback && that.errorCallback(data.error, 'getLayerFaild', that.map);
634+
return;
635+
}
607636
if (data && data.type) {
608637
if (data.type === "JSON" || data.type === "GEOJSON") {
609638
data.content = JSON.parse(data.content);
@@ -618,7 +647,7 @@ export class WebMap extends ol.Observable {
618647
}).catch(function (error) {
619648
layerAdded++;
620649
that.sendMapToUser(layerAdded, len);
621-
that.errorCallback && that.errorCallback(error, 'getLayerFaild');
650+
that.errorCallback && that.errorCallback(error, 'getLayerFaild', that.map);
622651
})
623652
} else if (layer.layerType === 'SUPERMAP_REST' || layer.layerType === "TILE" ||
624653
layer.layerType === "WMS" || layer.layerType === "WMTS") {
@@ -653,7 +682,7 @@ export class WebMap extends ol.Observable {
653682
}, function (err) {
654683
layerAdded++;
655684
that.sendMapToUser(layerAdded, len);
656-
that.errorCallback && that.errorCallback(err, 'getFeatureFaild')
685+
that.errorCallback && that.errorCallback(err, 'getFeatureFaild', that.map)
657686
});
658687
} else if (layer.dataSource.type === "REST_MAP" && layer.dataSource.url) {
659688
Util.queryFeatureBySQL(layer.dataSource.url, layer.dataSource.layerName, 'smid=1', null, null, function (result) {
@@ -672,10 +701,13 @@ export class WebMap extends ol.Observable {
672701
that.addLayer(layer, features);
673702
layerAdded++;
674703
that.sendMapToUser(layerAdded, len);
704+
},function (e) {
705+
layerAdded++;
706+
that.errorCallback && that.errorCallback(e, 'getFeatureFaild', that.map);
675707
});
676708
}
677709
}, function (e) {
678-
that.errorCallback && that.errorCallback(e, 'getFeatureFaild');
710+
that.errorCallback && that.errorCallback(e, 'getFeatureFaild', that.map);
679711
})
680712
}
681713
}, this);
@@ -923,12 +955,18 @@ export class WebMap extends ol.Observable {
923955
} else if (layerInfo.layerType === "MARKER") {
924956
layer = this.createMarkerLayer(layerInfo, features)
925957
}
958+
let layerId = Util.newGuid(8);
926959
if (layer && layerInfo.name) {
927960
layer.setProperties({
928-
name: layerInfo.name
961+
name: layerInfo.name,
962+
layerId: layerId
929963
});
930964
}
931965
layer && this.map.addLayer(layer);
966+
layerInfo.layer = layer;
967+
layerInfo.opacity && layer.setOpacity(layerInfo.opacity);
968+
layer.setVisible(layerInfo.visible);
969+
layerInfo.layerId = layerId;
932970
if (layerInfo.labelStyle && layerInfo.labelStyle.labelField) {
933971
//存在标签专题图
934972
this.addLabelLayer(layerInfo, features);
@@ -995,7 +1033,6 @@ export class WebMap extends ol.Observable {
9951033
isHighLight: false,
9961034
onClick: function () {}
9971035
});
998-
source.refresh();
9991036
return new ol.layer.Image({
10001037
source: source
10011038
});

0 commit comments

Comments
 (0)