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