Skip to content

Commit d6a64a0

Browse files
qiulinFVqiulinFV
committed
[bug] 修复缺陷ISVJ-2636
review by chengl
1 parent 8de8913 commit d6a64a0

File tree

1 file changed

+193
-66
lines changed

1 file changed

+193
-66
lines changed

‎src/openlayers/mapping/WebMap.js‎

Lines changed: 193 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -590,9 +590,9 @@ export class WebMap extends Observable {
590590
addMVTMapLayer(mapInfo, layerInfo, zIndex) {
591591
layerInfo.zIndex = zIndex;
592592
// 获取地图详细信息
593-
return this.getMBStyle(mapInfo, layerInfo).then(() => {
593+
return this.getMapboxStyleLayerInfo(mapInfo, layerInfo).then((msLayerInfo) => {
594594
// 创建图层
595-
return this.createMVTLayer(layerInfo).then(layer => {
595+
return this.createMVTLayer(msLayerInfo).then(layer => {
596596
let layerID = Util.newGuid(8);
597597
if (layerInfo.name) {
598598
layer.setProperties({
@@ -1523,8 +1523,8 @@ export class WebMap extends Observable {
15231523
features = await that.excelData2Feature(data.content, layer);
15241524
}
15251525
} else if(data.type === 'SHP') {
1526-
let content = JSON.parse(data.content);
1527-
data.content = content.layers[0];
1526+
let content = JSON.parse(data.content);
1527+
data.content = content.layers[0];
15281528
features = that.geojsonToFeature(data.content, layer);
15291529
}
15301530
that.addLayer(layer, features, layerIndex);
@@ -1928,7 +1928,7 @@ export class WebMap extends Observable {
19281928
} else {
19291929
xIdx = dataMetaInfo.xIndex;
19301930
yIdx = dataMetaInfo.yIndex;
1931-
}
1931+
}
19321932
} else if (dataSource.type === 'SAMPLE_DATA') {
19331933
// 示例数据从本地拿xyField
19341934
const sampleData = SampleDataInfo.find(item => item.id === dataSource.name) || {};
@@ -1968,7 +1968,7 @@ export class WebMap extends Observable {
19681968
} else {
19691969
attributes[field] = rowDatas[j];
19701970
}
1971-
1971+
19721972
}
19731973
let feature = new Feature({
19741974
geometry: olGeom,
@@ -2650,7 +2650,7 @@ export class WebMap extends Observable {
26502650
let newStyle;
26512651
if(featureType === 'LINE' && Util.isArray(style)) {
26522652
const [outlineStyle, strokeStyle] = style;
2653-
newStyle = strokeStyle.lineDash === 'solid' ? StyleUtils.getRoadPath(strokeStyle, outlineStyle)
2653+
newStyle = strokeStyle.lineDash === 'solid' ? StyleUtils.getRoadPath(strokeStyle, outlineStyle)
26542654
: StyleUtils.getPathway(strokeStyle, outlineStyle);
26552655
} else {
26562656
newStyle = StyleUtils.toOpenLayersStyle(layerInfo.style, layerInfo.featureType);
@@ -3597,7 +3597,7 @@ export class WebMap extends Observable {
35973597
//有token之类的配置项
35983598
url = url.indexOf("?") === -1 ? `${url}?${this.credentialKey}=${this.credentialValue}` :
35993599
`${url}&${this.credentialKey}=${this.credentialValue}`;
3600-
}
3600+
}
36013601
return url;
36023602
}
36033603

@@ -4052,56 +4052,129 @@ export class WebMap extends Observable {
40524052
})
40534053
}
40544054

4055+
/**
4056+
* @private
4057+
* @function ol.supermap.WebMap.prototype.isRestMapMapboxStyle
4058+
* @description 仅判断是否为restmap mvt地图服务 rest-map服务的Mapbox Style资源地址是这样的： .../iserver/services/map-Population/rest/maps/PopulationDistribution/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true
4059+
* @param {Object} layerInfo webmap中的MapStylerLayer
4060+
* @returns {Boolean} 是否为restmap mvt地图服务
4061+
*/
4062+
isRestMapMapboxStyle(layerInfo) {
4063+
const restMapMVTStr = '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
4064+
let dataSource = layerInfo.dataSource;
4065+
let layerType = layerInfo.layerType;
4066+
if (dataSource && dataSource.type === "EXTERNAL"
4067+
&& dataSource.url.indexOf(restMapMVTStr) > -1
4068+
&& (layerType === "MAPBOXSTYLE" || layerType === "VECTOR_TILE")) {
4069+
return true
4070+
}
4071+
return false
4072+
}
40554073
/**
40564074
* @private
4057-
* @function ol.supermap.WebMap.prototype.getMBStyle
4058-
* @description 生成图层信息
4059-
* @param {object} mapInfo - 地图信息
4060-
* @param {object} layerInfo - 图层信息
4075+
* @function ol.supermap.WebMap.prototype.getMapboxStyleLayerInfo
4076+
* @description 获取mapboxstyle图层信息
4077+
* @param {layerInfo} layerInfo 图层信息
4078+
* @returns {Object} 图层信息
4079+
*/
4080+
getMapboxStyleLayerInfo(mapInfo, layerInfo) {
4081+
let _this = this;
4082+
return new Promise((resolve, reject) => {
4083+
return _this.getMapLayerExtent(layerInfo).then(layer => {
4084+
return _this.getMapboxStyle(mapInfo, layer).then(styleLayer => {
4085+
Object.assign(layer, styleLayer);
4086+
resolve(layer)
4087+
}).catch(error => {
4088+
reject(error);
4089+
})
4090+
}).catch(error => {
4091+
reject(error);
4092+
})
4093+
})
4094+
}
4095+
/**
4096+
* @private
4097+
* @function ol.supermap.WebMap.prototype.getMapLayerExtent
4098+
* @description 获取mapboxstyle图层信息
4099+
* @param {Object} layerInfo 图层信息
4100+
* @returns {Object} 图层信息
4101+
*/
4102+
getMapLayerExtent(layerInfo) {
4103+
const restMapMVTStr = '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY'
4104+
let dataSource = layerInfo.dataSource;
4105+
let url = dataSource.url;
4106+
if (this.isRestMapMapboxStyle(layerInfo)) {
4107+
url = url.replace(restMapMVTStr, '')
4108+
}
4109+
return FetchRequest.get(this.getRequestUrl(url+'.json'), null, {
4110+
withCredentials: this.withCredentials,
4111+
withoutFormatSuffix: true,
4112+
headers: {
4113+
'Content-Type': 'application/json;chartset=uft-8'
4114+
}
4115+
}).then(function (response) {
4116+
return response.json();
4117+
}).then((result) => {
4118+
layerInfo.visibleScales = result.visibleScales;
4119+
layerInfo.coordUnit = result.coordUnit;
4120+
layerInfo.scale = result.scale;
4121+
layerInfo.epsgCode = result.prjCoordSys.epsgCode;
4122+
layerInfo.bounds = result.bounds;
4123+
return layerInfo;
4124+
}).catch(error => {
4125+
return error;
4126+
})
4127+
}
4128+
4129+
/**
4130+
* @private
4131+
* @function ol.supermap.WebMap.prototype.getMapboxStyle
4132+
* @description 获取mapboxstyle --- ipt中自定义底图请求mapboxstyle目前有两种url格式
4133+
* rest-map服务的Mapbox Style资源地址是这样的： .../iserver/services/map-Population/rest/maps/PopulationDistribution/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true
4134+
* restjsr片服务的Mapbox Style资源地址是这样的：.../iserver/services/map-china400/restjsr/v1/vectortile/maps/China/style.json
4135+
* @param {Object} mapboxstyle图层信息
4136+
* @returns {Object} 图层信息
40614137
*/
4062-
getMBStyle(mapInfo, layerInfo) {
4063-
let _this = this,
4064-
dataSource = layerInfo.dataSource || {},
4065-
{ url, serverId } = dataSource,
4066-
styleUrl;
4067-
styleUrl = serverId !== undefined ? `${this.server}web/datas/${serverId}/download` : url;
4068-
if (layerInfo.layerType === "MAPBOXSTYLE" && url && url.indexOf('/restjsr/') > -1) {
4069-
styleUrl = styleUrl + '/style.json'
4138+
getMapboxStyle(mapInfo, layerInfo) {
4139+
let _this = this;
4140+
let url = layerInfo.url || layerInfo.dataSource.url;
4141+
let styleUrl = url;
4142+
if (styleUrl.indexOf('/restjsr/') > -1) {
4143+
styleUrl = `${styleUrl}/style.json`;
40704144
}
40714145
return FetchRequest.get(this.getRequestUrl(styleUrl), null, {
40724146
withCredentials: this.withCredentials,
40734147
withoutFormatSuffix: true,
40744148
headers: {
40754149
'Content-Type': 'application/json;chartset=uft-8'
40764150
}
4077-
}).then(result => {
4078-
return result.json();
4151+
}).then(function (response) {
4152+
return response.json();
40794153
}).then(styles => {
40804154
_this._matchStyleObject(styles);
4081-
let extent = styles.metadata.mapbounds;
4082-
layerInfo.extent = extent; // 这里把extent保存一下
4083-
4084-
layerInfo.projection = mapInfo.projection;
4085-
layerInfo.epsgCode = mapInfo.projection;
4086-
layerInfo.url = url;
4087-
layerInfo.sourceType = 'VECTOR_TILE';
4088-
layerInfo.layerType = 'VECTOR_TILE';
4089-
layerInfo.styles = styles;
4090-
layerInfo.extent = extent;
4091-
layerInfo.bounds = {
4092-
bottom: extent[1],
4093-
left: extent[0],
4094-
leftBottom: { x: extent[0], y: extent[1] },
4095-
right: extent[2],
4096-
rightTop: { x: extent[2], y: extent[3] },
4097-
top: extent[3]
4155+
let bounds = layerInfo.bounds;
4156+
let newLayerInfo = {
4157+
url: url,
4158+
sourceType: 'VECTOR_TILE',
4159+
layerType: 'VECTOR_TILE',
4160+
styles: styles,
4161+
extent: bounds && [bounds.left, bounds.bottom, bounds.right, bounds.top],
4162+
bounds: layerInfo.bounds,
4163+
projection: "EPSG:" + layerInfo.epsgCode,
4164+
epsgCode: layerInfo.epsgCode,
4165+
name: layerInfo.name
40984166
}
4167+
Object.assign(layerInfo, newLayerInfo)
40994168
if (layerInfo.zIndex > 0) {
41004169
// 过滤styles 非底图mapboxstyle图层才需此处理
41014170
_this.modifyMapboxstyleLayer(mapInfo, layerInfo);
41024171
}
4172+
return layerInfo;
4173+
}).catch(error => {
4174+
return error;
41034175
})
41044176
}
4177+
41054178
/**
41064179
* @private
41074180
* @function ol.supermap.WebMap.prototype.modifyMapboxstyleLayer
@@ -4190,31 +4263,103 @@ export class WebMap extends Observable {
41904263
return false
41914264
}
41924265
}
4266+
/**
4267+
* @private
4268+
* @function ol.supermap.WebMap.prototype.getStyleResolutions
4269+
* @description 创建图层分辨率
4270+
* @param {Object} bounds 图层上下左右范围
4271+
* @returns {Array} styleResolutions 样式分辨率
4272+
*/
4273+
getStyleResolutions(bounds, minZoom = 0, maxZoom = 22) {
4274+
let styleResolutions = [];
4275+
const TILE_SIZE = 512
4276+
let temp = Math.abs(bounds.left - bounds.right) / TILE_SIZE;
4277+
for (let i = minZoom; i <= maxZoom; i++) {
4278+
if (i === 0) {
4279+
styleResolutions[i] = temp;
4280+
continue;
4281+
}
4282+
temp = temp / 2;
4283+
styleResolutions[i] = temp;
4284+
}
4285+
return styleResolutions;
4286+
}
4287+
4288+
4289+
/**
4290+
* @private
4291+
* @function ol.supermap.WebMap.prototype.createVisibleResolution
4292+
* @description 创建图层可视分辨率
4293+
* @param {Array} visibleScales 可视比例尺范围
4294+
* @param {Array} indexbounds
4295+
* @param {Object} bounds 图层上下左右范围
4296+
* @param {String} coordUnit
4297+
* @returns {Array} visibleResolution
4298+
*/
4299+
createVisibleResolution(visibleScales, indexbounds, bounds, coordUnit) {
4300+
let visibleResolution = [];
4301+
// 1 设置了地图visibleScales的情况
4302+
if (visibleScales && visibleScales.length > 0) {
4303+
visibleResolution = visibleScales.map(scale => {
4304+
let value = 1 / scale;
4305+
let res = this.getResFromScale(value, coordUnit);
4306+
return res;
4307+
})
4308+
} else {
4309+
// 2 地图的bounds
4310+
let envelope = this.getEnvelope(indexbounds, bounds);
4311+
visibleResolution = this.getStyleResolutions(envelope);
4312+
}
4313+
return visibleResolution
4314+
}
41934315

4316+
/**
4317+
* @private
4318+
* @function ol.supermap.WebMap.prototype.createVisibleResolution
4319+
* @description 图层边界范围
4320+
* @param {Array} indexbounds
4321+
* @param {Object} bounds 图层上下左右范围
4322+
* @returns {Object} envelope
4323+
*/
4324+
getEnvelope(indexbounds, bounds) {
4325+
let envelope = {};
4326+
if (indexbounds && indexbounds.length === 4) {
4327+
envelope.left = indexbounds[0];
4328+
envelope.bottom = indexbounds[1];
4329+
envelope.right = indexbounds[2];
4330+
envelope.top = indexbounds[3];
4331+
} else {
4332+
envelope = bounds;
4333+
}
4334+
return envelope
4335+
}
41944336
/**
41954337
* @private
41964338
* @function ol.supermap.WebMap.prototype.createMVTLayer
41974339
* @description 创建矢量瓦片图层
41984340
* @param {object} layerInfo - 图层信息
41994341
*/
42004342
createMVTLayer(layerInfo) {
4201-
let that = this;
4343+
// let that = this;
42024344
let styles = layerInfo.styles;
4203-
let resolutions = this.getMVTResolutions(layerInfo.bounds);
4345+
const indexbounds = styles && styles.metadata && styles.metadata.indexbounds;
4346+
const visibleResolution = this.createVisibleResolution(layerInfo.visibleScales, indexbounds, layerInfo.bounds, layerInfo.coordUnit);
4347+
const envelope = this.getEnvelope(indexbounds, layerInfo.bounds);
4348+
const styleResolutions = this.getStyleResolutions(envelope);
4349+
// const origin = [envelope.left, envelope.top];
42044350
let withCredentials = this.isIportalProxyServiceUrl(styles.sprite);
42054351
// 创建MapBoxStyle样式
42064352
let mapboxStyles = new MapboxStyles({
42074353
style: styles,
42084354
source: styles.name,
4209-
resolutions,
4355+
resolutions:styleResolutions,
42104356
map: this.map,
42114357
withCredentials
42124358
});
42134359
return new Promise((resolve) => {
42144360
mapboxStyles.on('styleloaded', function () {
4215-
let visibleScale = layerInfo.visibleScale;
4216-
let minResolution = visibleScale && that.resolutions[visibleScale.maxScale];
4217-
let maxResolution = visibleScale && that.resolutions[visibleScale.minScale];
4361+
let minResolution = visibleResolution[visibleResolution.length - 1];
4362+
let maxResolution = visibleResolution[0];
42184363
let layer = new olLayer.VectorTile({
42194364
//设置避让参数
42204365
declutter: true,
@@ -4240,24 +4385,6 @@ export class WebMap extends Observable {
42404385
})
42414386
}
42424387

4243-
/**
4244-
* @private
4245-
* @function ol.supermap.WebMap.prototype.getMVTResolutions
4246-
* @description 创建矢量瓦片图层
4247-
* @param {array} extent - 瓦片范围
4248-
* @param {number} numbers - 缩放层级数
4249-
*/
4250-
getMVTResolutions(extent, numbers = 22) {
4251-
let { left, right, top, bottom } = extent;
4252-
let dx = right - left;
4253-
let dy = top - bottom;
4254-
let calcArgs = dx - dy > 0 ? dx : dy;
4255-
let resolutions = [calcArgs / 512];
4256-
for (let i = 1; i < numbers; i++) {
4257-
resolutions.push(resolutions[i - 1] / 2)
4258-
}
4259-
return resolutions;
4260-
}
42614388
/**
42624389
* @private
42634390
* @function ol.supermap.WebMap.prototype.isSameDomain
@@ -4291,17 +4418,17 @@ export class WebMap extends Observable {
42914418
isSupportWebp(url, token) {
42924419
// 还需要判断浏览器
42934420
let isIE = this.isIE();
4294-
if(isIE || (this.isFirefox() && this.getFirefoxVersion() < 65) ||
4421+
if(isIE || (this.isFirefox() && this.getFirefoxVersion() < 65) ||
42954422
(this.isChrome() && this.getChromeVersion() < 32)) {
42964423
return false;
4297-
}
4424+
}
42984425
url = token ? `${url}/tileImage.webp?token=${token}` : `${url}/tileImage.webp`;
42994426
url = this.getRequestUrl(url);
43004427
return FetchRequest.get(url, null, {
43014428
withCredentials: this.withCredentials
43024429
}).then(function (response) {
43034430
if(response.status !== 200) {
4304-
throw response.status;
4431+
throw response.status;
43054432
}
43064433
return response;
43074434
}).then(() => {

0 commit comments

Comments
 (0)