Skip to content

Commit 076eac4

Browse files
tangqinGisertangqinGiser
committed
优化mapvlayer性能，增加遗漏示例。review by zhurc.
1 parent 3904d50 commit 076eac4

36 files changed

+1530
-157
lines changed

‎dist/iclient-classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4399,7 +4399,7 @@ var MapVRenderer = exports.MapVRenderer = function (_MapVBaseLayer) {
43994399
self.options._width = self.options.width;
44004400
}
44014401

4402-
this.drawContext(context, new _mapv.DataSet(data), self.options, worldPoint);
4402+
this.drawContext(context, data, self.options, worldPoint);
44034403

44044404
self.options.updateCallback && self.options.updateCallback(time);
44054405
}

‎dist/iclient-classic.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.

‎dist/iclient9-leaflet.js‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30625,13 +30625,36 @@ var MapVRenderer = exports.MapVRenderer = function (_BaseLayer) {
3062530625
return;
3062630626
}
3062730627

30628-
var offset = map.latLngToAccurateContainerPoint(this.canvasLayer.getTopLeft());
30628+
var bounds = map.getBounds();
30629+
//获取当前像素下的地理范围
30630+
var dw = bounds.getEast() - bounds.getWest();
30631+
var dh = bounds.getNorth() - bounds.getSouth();
30632+
var mapCanvas = map.getSize();
30633+
30634+
var resolutionX = dw / mapCanvas.x,
30635+
resolutionY = dh / mapCanvas.y;
30636+
var centerPx = map.latLngToLayerPoint(map.getCenter());
30637+
30638+
//获取屏幕左上角的地理坐标坐标
30639+
//左上角屏幕坐标为0,0
30640+
var lopLeft = this.canvasLayer.getTopLeft();
30641+
30642+
var lopLeftPX = map.latLngToAccurateContainerPoint(lopLeft);
30643+
// var lopLeft = map.containerPointToLatLng([0, 0]);
3062930644
var dataGetOptions = {
3063030645
transferCoordinate: function transferCoordinate(coordinate) {
30631-
var worldPoint = map.latLngToAccurateContainerPoint(_leaflet2["default"].latLng(coordinate[1], coordinate[0]));
30646+
var offset;
30647+
if (self.context === '2d') {
30648+
offset = map.latLngToAccurateContainerPoint(_leaflet2["default"].latLng(coordinate[1], coordinate[0]));
30649+
} else {
30650+
offset = {
30651+
'x': (coordinate[0] - lopLeft.lng) / resolutionX,
30652+
'y': (lopLeft.lat - coordinate[1]) / resolutionY
30653+
};
30654+
}
3063230655
var pixel = {
30633-
x: worldPoint.x - offset.x,
30634-
y: worldPoint.y - offset.y
30656+
x: offset.x - lopLeftPX.x,
30657+
y: offset.y - lopLeftPX.x
3063530658
};
3063630659
return [pixel.x, pixel.y];
3063730660
}
@@ -30652,10 +30675,10 @@ var MapVRenderer = exports.MapVRenderer = function (_BaseLayer) {
3065230675

3065330676
var worldPoint = map.latLngToContainerPoint(_leaflet2["default"].latLng(0, 0));
3065430677
var pixel = {
30655-
x: worldPoint.x - offset.x,
30656-
y: worldPoint.y - offset.y
30678+
x: worldPoint.x - centerPx.x,
30679+
y: worldPoint.y - centerPx.y
3065730680
};
30658-
this.drawContext(context, new _mapv.DataSet(data), self.options, pixel);
30681+
this.drawContext(context, data, self.options, pixel);
3065930682

3066030683
self.options.updateCallback && self.options.updateCallback(time);
3066130684
}
@@ -30707,6 +30730,7 @@ var MapVRenderer = exports.MapVRenderer = function (_BaseLayer) {
3070730730
this.canvasLayer.draw();
3070830731
this._show();
3070930732
}
30733+
3071030734
/**
3071130735
* @function L.supermap.MapVRenderer.prototype.zoomStartEvent
3071230736
* @description 隐藏渲染样式
@@ -72138,7 +72162,7 @@ module.exports = function (proj4) {
7213872162
/* 384 */
7213972163
/***/ (function(module) {
7214072164

72141-
module.exports = {"_from":"proj4@2.3.15","_id":"proj4@2.3.15","_inBundle":false,"_integrity":"sha1-WtBui8owvg/6OJpJ5FZfUfBtCJ4=","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.3.15","name":"proj4","escapedName":"proj4","rawSpec":"2.3.15","saveSpec":null,"fetchSpec":"2.3.15"},"_requiredBy":["/"],"_resolved":"http://registry.npm.taobao.org/proj4/download/proj4-2.3.15.tgz","_shasum":"5ad06e8bca30be0ffa389a49e4565f51f06d089e","_spec":"proj4@2.3.15","_where":"E:\\2018\\git\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"~0.0.2"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"browserify":"~12.0.1","chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"~0.4.2","grunt-browserify":"~4.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~0.8.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","istanbul":"~0.2.4","mocha":"~1.17.1","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","jam":{"main":"dist/proj4.js","include":["dist/proj4.js","README.md","AUTHORS","LICENSE.md"]},"license":"MIT","main":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"test":"./node_modules/istanbul/lib/cli.js test ./node_modules/mocha/bin/_mocha test/test.js"},"version":"2.3.15"};
72165+
module.exports = {"_from":"proj4@2.3.15","_id":"proj4@2.3.15","_inBundle":false,"_integrity":"sha1-WtBui8owvg/6OJpJ5FZfUfBtCJ4=","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.3.15","name":"proj4","escapedName":"proj4","rawSpec":"2.3.15","saveSpec":null,"fetchSpec":"2.3.15"},"_requiredBy":["/"],"_resolved":"http://registry.npm.taobao.org/proj4/download/proj4-2.3.15.tgz","_shasum":"5ad06e8bca30be0ffa389a49e4565f51f06d089e","_spec":"proj4@2.3.15","_where":"G:\\iClient\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"~0.0.2"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"browserify":"~12.0.1","chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"~0.4.2","grunt-browserify":"~4.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~0.8.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","istanbul":"~0.2.4","mocha":"~1.17.1","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","jam":{"main":"dist/proj4.js","include":["dist/proj4.js","README.md","AUTHORS","LICENSE.md"]},"license":"MIT","main":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"test":"./node_modules/istanbul/lib/cli.js test ./node_modules/mocha/bin/_mocha test/test.js"},"version":"2.3.15"};
7214272166

7214372167
/***/ }),
7214472168
/* 385 */

‎dist/iclient9-leaflet.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.

‎dist/iclient9-mapboxgl.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27962,7 +27962,7 @@ var MapvRenderer = exports.MapvRenderer = function (_BaseLayer) {
2796227962
_this.map.on('rotatestart', _this.rotateStartEvent.bind(_this));
2796327963
_this.map.on('rotate', _this.rotateEvent.bind(_this));
2796427964
_this.map.on('rotateend', _this.rotateEndEvent.bind(_this));
27965-
_this.map.on('dragend', _this.dragEndEvent.bind(_this));
27965+
// this.map.on('dragend', this.dragEndEvent.bind(this));
2796627966
_this.map.on('movestart', _this.moveStartEvent.bind(_this));
2796727967
_this.map.on('move', _this.moveEvent.bind(_this));
2796827968
_this.map.on('moveend', _this.moveEndEvent.bind(_this));
@@ -28188,10 +28188,22 @@ var MapvRenderer = exports.MapvRenderer = function (_BaseLayer) {
2818828188
return;
2818928189
}
2819028190

28191+
var bounds = map.getBounds(),
28192+
dw = bounds.getEast() - bounds.getWest(),
28193+
dh = bounds.getNorth() - bounds.getSouth();
28194+
var resolutionX = dw / this.canvasLayer.canvas.width,
28195+
resolutionY = dh / this.canvasLayer.canvas.height;
28196+
28197+
var center = map.getCenter();
28198+
var centerPx = map.project(center);
2819128199
var dataGetOptions = {
2819228200
transferCoordinate: function transferCoordinate(coordinate) {
28193-
var worldPoint = map.project(new _mapboxGl2.default.LngLat(coordinate[0], coordinate[1]));
28194-
return [worldPoint.x, worldPoint.y];
28201+
if (map.transform.rotationMatrix) {
28202+
var worldPoint = map.project(new _mapboxGl2.default.LngLat(coordinate[0], coordinate[1]));
28203+
return [worldPoint.x, worldPoint.y];
28204+
}
28205+
var pixel = [(coordinate[0] - center.lng) / resolutionX, (center.lat - coordinate[1]) / resolutionY];
28206+
return [pixel[0] + centerPx.x, pixel[1] + centerPx.y];
2819528207
}
2819628208
};
2819728209

@@ -28209,7 +28221,7 @@ var MapvRenderer = exports.MapvRenderer = function (_BaseLayer) {
2820928221
self.options._size = self.options.size;
2821028222

2821128223
var worldPoint = map.project(new _mapboxGl2.default.LngLat(0, 0));
28212-
this.drawContext(context, new _mapv.DataSet(data), self.options, worldPoint);
28224+
this.drawContext(context, data, self.options, worldPoint);
2821328225

2821428226
self.options.updateCallback && self.options.updateCallback(time);
2821528227
}
@@ -57731,7 +57743,7 @@ var HeatMapLayer = exports.HeatMapLayer = function (_mapboxgl$Evented) {
5773157743
}, {
5773257744
key: 'setVisibility',
5773357745
value: function setVisibility(visibility) {
57734-
if (visibility !== this.visibility) {
57746+
if (this.rootCanvas && visibility !== this.visibility) {
5773557747
this.visibility = visibility;
5773657748
this.rootCanvas.style.display = visibility ? "block" : "none";
5773757749
}

‎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.

‎dist/iclient9-openlayers.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29632,18 +29632,26 @@ var MapvLayer = exports.MapvLayer = function (_BaiduMapLayer) {
2963229632
context.clear(context.COLOR_BUFFER_BIT);
2963329633
}
2963429634
var ext = map.getView().calculateExtent();
29635-
var topLeft = map.getPixelFromCoordinate([ext[0], ext[3]]);
29635+
var topLeftPx = map.getPixelFromCoordinate([ext[0], ext[3]]);
29636+
29637+
self._mapCenter = map.getView().getCenter();
29638+
self._mapCenterPx = map.getPixelFromCoordinate(self._mapCenter);
29639+
self._reselutions = map.getView().getResolution();
29640+
self._rotation = -map.getView().getRotation();
2963629641

2963729642
var dataGetOptions = {
2963829643
transferCoordinate: function transferCoordinate(coordinate) {
29639-
var pixelP = map.getPixelFromCoordinate(coordinate);
29640-
var rotation = -map.getView().getRotation();
29641-
var center = map.getPixelFromCoordinate(map.getView().getCenter());
29642-
var scaledP = scale(pixelP, center, self.pixelRatio);
29643-
var rotatedP = rotate(scaledP, rotation, center);
29644-
// var result = [rotatedP[0] + self.offset[0] - topLeft[0], rotatedP[1] + self.offset[1] - topLeft[1]];
29645-
var result = [rotatedP[0] + self.offset[0], rotatedP[1] + self.offset[1]];
29646-
return result;
29644+
var x = (coordinate[0] - self._mapCenter[0]) / self._reselutions,
29645+
y = (self._mapCenter[1] - coordinate[1]) / self._reselutions;
29646+
var scaledP = [x + self._mapCenterPx[0], y + self._mapCenterPx[1]];
29647+
scaledP = scale(scaledP, self._mapCenterPx, self.pixelRatio);
29648+
/*//有旋转量的时候处理旋转
29649+
if (self._rotation !== 0) {
29650+
var rotatedP = rotate(scaledP, self._rotation, self._mapCenterPx);
29651+
return [rotatedP[0] + self.offset[0], rotatedP[1] + self.offset[1]];
29652+
}
29653+
//处理放大或缩小级别*/
29654+
return [scaledP[0] + self.offset[0], scaledP[1] + self.offset[1]];
2964729655
}
2964829656
};
2964929657

@@ -29675,8 +29683,8 @@ var MapvLayer = exports.MapvLayer = function (_BaiduMapLayer) {
2967529683
self.processData(data);
2967629684
self.options._size = self.options.size;
2967729685
var pixel = map.getPixelFromCoordinate([0, 0]);
29678-
pixel = [pixel[0] - topLeft[0], pixel[1] - topLeft[1]];
29679-
this.drawContext(context, new _mapv.DataSet(data), self.options, { x: pixel[0], y: pixel[1] });
29686+
pixel = [pixel[0] - topLeftPx[0], pixel[1] - topLeftPx[1]];
29687+
this.drawContext(context, data, self.options, { x: pixel[0], y: pixel[1] });
2968029688
if (self.isEnabledTime()) {
2968129689
this.source.changed();
2968229690
}
@@ -67378,7 +67386,7 @@ module.exports = function (proj4) {
6737867386
/* 345 */
6737967387
/***/ (function(module) {
6738067388

67381-
module.exports = {"_from":"proj4@2.3.15","_id":"proj4@2.3.15","_inBundle":false,"_integrity":"sha1-WtBui8owvg/6OJpJ5FZfUfBtCJ4=","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.3.15","name":"proj4","escapedName":"proj4","rawSpec":"2.3.15","saveSpec":null,"fetchSpec":"2.3.15"},"_requiredBy":["/"],"_resolved":"http://registry.npm.taobao.org/proj4/download/proj4-2.3.15.tgz","_shasum":"5ad06e8bca30be0ffa389a49e4565f51f06d089e","_spec":"proj4@2.3.15","_where":"E:\\2018\\git\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"~0.0.2"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"browserify":"~12.0.1","chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"~0.4.2","grunt-browserify":"~4.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~0.8.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","istanbul":"~0.2.4","mocha":"~1.17.1","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","jam":{"main":"dist/proj4.js","include":["dist/proj4.js","README.md","AUTHORS","LICENSE.md"]},"license":"MIT","main":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"test":"./node_modules/istanbul/lib/cli.js test ./node_modules/mocha/bin/_mocha test/test.js"},"version":"2.3.15"};
67389+
module.exports = {"_from":"proj4@2.3.15","_id":"proj4@2.3.15","_inBundle":false,"_integrity":"sha1-WtBui8owvg/6OJpJ5FZfUfBtCJ4=","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.3.15","name":"proj4","escapedName":"proj4","rawSpec":"2.3.15","saveSpec":null,"fetchSpec":"2.3.15"},"_requiredBy":["/"],"_resolved":"http://registry.npm.taobao.org/proj4/download/proj4-2.3.15.tgz","_shasum":"5ad06e8bca30be0ffa389a49e4565f51f06d089e","_spec":"proj4@2.3.15","_where":"G:\\iClient\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"~0.0.2"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"browserify":"~12.0.1","chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"~0.4.2","grunt-browserify":"~4.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~0.8.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","istanbul":"~0.2.4","mocha":"~1.17.1","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","jam":{"main":"dist/proj4.js","include":["dist/proj4.js","README.md","AUTHORS","LICENSE.md"]},"license":"MIT","main":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"test":"./node_modules/istanbul/lib/cli.js test ./node_modules/mocha/bin/_mocha test/test.js"},"version":"2.3.15"};
6738267390

6738367391
/***/ }),
6738467392
/* 346 */

‎dist/iclient9-openlayers.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/leaflet/config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -733,6 +733,11 @@ var exampleConfig = {
733733
name_en: "force edge bundling",
734734
thumbnail: "l_mapvLayer_forceEdgeBunding.gif",
735735
fileName: "mapVLayerForceEdgeBunding"
736+
}, {
737+
name: "迁徙时序图",
738+
name_en: "migration",
739+
thumbnail: "l_mapvLayer_qianxitime.gif",
740+
fileName: "mapVLayerQianxiTime"
736741
}, {
737742
name: "迁徙图",
738743
name_en: "migration",
@@ -765,7 +770,7 @@ var exampleConfig = {
765770
fileName: "mapVLayerPolygonBuildings"
766771
}, {
767772
name: "2018年2月北京房价",
768-
name_en: "Beijing house prices of Lianjia(2018.2)",
773+
name_en: "Beijing house prices(2018.2)",
769774
thumbnail: "l_mapvLianjia.png",
770775
fileName: "mapvLianjiaData"
771776
}]

‎examples/leaflet/img/l_mapvLayer_qianxi.gif‎

-82.3 KB
Loading

0 commit comments

Comments
 (0)