Skip to content

Commit b656846

Browse files
zhurczhurc
committed
优化leafelt echarts图层性能
1 parent 845ac4e commit b656846

File tree

10 files changed

+342
-52
lines changed

10 files changed

+342
-52
lines changed

‎dist/iclient9-leaflet.css

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: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -58197,8 +58197,6 @@ var ChangeTileVersion = exports.ChangeTileVersion = _leaflet2["default"].Control
5819758197
if (this.options.orientation === 'vertical') {
5819858198
this.slider.style.width = 170 + 'px';
5819958199
this._sliderContainer.style.height = 170 + 'px';
58200-
} else if (this.options.orientation === 'vertical') {
58201-
this._sliderContainer.style.height = 170 + 'px';
5820258200
} else {
5820358201
this._sliderContainer.style.width = 150 + 'px';
5820458202
}
@@ -60091,6 +60089,9 @@ var EchartsLayer = exports.EchartsLayer = _leaflet2["default"].Layer.extend({
6009160089
map.on("zoomstart", function () {
6009260090
me._disableEchartsContainer();
6009360091
});
60092+
!me.options.loadWhileAnimating && map.on("movestart", function () {
60093+
me._disableEchartsContainer();
60094+
});
6009460095
_echarts2["default"].registerAction({
6009560096
type: 'LeafletMapLayout',
6009660097
event: 'LeafletMapLayout',
@@ -60114,23 +60115,51 @@ var EchartsLayer = exports.EchartsLayer = _leaflet2["default"].Layer.extend({
6011460115
var rendering = true;
6011560116
var leafletMap = _echarts2["default"].leafletMap;
6011660117
var viewportRoot = api.getZr().painter.getViewportRoot();
60118+
60119+
var animated = leafletMap.options.zoomAnimation && _leaflet2["default"].Browser.any3d;
60120+
viewportRoot.className = ' leaflet-layer leaflet-zoom-' + (animated ? 'animated' : 'hide') + ' echarts-layer';
60121+
60122+
var originProp = _leaflet2["default"].DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
60123+
viewportRoot.style[originProp] = '50% 50%';
60124+
6011760125
var coordSys = LeafletMapModel.coordinateSystem;
60126+
60127+
var ecLayers = api.getZr().painter.getLayers();
60128+
6011860129
var moveHandler = function moveHandler() {
6011960130
if (rendering) {
6012060131
return;
6012160132
}
60133+
6012260134
var bounds = map.getBounds();
6012360135
var topLeft = map.latLngToLayerPoint(bounds.getNorthWest());
6012460136
var mapOffset = [parseInt(topLeft.x, 10) || 0, parseInt(topLeft.y, 10) || 0];
60137+
6012560138
viewportRoot.style.left = mapOffset[0] + 'px';
6012660139
viewportRoot.style.top = mapOffset[1] + 'px';
60140+
60141+
if (!me.options.loadWhileAnimating) {
60142+
for (var item in ecLayers) {
60143+
if (!ecLayers.hasOwnProperty(item)) {
60144+
continue;
60145+
}
60146+
ecLayers[item] && clearContext(ecLayers[item].ctx);
60147+
}
60148+
me._enableEchartsContainer();
60149+
}
60150+
6012760151
coordSys.setMapOffset(mapOffset);
6012860152
LeafletMapModel.__mapOffset = mapOffset;
60153+
6012960154
api.dispatchAction({
6013060155
type: 'LeafletMapLayout'
6013160156
});
6013260157
};
6013360158

60159+
function clearContext(context) {
60160+
context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height);
60161+
}
60162+
6013460163
function zoomEndHandler() {
6013560164
if (rendering) {
6013660165
return;
@@ -60142,17 +60171,9 @@ var EchartsLayer = exports.EchartsLayer = _leaflet2["default"].Layer.extend({
6014260171
me._enableEchartsContainer();
6014360172
}
6014460173

60145-
if (me.options.loadWhileAnimating) {
60146-
leafletMap.off('move', this._oldMoveHandler);
60147-
} else {
60148-
leafletMap.off('moveend', this._oldMoveHandler);
60149-
}
60174+
leafletMap.off(me.options.loadWhileAnimating ? 'move' : 'moveend', this._oldMoveHandler);
6015060175
leafletMap.off('zoomend', this._oldZoomEndHandler);
60151-
if (me.options.loadWhileAnimating) {
60152-
leafletMap.on('move', moveHandler);
60153-
} else {
60154-
leafletMap.on('moveend', moveHandler);
60155-
}
60176+
leafletMap.on(me.options.loadWhileAnimating ? 'move' : 'moveend', moveHandler);
6015660177
leafletMap.on('zoomend', zoomEndHandler);
6015760178
this._oldMoveHandler = moveHandler;
6015860179
this._oldZoomEndHandler = zoomEndHandler;
@@ -60169,12 +60190,14 @@ var EchartsLayer = exports.EchartsLayer = _leaflet2["default"].Layer.extend({
6016960190

6017060191
_initEchartsContainer: function _initEchartsContainer() {
6017160192
var size = this._map.getSize();
60193+
6017260194
var _div = document.createElement('div');
6017360195
_div.style.position = 'absolute';
6017460196
_div.style.height = size.y + 'px';
6017560197
_div.style.width = size.x + 'px';
6017660198
_div.style.zIndex = 10;
6017760199
this._echartsContainer = _div;
60200+
6017860201
this._map.getPanes().overlayPane.appendChild(this._echartsContainer);
6017960202
var me = this;
6018060203
this._map.on('resize', function (e) {
@@ -60250,11 +60273,9 @@ LeafletMapCoordSys.prototype.dataToPoint = function (data) {
6025060273
if (data[1] === null) {
6025160274
data[1] = 85.4;
6025260275
}
60253-
6025460276
data[1] = this.fixLat(data[1]);
6025560277

60256-
var point = new _leaflet2["default"].latLng(data[1], data[0]);
60257-
var px = this._LeafletMap.latLngToLayerPoint(point);
60278+
var px = this._LeafletMap.latLngToLayerPoint([data[1], data[0]]);
6025860279
var mapOffset = this._mapOffset;
6025960280
return [px.x - mapOffset[0], px.y - mapOffset[1]];
6026060281
};
@@ -93969,7 +93990,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
9396993990
/* 500 */
9397093991
/***/ (function(module, exports) {
9397193992

93972-
module.exports = {"_args":[["proj4@2.3.15","E:\\git\\iClient9"]],"_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","_spec":"2.3.15","_where":"E:\\git\\iClient9","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"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"},"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"}
93993+
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":"https://registry.npmjs.org/proj4/-/proj4-2.3.15.tgz","_shasum":"5ad06e8bca30be0ffa389a49e4565f51f06d089e","_spec":"proj4@2.3.15","_where":"F:\\dev\\iClient","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"}
9397393994

9397493995
/***/ }),
9397593996
/* 501 */

‎dist/iclient9-leaflet.min.css

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.min.js

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

‎examples/leaflet/config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -618,6 +618,18 @@ var exampleConfig = {
618618
name_en: "Airplane route map",
619619
thumbnail: "l_echartsLinesAirline.png",
620620
fileName: "echartsLinesAirline"
621+
},
622+
{
623+
name: "微博签到图",
624+
name_en: "weibo scatter",
625+
thumbnail: "l_echartsScatterWeibo.png",
626+
fileName: "echartsScatterWeibo"
627+
},
628+
{
629+
name: "方形图",
630+
name_en: "binning on Map",
631+
thumbnail: "l_echartsCellMap.png",
632+
fileName: "echartsCellMap"
621633
}
622634
]
623635

‎examples/leaflet/echartsCellMap.html

Lines changed: 120 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/leaflet/echartsScatterWeibo.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>微博签到图</title>
6+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
9+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
10+
<script type="text/javascript" include="echarts" src="../../dist/include-leaflet.js"></script>
11+
<script type="text/javascript">
12+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13+
var map, url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
14+
map = L.map('map', {
15+
center: [37.94, 112],
16+
maxZoom: 18,
17+
zoom: 4
18+
});
19+
L.supermap.tiledMapLayer(url).addTo(map);
20+
21+
var layer;
22+
$.get('../data/weibo.json', function (weiboData) {
23+
weiboData = weiboData.map(function (serieData, idx) {
24+
var px = serieData[0] / 1000;
25+
var py = serieData[1] / 1000;
26+
var res = [
27+
[px, py]
28+
];
29+
30+
for (var i = 2; i < serieData.length; i += 2) {
31+
var dx = serieData[i] / 1000;
32+
var dy = serieData[i + 1] / 1000;
33+
var x = px + dx;
34+
var y = py + dy;
35+
res.push([x.toFixed(2), y.toFixed(2), 1]);
36+
37+
px = x;
38+
py = y;
39+
}
40+
return res;
41+
});
42+
43+
option = {
44+
coordinateSystem: 'leaflet',
45+
title: {
46+
text: '微博签到数据点亮中国',
47+
subtext: 'From ThinkGIS',
48+
sublink: 'http://www.thinkgis.cn/public/sina',
49+
left: 'center',
50+
top: 'top',
51+
textStyle: {
52+
color: '#fff'
53+
}
54+
},
55+
tooltip: {},
56+
legend: {
57+
left: 'left',
58+
top: 'bottom',
59+
data: ['强', '中', '弱'],
60+
textStyle: {
61+
color: '#ccc'
62+
}
63+
},
64+
series: [{
65+
name: '弱',
66+
type: 'scatter',
67+
coordinateSystem: 'leaflet',
68+
symbolSize: 1,
69+
large: true,
70+
itemStyle: {
71+
normal: {
72+
shadowBlur: 2,
73+
shadowColor: 'rgba(37, 140, 249, 0.8)',
74+
color: 'rgba(37, 140, 249, 0.8)'
75+
}
76+
},
77+
data: weiboData[0]
78+
}, {
79+
name: '中',
80+
type: 'scatter',
81+
coordinateSystem: 'leaflet',
82+
symbolSize: 1,
83+
large: true,
84+
itemStyle: {
85+
normal: {
86+
shadowBlur: 2,
87+
shadowColor: 'rgba(14, 241, 242, 0.8)',
88+
color: 'rgba(14, 241, 242, 0.8)'
89+
}
90+
},
91+
data: weiboData[1]
92+
}, {
93+
name: '强',
94+
type: 'scatter',
95+
coordinateSystem: 'leaflet',
96+
symbolSize: 1,
97+
large: true,
98+
itemStyle: {
99+
normal: {
100+
shadowBlur: 2,
101+
shadowColor: 'rgba(255, 255, 255, 0.8)',
102+
color: 'rgba(255, 255, 255, 0.8)'
103+
}
104+
},
105+
data: weiboData[2]
106+
}]
107+
};
108+
layer= L.supermap.echartsLayer(option,{loadWhileAnimating:false}).addTo(map);
109+
});
110+
</script>
111+
</body>
112+
</html>

‎examples/leaflet/img/l_echartsCellMap.png

23 KB
Loading

‎examples/leaflet/img/l_echartsScatterWeibo.png

14.5 KB
Loading

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