Skip to content

Commit 0ed030c

Browse files
zhurczhurc
committed
【API】【mbgl】
1.GraphiclLayer增加setGraphics接口 2.GraphiclLayer去掉fp64参数 3.GraphiclLayer更改addData接口名为addGraphics 4.GraphiclLayer更改removeFeatures接口名为removeGraphics 5.高性能图层要素类Graphic更改properties属性为attributes
1 parent ec36c87 commit 0ed030c

File tree

8 files changed

+319
-233
lines changed

8 files changed

+319
-233
lines changed

‎dist/iclient9-mapboxgl.js‎

Lines changed: 139 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -58471,7 +58471,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
5847158471
* @param {Object} style - 图形参数。</br>
5847258472
* @param {Array} style.color - 点颜色，目前只支持rgba数组
5847358473
* @param {Object} style.radius - 点半径
58474-
* @param {Object} properties - 额外属性信息
58474+
* @param {Object} attributes - 属性信息
5847558475
* @example
5847658476
* var graphic = new mapboxgl.supermap.Graphic(
5847758477
* {
@@ -58484,12 +58484,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
5848458484
* });
5848558485
*/
5848658486
var Graphic = exports.Graphic = function () {
58487-
function Graphic(lngLat, style, properties) {
58487+
function Graphic(lngLat, style, attributes) {
5848858488
_classCallCheck(this, Graphic);
5848958489

5849058490
this.lngLat = _Util.Util.isArray(lngLat) ? { lng: lngLat[0], lat: lngLat[1] } : lngLat;
5849158491
this.style = _Util.Util.extend({}, style);
58492-
this.properties = properties;
58492+
this.attributes = attributes;
5849358493
}
5849458494

5849558495
/**
@@ -58544,27 +58544,27 @@ var Graphic = exports.Graphic = function () {
5854458544
}
5854558545

5854658546
/**
58547-
* @function mapboxgl.supermap.Graphic.prototype.setProperties
58548-
* @description 设置额外属性信息
58549-
* @param properties -{Object} 额外属性信息
58547+
* @function mapboxgl.supermap.Graphic.prototype.setAttributes
58548+
* @description 设置属性信息
58549+
* @param attributes -{Object} 属性信息
5855058550
*/
5855158551

5855258552
}, {
58553-
key: 'setProperties',
58554-
value: function setProperties(properties) {
58555-
this.properties = _Util.Util.extend({}, this.properties, properties);
58553+
key: 'setAttributes',
58554+
value: function setAttributes(attributes) {
58555+
this.attributes = _Util.Util.extend({}, this.attributes, attributes);
5855658556
}
5855758557

5855858558
/**
58559-
* @function mapboxgl.supermap.Graphic.prototype.setProperties
58560-
* @description 获取额外属性信息
58561-
* @return {Object} 额外属性信息
58559+
* @function mapboxgl.supermap.Graphic.prototype.getAttributes
58560+
* @description 获取属性信息
58561+
* @return {Object} 属性信息
5856258562
*/
5856358563

5856458564
}, {
58565-
key: 'getProperties',
58566-
value: function getProperties() {
58567-
return this.properties;
58565+
key: 'getAttributes',
58566+
value: function getAttributes() {
58567+
return this.attributes;
5856858568
}
5856958569
}]);
5857058570

@@ -58639,7 +58639,6 @@ var defaultProps = {
5863958639
* @param {number} options.radiusMaxPixels - 半径最大值(像素)
5864058640
* @param {number} options.strokeWidth - 边框大小
5864158641
* @param {boolean} options.outline - 是否显示边框
58642-
* @param {boolean} options.fp64 - 是否启用64位计算
5864358642
*/
5864458643

5864558644
var GraphicLayer = exports.GraphicLayer = function () {
@@ -58670,6 +58669,16 @@ var GraphicLayer = exports.GraphicLayer = function () {
5867058669
_createClass(GraphicLayer, [{
5867158670
key: 'addTo',
5867258671
value: function addTo(map) {
58672+
this.onAdd(map);
58673+
}
58674+
58675+
/**
58676+
*增加onAdd接口是为了给map.addLayer()方法使用
58677+
*/
58678+
58679+
}, {
58680+
key: 'onAdd',
58681+
value: function onAdd(map) {
5867358682
this.map = map;
5867458683
if (this.canvas) {
5867558684
this.mapContainer = this.map.getCanvasContainer();
@@ -58687,8 +58696,7 @@ var GraphicLayer = exports.GraphicLayer = function () {
5868758696
radiusMinPixels = mapState.radiusMinPixels,
5868858697
radiusMaxPixels = mapState.radiusMaxPixels,
5868958698
strokeWidth = mapState.strokeWidth,
58690-
outline = mapState.outline,
58691-
fp64 = mapState.fp64;
58699+
outline = mapState.outline;
5869258700

5869358701
var me = this;
5869458702
var layerOptions = {
@@ -58705,7 +58713,6 @@ var GraphicLayer = exports.GraphicLayer = function () {
5870558713
radiusMaxPixels: radiusMaxPixels,
5870658714
strokeWidth: strokeWidth,
5870758715
outline: outline,
58708-
fp64: fp64,
5870958716
getPosition: function getPosition(point) {
5871058717
var lngLat = point && point.getLngLat();
5871158718
return lngLat && [lngLat.lng, lngLat.lat, 0];
@@ -58738,12 +58745,123 @@ var GraphicLayer = exports.GraphicLayer = function () {
5873858745
deckOptions.layers = [this.layer];
5873958746
deckOptions.canvas = this.canvas;
5874058747
this.deckGL = new _deck.experimental.DeckGLJS(deckOptions);
58741-
this.map.on('move', this._moveEvent.bind(this));
58748+
this.map.on('render', this._moveEvent.bind(this));
5874258749
this.map.on('resize', this._resizeEvent.bind(this));
5874358750
this.draw();
5874458751
return this;
5874558752
}
5874658753

58754+
/**
58755+
* @function mapboxgl.supermap.GraphicLayer.prototype.setStyle
58756+
* @description 设置图层整体样式
58757+
* @param {Object} styleOptions - 样式对象
58758+
* @param {Array<number>} styleOptions.color - 点颜色
58759+
* @param {number} styleOptions.radius - 点半径
58760+
* @param {number} styleOptions.opacity - 不透明度
58761+
* @param {Array} styleOptions.highlightColor - 高亮颜色，目前只支持rgba数组
58762+
* @param {number} styleOptions.radiusScale - 点放大倍数
58763+
* @param {number} styleOptions.radiusMinPixels - 半径最小值(像素)
58764+
* @param {number} styleOptions.radiusMaxPixels - 半径最大值(像素)
58765+
* @param {number} styleOptions.strokeWidth - 边框大小
58766+
* @param {boolean} styleOptions.outline - 是否显示边框
58767+
*/
58768+
58769+
}, {
58770+
key: 'setStyle',
58771+
value: function setStyle(styleOptions) {
58772+
var styleOpt = {
58773+
color: this.color,
58774+
radius: this.radius,
58775+
opacity: this.opacity,
58776+
highlightColor: this.highlightColor,
58777+
radiusScale: this.radiusScale,
58778+
radiusMinPixels: this.radiusMinPixels,
58779+
radiusMaxPixels: this.radiusMaxPixels,
58780+
strokeWidth: this.strokeWidth,
58781+
outline: this.outline
58782+
};
58783+
58784+
_Util.Util.extend(this, styleOpt, styleOptions);
58785+
this.update();
58786+
}
58787+
58788+
/**
58789+
* @function mapboxgl.supermap.GraphicLayer.prototype.setGraphics
58790+
* @description 设置绘制的点要素数据，会覆盖之前的所有要素
58791+
* @param {Array<mapboxgl.supermap.Graphic>} graphics - 点要素对象数组
58792+
*/
58793+
58794+
}, {
58795+
key: 'setGraphics',
58796+
value: function setGraphics(graphics) {
58797+
this.graphics = [];
58798+
var sGraphics = !_Util.Util.isArray(graphics) ? [graphics] : graphics.concat([]);
58799+
//this.layer.props.data不能被重新赋值，只能在原数组上进行操作
58800+
if (!this.layer.props.data) {
58801+
this.layer.props.data = [];
58802+
}
58803+
this.layer.props.data.length = 0;
58804+
for (var i = 0; i < sGraphics.length; i++) {
58805+
this.layer.props.data.push(sGraphics[i]);
58806+
}
58807+
this.update();
58808+
}
58809+
58810+
/**
58811+
* @function mapboxgl.supermap.GraphicLayer.prototype.addGraphics
58812+
* @description 添加点要素，不会覆盖之前的要素
58813+
* @param {Array<mapboxgl.supermap.Graphic>} graphics - 点要素对象数组
58814+
*/
58815+
58816+
}, {
58817+
key: 'addGraphics',
58818+
value: function addGraphics(graphics) {
58819+
this.graphics = this.graphics || [];
58820+
var sGraphics = !_Util.Util.isArray(graphics) ? [graphics] : graphics.concat([]);
58821+
//this.layer.props.data不能被重新赋值，只能在原数组上进行操作
58822+
if (!this.layer.props.data) {
58823+
this.layer.props.data = [];
58824+
}
58825+
for (var i = 0; i < sGraphics.length; i++) {
58826+
this.layer.props.data.push(sGraphics[i]);
58827+
}
58828+
this.update();
58829+
}
58830+
58831+
/**
58832+
* @function mapboxgl.supermap.GraphicLayer.prototype.update
58833+
* @description 更新图层
58834+
*/
58835+
58836+
}, {
58837+
key: 'update',
58838+
value: function update() {
58839+
this.layer.setChangeFlags({
58840+
dataChanged: true,
58841+
propsChanged: true,
58842+
viewportChanged: true,
58843+
updateTriggersChanged: true
58844+
});
58845+
var state = this.getState();
58846+
this.layer.setState(state);
58847+
}
58848+
58849+
/**
58850+
* @function mapboxgl.supermap.GraphicLayer.prototype.removeGraphics
58851+
* @description 移除所有要素
58852+
*/
58853+
58854+
}, {
58855+
key: 'removeGraphics',
58856+
value: function removeGraphics() {
58857+
this.graphics = [];
58858+
58859+
if (this.layer.props.data) {
58860+
this.layer.props.data.length = 0;
58861+
}
58862+
this.update();
58863+
}
58864+
5874758865
/**
5874858866
* @function mapboxgl.supermap.GraphicLayer.prototype.remove
5874958867
* @description 删除该图层
@@ -58752,7 +58870,7 @@ var GraphicLayer = exports.GraphicLayer = function () {
5875258870
}, {
5875358871
key: 'remove',
5875458872
value: function remove() {
58755-
this.map.off('move', this._moveEvent.bind(this));
58873+
this.map.off('render', this._moveEvent.bind(this));
5875658874
this.map.off('resize', this._resizeEvent.bind(this));
5875758875
this.map.getCanvasContainer().removeChild(this.canvas);
5875858876
}
@@ -58813,7 +58931,6 @@ var GraphicLayer = exports.GraphicLayer = function () {
5881358931
state.radiusMaxPixels = this.radiusMaxPixels;
5881458932
state.strokeWidth = this.strokeWidth;
5881558933
state.outline = this.outline;
58816-
state.fp64 = this.fp64;
5881758934
return state;
5881858935
}
5881958936

@@ -58835,97 +58952,6 @@ var GraphicLayer = exports.GraphicLayer = function () {
5883558952
deckOptions.canvas = this.canvas;
5883658953
this.deckGL.setProps(deckOptions);
5883758954
}
58838-
58839-
/**
58840-
* @function mapboxgl.supermap.GraphicLayer.prototype.update
58841-
* @description 更新图层
58842-
*/
58843-
58844-
}, {
58845-
key: 'update',
58846-
value: function update() {
58847-
this.layer.setChangeFlags({
58848-
dataChanged: true,
58849-
propsChanged: true,
58850-
viewportChanged: true,
58851-
updateTriggersChanged: true
58852-
});
58853-
var state = this.getState();
58854-
this.layer.setState(state);
58855-
}
58856-
58857-
/**
58858-
* @function mapboxgl.supermap.GraphicLayer.prototype.setStyle
58859-
* @description 设置图层整体样式
58860-
* @param {Object} styleOptions - 样式对象
58861-
* @param {Array<number>} styleOptions.color - 点颜色
58862-
* @param {number} styleOptions.radius - 点半径
58863-
* @param {number} styleOptions.opacity - 不透明度
58864-
* @param {Array} styleOptions.highlightColor - 高亮颜色，目前只支持rgba数组
58865-
* @param {number} styleOptions.radiusScale - 点放大倍数
58866-
* @param {number} styleOptions.radiusMinPixels - 半径最小值(像素)
58867-
* @param {number} styleOptions.radiusMaxPixels - 半径最大值(像素)
58868-
* @param {number} styleOptions.strokeWidth - 边框大小
58869-
* @param {boolean} styleOptions.outline - 是否显示边框
58870-
* @param {boolean} styleOptions.fp64 - 是否启用64位计算
58871-
*/
58872-
58873-
}, {
58874-
key: 'setStyle',
58875-
value: function setStyle(styleOptions) {
58876-
var styleOpt = {
58877-
color: this.color,
58878-
radius: this.radius,
58879-
opacity: this.opacity,
58880-
highlightColor: this.highlightColor,
58881-
radiusScale: this.radiusScale,
58882-
radiusMinPixels: this.radiusMinPixels,
58883-
radiusMaxPixels: this.radiusMaxPixels,
58884-
strokeWidth: this.strokeWidth,
58885-
outline: this.outline,
58886-
fp64: this.fp64
58887-
};
58888-
58889-
_Util.Util.extend(this, styleOpt, styleOptions);
58890-
this.update();
58891-
}
58892-
58893-
/**
58894-
* @function mapboxgl.supermap.GraphicLayer.prototype.addData
58895-
* @description 添加点要素
58896-
* @param {Array<mapboxgl.supermap.Graphic>} graphics - 点要素对象数组
58897-
*/
58898-
58899-
}, {
58900-
key: 'addData',
58901-
value: function addData(graphics) {
58902-
this.graphics = this.graphics || [];
58903-
var sGraphics = !_Util.Util.isArray(graphics) ? [graphics] : graphics.concat([]);
58904-
//this.layer.props.data不能被重新赋值，只能在原数组上进行操作
58905-
if (!this.layer.props.data) {
58906-
this.layer.props.data = [];
58907-
}
58908-
for (var i = 0; i < sGraphics.length; i++) {
58909-
this.layer.props.data.push(sGraphics[i]);
58910-
}
58911-
this.update();
58912-
}
58913-
58914-
/**
58915-
* @function mapboxgl.supermap.GraphicLayer.prototype.removeFeatures
58916-
* @description 移除所有要素
58917-
*/
58918-
58919-
}, {
58920-
key: 'removeFeatures',
58921-
value: function removeFeatures() {
58922-
this.graphics = [];
58923-
58924-
if (this.layer.props.data) {
58925-
this.layer.props.data.length = 0;
58926-
}
58927-
this.update();
58928-
}
5892958955
}, {
5893058956
key: '_moveEvent',
5893158957
value: function _moveEvent() {

‎dist/iclient9-mapboxgl.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/locales/en-US/resources.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,6 +1091,8 @@ window.resources = {
10911091
"text_echartsLinesMillions_waterSystem_subtext": "drawn by 14 million points",
10921092
"text_echartsLinesMillions_roads": "National Roads Network",
10931093
"text_echartsLinesMillions_roads_subtext": "drawn by 25 million points",
1094+
"text_graphicLayer_title": "Boarding points of NYC taxis",
1095+
"text_graphicLayer_subTitle": "1.45 million points",
10941096

10951097
"btn_overlayAnalyst": "Start analysis",
10961098
"btn_terrainCurvatureCalculation": "Start calculation",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1092,6 +1092,8 @@ window.resources = {
10921092
"text_echartsLinesMillions_waterSystem_subtext": "1400万点数据绘制",
10931093
"text_echartsLinesMillions_roads": "全国道路网络图",
10941094
"text_echartsLinesMillions_roads_subtext": "2500万点数据绘制",
1095+
"text_graphicLayer_title": "纽约出租车上车点",
1096+
"text_graphicLayer_subTitle": "145万点数据绘制",
10951097

10961098
"btn_overlayAnalyst": "叠加分析",
10971099
"btn_terrainCurvatureCalculation": "地形曲率计算",

‎examples/mapboxgl/config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -367,8 +367,8 @@ var exampleConfig = {
367367
name_en: "high efficiency point layer",
368368
content: [
369369
{
370-
name: "纽约出租车145万点",
371-
name_en: "points of 145w NY taxis",
370+
name: "纽约出租车145万上车点",
371+
name_en: "points of 1.45 million NYC taxis",
372372
thumbnail: "mb_graphicLayer.png",
373373
fileName: "graphicLayer"
374374
}

0 commit comments

Comments
 (0)