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)
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