Skip to content

Commit 2c81fe8

Browse files
songyumengsongyumeng
committed
【fix】修复deckgllayer setStyle方法不起作用的bug（ICL-1168） review by luoxiao
1 parent d87b7bb commit 2c81fe8

File tree

9 files changed

+1329
-890
lines changed

9 files changed

+1329
-890
lines changed

‎dist/mapboxgl/iclient-mapboxgl-es6.js‎

Lines changed: 125 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -73958,7 +73958,6 @@ external_mapboxgl_default.a.supermap.HeatMapLayer = HeatMapLayer_HeatMapLayer;
7395873958
* @param {boolean} [options.props.colorRange=[[255,255,178,255],[254,217,118,255],[254,178,76,255],[253,141,60,255],[240,59,32,255],[189,0,38,255]]] - "hexagon-layer" 配置项：色带。
7395973959
*/
7396073960
class DeckglLayer_DeckglLayer {
73961-
7396273961
constructor(layerTypeID, options) {
7396373962
// Util.extend(defaultProps, options);
7396473963
/**
@@ -73967,22 +73966,23 @@ class DeckglLayer_DeckglLayer {
7396773966
*/
7396873967
this.layerTypeID = layerTypeID;
7396973968
/**
73970-
* @member {Array.<mapboxgl.supermap.Graphic>} mapboxgl.supermap.DeckglLayer.prototype.graphics
73969+
* @member {Array.<mapboxgl.supermap.Graphic>} mapboxgl.supermap.DeckglLayer.prototype.graphics
7397173970
* @description 点要素对象数组。
7397273971
*/
7397373972
this.data = [].concat(options.data);
7397473973

7397573974
this.props = options.props ? options.props : {};
7397673975
this.callback = options.callback ? options.callback : {};
7397773976

73978-
this.id = options.layerId ? options.layerId : Util_Util.createUniqueID("graphicLayer_" + this.layerTypeID + "_");
73977+
this.id = options.layerId
73978+
? options.layerId
73979+
: Util_Util.createUniqueID('graphicLayer_' + this.layerTypeID + '_');
7397973980

7398073981
/**
7398173982
* @member {boolean} [mapboxgl.supermap.DeckglLayer.prototype.visibility=true]
7398273983
* @description 图层显示状态属性。
7398373984
*/
7398473985
this.visibility = true;
73985-
7398673986
}
7398773987

7398873988
/**
@@ -74077,10 +74077,8 @@ class DeckglLayer_DeckglLayer {
7407774077
setVisibility(visibility) {
7407874078
if (this.canvas && visibility !== this.visibility) {
7407974079
this.visibility = visibility;
74080-
this.canvas.style.display = visibility ? "block" : "none";
74080+
this.canvas.style.display = visibility ? 'block' : 'none';
7408174081
}
74082-
74083-
7408474082
}
7408574083

7408674084
/**
@@ -74099,6 +74097,7 @@ class DeckglLayer_DeckglLayer {
7409974097
*/
7410074098
setStyle(styleOptions) {
7410174099
core_Util_Util.extend(this.props, styleOptions);
74100+
this._createLayerByLayerTypeID();
7410274101
this.update();
7410374102
}
7410474103

@@ -74123,7 +74122,6 @@ class DeckglLayer_DeckglLayer {
7412374122
this.update();
7412474123
}
7412574124

74126-
7412774125
/**
7412874126
* @function mapboxgl.supermap.DeckglLayer.prototype.addData
7412974127
* @description 添加点要素，不会覆盖之前的要素。
@@ -74147,25 +74145,16 @@ class DeckglLayer_DeckglLayer {
7414774145
* @description 更新图层。
7414874146
*/
7414974147
update() {
74150-
let changeFlags = {
74148+
if (this.layer.lifecycle !== 'Awaiting state') {
74149+
let changeFlags = {
7415174150
dataChanged: true,
7415274151
propsChanged: true,
7415374152
viewportChanged: true,
7415474153
updateTriggersChanged: true
74155-
},
74156-
state = this._getState();
74157-
if (this.layerTypeID === "polygon-layer") {
74158-
const subLayers = this.layer.getSubLayers();
74159-
for (let i = 0; i < subLayers.length; i++) {
74160-
subLayers[i].setChangeFlags(changeFlags);
74161-
subLayers[i].setState(state);
74162-
}
74163-
//todo 无法解释为什么 this.layer.setState(state);这样不行
74164-
this._draw();
74165-
return;
74154+
};
74155+
this.layer.setChangeFlags(changeFlags);
7416674156
}
74167-
this.layer.setChangeFlags(changeFlags);
74168-
this.layer.setState(state);
74157+
this._draw();
7416974158
}
7417074159

7417174160
/**
@@ -74195,6 +74184,7 @@ class DeckglLayer_DeckglLayer {
7419574184
let deckOptions = this._getState();
7419674185
deckOptions.layers = [this.layer];
7419774186
deckOptions.canvas = this.canvas;
74187+
// this.deckGL.updateLayers();
7419874188
this.deckGL.setProps(deckOptions);
7419974189
}
7420074190

@@ -74258,25 +74248,24 @@ class DeckglLayer_DeckglLayer {
7425874248
this.props.pickable = Boolean(this.props.onClick) || Boolean(this.props.onHover);
7425974249

7426074250
//各类型各自从 defaultProps 取出相形的参数：
74261-
if (this.layerTypeID === "scatter-plot") {
74251+
if (this.layerTypeID === 'scatter-plot') {
7426274252
this.props.id = 'scatter-plot';
7426374253
this._createScatterPlotLayer();
74264-
} else if (this.layerTypeID === "path-layer") {
74254+
} else if (this.layerTypeID === 'path-layer') {
7426574255
this.props.id = 'path-layer';
7426674256
this._createPathLayer();
74267-
} else if (this.layerTypeID === "polygon-layer") {
74257+
} else if (this.layerTypeID === 'polygon-layer') {
7426874258
this.props.id = 'polygon-layer';
7426974259
this._createPolygonLayer();
74270-
} else if (this.layerTypeID === "arc-layer") {
74260+
} else if (this.layerTypeID === 'arc-layer') {
7427174261
this.props.id = 'arc-layer';
7427274262
this._createArcLineLayer();
74273-
} else if (this.layerTypeID === "hexagon-layer") {
74263+
} else if (this.layerTypeID === 'hexagon-layer') {
7427474264
this.props.id = 'hexagon-layer';
7427574265
this._createHexagonLayer();
7427674266
} else {
74277-
throw new Error(this.layerTypeID + " does not support");
74267+
throw new Error(this.layerTypeID + ' does not support');
7427874268
}
74279-
7428074269
}
7428174270

7428274271
/**
@@ -74292,25 +74281,31 @@ class DeckglLayer_DeckglLayer {
7429274281
return point.geometry.coordinates;
7429374282
};*/
7429474283
var me = this;
74295-
this.props.getPosition = this.callback.getPosition ? this.callback.getPosition : function (point) {
74296-
if (!point) {
74297-
return [0, 0, 0];
74298-
}
74299-
let lngLat = point.getLngLat();
74300-
return lngLat && [lngLat.lng, lngLat.lat, 0];
74301-
};
74284+
this.props.getPosition = this.callback.getPosition
74285+
? this.callback.getPosition
74286+
: function(point) {
74287+
if (!point) {
74288+
return [0, 0, 0];
74289+
}
74290+
let lngLat = point.getLngLat();
74291+
return lngLat && [lngLat.lng, lngLat.lat, 0];
74292+
};
7430274293
if (this.callback.getColor) {
74303-
this.props.getColor = this.callback.getColor ? this.callback.getColor : function (point) {
74304-
let style = point && point.getStyle();
74305-
return style && style.color || me.props.color
74306-
};
74294+
this.props.getColor = this.callback.getColor
74295+
? this.callback.getColor
74296+
: function(point) {
74297+
let style = point && point.getStyle();
74298+
return (style && style.color) || me.props.color;
74299+
};
7430774300
}
7430874301

7430974302
if (this.callback.getRadius) {
74310-
this.props.getRadius = this.callback.getRadius ? this.callback.getRadius : function (point) {
74311-
let style = point && point.getStyle();
74312-
return style && style.radius || me.props.radius
74313-
};
74303+
this.props.getRadius = this.callback.getRadius
74304+
? this.callback.getRadius
74305+
: function(point) {
74306+
let style = point && point.getStyle();
74307+
return (style && style.radius) || me.props.radius;
74308+
};
7431474309
}
7431574310

7431674311
if (this.props.color || this.props.radius) {
@@ -74319,7 +74314,7 @@ class DeckglLayer_DeckglLayer {
7431974314
this.props.updateTriggers.getRadius = [this.props.radius];
7432074315
}
7432174316
if (this.props.color) {
74322-
this.props.updateTriggers.getColor = [this.props.color]
74317+
this.props.updateTriggers.getColor = [this.props.color];
7432374318
}
7432474319
}
7432574320
this.layer = new window.DeckGL.ScatterplotLayer(this.props);
@@ -74330,9 +74325,11 @@ class DeckglLayer_DeckglLayer {
7433074325
* @private
7433174326
*/
7433274327
_createPathLayer() {
74333-
this.props.getPath = this.callback.getPath ? this.callback.getPath : function (feature) {
74334-
return feature.geometry.coordinates;
74335-
};
74328+
this.props.getPath = this.callback.getPath
74329+
? this.callback.getPath
74330+
: function(feature) {
74331+
return feature.geometry.coordinates;
74332+
};
7433674333
//以下几个函数也可走默认值
7433774334
if (this.callback.getColor) {
7433874335
this.props.getColor = this.callback.getColor;
@@ -74352,9 +74349,11 @@ class DeckglLayer_DeckglLayer {
7435274349
* @private
7435374350
*/
7435474351
_createPolygonLayer() {
74355-
this.props.getPolygon = this.callback.getPolygon ? this.callback.getPolygon : function (feature) {
74356-
return feature.geometry.coordinates;
74357-
};
74352+
this.props.getPolygon = this.callback.getPolygon
74353+
? this.callback.getPolygon
74354+
: function(feature) {
74355+
return feature.geometry.coordinates;
74356+
};
7435874357

7435974358
//todo 思考下真的让用户配这么多回调么，或者先判断下数据属性里面有没有配置的属性值？
7436074359

@@ -74381,20 +74380,24 @@ class DeckglLayer_DeckglLayer {
7438174380
*/
7438274381
_createArcLineLayer() {
7438374382
//todo ArcLineLayer geojson coordinates数组中只能有一个线段
74384-
this.props.getSourcePosition = this.callback.getSourcePosition ? this.callback.getSourcePosition : function (feature) {
74385-
if (!feature) {
74386-
return [0, 0, 0];
74387-
}
74388-
74389-
return feature.geometry.coordinates[0];
74390-
};
74391-
this.props.getTargetPosition = this.callback.getTargetPosition ? this.callback.getTargetPosition : function (feature) {
74392-
if (!feature) {
74393-
return [0, 0, 0];
74394-
}
74395-
74396-
return feature.geometry.coordinates[1];
74397-
};
74383+
this.props.getSourcePosition = this.callback.getSourcePosition
74384+
? this.callback.getSourcePosition
74385+
: function(feature) {
74386+
if (!feature) {
74387+
return [0, 0, 0];
74388+
}
74389+
74390+
return feature.geometry.coordinates[0];
74391+
};
74392+
this.props.getTargetPosition = this.callback.getTargetPosition
74393+
? this.callback.getTargetPosition
74394+
: function(feature) {
74395+
if (!feature) {
74396+
return [0, 0, 0];
74397+
}
74398+
74399+
return feature.geometry.coordinates[1];
74400+
};
7439874401

7439974402
if (this.callback.getStrokeWidth) {
7440074403
this.props.getStrokeWidth = this.callback.getStrokeWidth;
@@ -74414,23 +74417,23 @@ class DeckglLayer_DeckglLayer {
7441474417
* @private
7441574418
*/
7441674419
_createHexagonLayer() {
74417-
this.props.getPosition = this.callback.getPosition ? this.callback.getPosition : function (feature) {
74418-
if (!feature) {
74419-
return [0, 0, 0];
74420-
}
74420+
this.props.getPosition = this.callback.getPosition
74421+
? this.callback.getPosition
74422+
: function(feature) {
74423+
if (!feature) {
74424+
return [0, 0, 0];
74425+
}
7442174426

74422-
return feature.geometry.coordinates;
74423-
};
74427+
return feature.geometry.coordinates;
74428+
};
7442474429

7442574430
if (this.callback.getColorValue) {
7442674431
this.props.getColorValue = this.callback.getColorValue;
7442774432
}
7442874433
if (this.callback.getElevationValue) {
7442974434
this.props.getElevationValue = this.callback.getElevationValue;
7443074435
}
74431-
7443274436
this.layer = new window.DeckGL.HexagonLayer(this.props);
74433-
7443474437
}
7443574438

7443674439
_initContainer() {
@@ -74443,9 +74446,9 @@ class DeckglLayer_DeckglLayer {
7444374446
let canvas = document.createElement('canvas');
7444474447
canvas.id = this.id;
7444574448
canvas.style.position = 'absolute';
74446-
canvas.style.top = 0 + "px";
74447-
canvas.style.left = 0 + "px";
74448-
canvas.style.cursor = "";
74449+
canvas.style.top = 0 + 'px';
74450+
canvas.style.left = 0 + 'px';
74451+
canvas.style.cursor = '';
7444974452
let map = this.map;
7445074453
canvas.width = parseInt(map.getCanvas().style.width);
7445174454
canvas.height = parseInt(map.getCanvas().style.height);
@@ -74467,10 +74470,10 @@ class DeckglLayer_DeckglLayer {
7446774470
canvas.style.height = map.getCanvas().style.height;
7446874471
this._draw();
7446974472
}
74470-
7447174473
}
7447274474

7447374475
external_mapboxgl_default.a.supermap.DeckglLayer = DeckglLayer_DeckglLayer;
74476+
7447474477
// CONCATENATED MODULE: ./src/mapboxgl/overlay/mapv/MapvDataSet.js
7447574478
/* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
7447674479
* This program are made available under the terms of the Apache License, Version 2.0
@@ -78531,11 +78534,56 @@ class WebMap_WebMap extends external_mapboxgl_default.a.Evented {
7853178534
url = mapUrls[layerType];
7853278535
this._createXYZLayer(layerInfo, url);
7853378536
break;
78537+
case 'MAPBOXSTYLE':
78538+
this._createMapboxStyle(layerInfo);
78539+
break;
7853478540
default:
7853578541
break;
7853678542
}
7853778543
}
7853878544

78545+
/**
78546+
* @private
78547+
* @function mapboxgl.supermap.WebMap.prototype._createMapboxStyle
78548+
* @description 创建 Mapbox 样式。
78549+
* @param {Object} mapInfo - map 信息。
78550+
*/
78551+
_createMapboxStyle(mapInfo) {
78552+
let _this = this,
78553+
{ dataSource = {} } = mapInfo,
78554+
{ serverId, url } = dataSource,
78555+
styleUrl;
78556+
styleUrl = serverId !== undefined ? `${this.server}web/datas/${serverId}/download` : url;
78557+
FetchRequest.get(styleUrl, null, {
78558+
withCredentials: this.withCredentials,
78559+
withoutFormatSuffix: true,
78560+
headers: {
78561+
'Content-Type': 'application/json;chartset=uft-8'
78562+
}
78563+
}).then(response => {
78564+
return response.json();
78565+
}).then(style => {
78566+
_this._matchStyleObject(style);
78567+
_this.map.setStyle(style);
78568+
})
78569+
}
78570+
78571+
/**
78572+
* @private
78573+
* @function mapboxgl.supermap.WebMap.prototype._matchStyleObject
78574+
* @description 恢复 style 为标准格式。
78575+
* @param {Object} style - mapbox 样式。
78576+
*/
78577+
_matchStyleObject(style) {
78578+
let { sprite, glyphs } = style;
78579+
if (sprite && typeof sprite === 'object'){
78580+
style.sprite = Object.values(sprite)[0];
78581+
}
78582+
if (glyphs && typeof glyphs === 'object'){
78583+
style.glyphs = Object.values(glyphs)[0];
78584+
}
78585+
}
78586+
7853978587
/**
7854078588
* @private
7854178589
* @function mapboxgl.supermap.WebMap.prototype._createTiandituLayer

0 commit comments

Comments
 (0)