Skip to content

Commit 37dcd8b

Browse files
author
潘卓然Y7000P
committed
【SDK】【修复】【修复EchartsLayer的事件机制&优化新能&补充文档api工具】
1 parent 35ad52d commit 37dcd8b

18 files changed

Lines changed: 1292 additions & 137 deletions

File tree

‎docs/templates/better-docs/tmpl/container.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183
if (members && members.length && members.forEach) {
184184
?>
185185
<div class='vertical-section'>
186-
<h1>Members</h1>
186+
<h1>成员变量</h1>
187187
<div class="members">
188188
<?js members.forEach(function(p) { ?>
189189
<div class="member"><?js= self.partial('members.tmpl', p) ?></div>
@@ -211,7 +211,7 @@
211211
if (typedefs && typedefs.length && typedefs.forEach) {
212212
?>
213213
<div class='vertical-section'>
214-
<h1>Type Definitions</h1>
214+
<h1>类型定义</h1>
215215
<div class="members">
216216
<?js typedefs.forEach(function(e) {
217217
if (e.signature) {

‎docs/templates/better-docs/tmpl/members.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var self = this;
44
?>
55
<?js if (data.type && data.type.names) {?>
66
<span class="method-parameter is-pulled-right">
7-
<label>Type:</label>
7+
<label>类型:</label>
88
<?js= self.partial('type.tmpl', data.type.names) ?>
99
</span>
1010
<?js } ?>

‎docs/templates/better-docs/tmpl/method.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var self = this;
44
?>
55
<?js if (kind === 'event' && data.type && data.type.names) {?>
66
<p class="method-parameter is-pulled-right">
7-
<label>Type: </label>
7+
<label>类型: </label>
88
<?js= self.partial('type.tmpl', data.type.names) ?>
99
</p>
1010
<?js } ?>

‎src/cesiumjs/overlay/EchartsLayer.js‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212

1313
var echartsIdIndex = 0;
1414

15-
/**
15+
/**
1616
* @author 基础平台/创新中心 潘卓然
1717
* @class module:客户端可视化.EchartsLayer
1818
* @classdesc Echarts图表图层
@@ -125,6 +125,9 @@ export default class EchartsLayer {
125125

126126
this.handler = undefined;
127127
this.moveEndEvent = undefined;
128+
this.postEvent = undefined;
129+
this.postStartEvent = undefined;
130+
this.postEndEvent = undefined;
128131

129132
this.layerId = options.layerId || ("echarts" + echartsIdIndex++);
130133
this.layerClass = options.layerClass || "echartlayerdefaultclass";
@@ -301,9 +304,11 @@ export default class EchartsLayer {
301304
}
302305

303306
var moveEndHandler = function (type, target) {
304-
if (rendering || !self.map || !self.visible) {
307+
if (rendering || !self.map) {
305308
return
306309
}
310+
311+
self._visible();
307312
var offsetEl = self.map.canvas;
308313

309314
var mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0]
@@ -316,7 +321,6 @@ export default class EchartsLayer {
316321
api.dispatchAction({
317322
type: 'CesiumRoma'
318323
})
319-
self._visible();
320324
}
321325

322326
self.moveEndEvent = moveEndHandler;
@@ -335,22 +339,41 @@ export default class EchartsLayer {
335339
if (rendering) {
336340
return
337341
}
342+
self._visible();
338343
api.dispatchAction({
339344
type: 'CesiumRoma'
340345
})
341346
}
342347

348+
var postHandle = function () {
349+
// self.moveEndEvent();
350+
zoomEndHandler();
351+
}
352+
353+
var postStartHandle = function () {
354+
self.scene.postRender.addEventListener(postHandle);
355+
// self._visible();
356+
}
357+
358+
self.postStartEvent = postStartHandle.bind(self);
359+
360+
var postEndHandle = function () {
361+
self.scene.postRender.removeEventListener(postHandle);
362+
self.resize();
363+
self._visible();
364+
}
365+
366+
self.postEndEvent = postEndHandle.bind(self);
367+
343368
self.handler = new Cesium.ScreenSpaceEventHandler(self.scene.canvas);
344369

345370
if (self.initStats == false) {
346371
self.initStats = true;
347372
if (self.options.postRender) {
348-
self.map.scene.postRender.addEventListener(function () {
349-
self.postRenderTime++
350-
if (self.postRenderTime % self.postRenderFrame === 0) self.moveEndEvent();
351-
});
373+
self.scene.camera.moveStart.addEventListener(self.postStartEvent, self);
374+
self.scene.camera.moveEnd.addEventListener(self.postEndEvent, self);
352375
} else {
353-
self.handler.setInputAction(zoomStartHandler, Cesium.ScreenSpaceEventType.WHEEL);
376+
// self.handler.setInputAction(zoomStartHandler, Cesium.ScreenSpaceEventType.WHEEL);
354377
self.handler.setInputAction(moveHandler, Cesium.ScreenSpaceEventType.LEFT_DOWN);
355378
self.handler.setInputAction(moveEndHandler, Cesium.ScreenSpaceEventType.LEFT_UP);
356379
self.handler.setInputAction(moveHandler, Cesium.ScreenSpaceEventType.RIGHT_DOWN);
@@ -423,23 +446,16 @@ export default class EchartsLayer {
423446
*/
424447
remove() {
425448
var self = this;
426-
/* this.map._listeners.move.forEach(function (element) {
427-
if (element.name === 'moveHandler') {
428-
self.map.off('move', element);
429-
}
430-
});
431-
this.map._listeners.move.forEach(function (element) {
432-
if (element.name === 'zoomEndHandler') {
433-
self.map.off('zoomend', element);
434-
}
435-
}); */
436-
437449
this.chart.clear();
438-
439-
this.map.scene.camera.moveEnd.removeEventListener(function(){
440-
self.moveEndEvent();
441-
});
442-
this.handler.destroy();
450+
if (self.options.postRender) {
451+
this.scene.camera.moveStart.removeEventListener(this.postStartEvent, this);
452+
this.scene.camera.moveEnd.removeEventListener(this.postEndEvent, this);
453+
} else {
454+
this.map.scene.camera.moveEnd.removeEventListener(function(){
455+
self.moveEndEvent();
456+
});
457+
this.handler.destroy();
458+
}
443459

444460
if (this.canvas.parentElement)
445461
this.canvas.parentElement.removeChild(this.canvas);

‎src/leaflet/overlay/EchartsLayer.js‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import L from "leaflet";
1+
import L from 'leaflet';
22
import echarts from 'echarts';
33

44
import '../core/Base';
@@ -77,7 +77,6 @@ import MapCoordSys from './echart/MapCoordSys';
7777
};
7878
*/
7979
export var EchartsLayer = L.Layer.extend({
80-
8180
map: null, //传入的leaflet地图
8281
chart: null,
8382
options: null,
@@ -86,9 +85,10 @@ export var EchartsLayer = L.Layer.extend({
8685
initialize: function (map, options) {
8786
this.map = map;
8887
this.options = options;
89-
this.layerId = options.layerId || "echartlayerdefaultid";
90-
this.layerClass = options.classId || "echartlayerdefaultclass";
88+
this.layerId = options.layerId || 'echartlayerdefaultid';
89+
this.layerClass = options.classId || 'echartlayerdefaultclass';
9190

91+
this.visible = true;
9292
this.initDevicePixelRatio();
9393
this.initOptions(this.options);
9494
this.initEcharts();
@@ -102,12 +102,12 @@ export var EchartsLayer = L.Layer.extend({
102102

103103
initOptions: function (options) {
104104
if (options) {
105-
if(options.leaflet){
105+
if (options.leaflet) {
106106
return;
107107
}
108108
this.options.leaflet = {
109109
roam: true
110-
}
110+
};
111111
}
112112
},
113113

@@ -124,7 +124,8 @@ export var EchartsLayer = L.Layer.extend({
124124
}
125125
});
126126

127-
echarts.registerAction({
127+
echarts.registerAction(
128+
{
128129
type: 'LeafletRoma',
129130
event: 'LeafletRoma',
130131
update: 'updateLayout'
@@ -143,14 +144,17 @@ export var EchartsLayer = L.Layer.extend({
143144
},
144145

145146
_visible: function () {
146-
this.canvas.style.visibility = "visible";
147+
this.visible = true;
148+
this.canvas.style.visibility = 'visible';
147149
},
148150

149151
_unvisible: function () {
150-
this.canvas.style.visibility = "hidden";
152+
this.visible = false;
153+
this.canvas.style.visibility = 'hidden';
151154
},
152155

153156
onAdd: function (map) {
157+
const vm = this;
154158
this.map = map;
155159
this.canvas = this._createCanvas();
156160
map.getPanes().overlayPane.appendChild(this.canvas);
@@ -164,9 +168,9 @@ export var EchartsLayer = L.Layer.extend({
164168
let size = e.newSize;
165169
self.canvas.style.width = size.x + 'px';
166170
self.canvas.style.height = size.y + 'px';
167-
self.chart.resize()
168-
})
169-
map.on("zoomstart", function () {
171+
self.chart.resize();
172+
});
173+
map.on('zoomstart', function () {
170174
self._unvisible();
171175
});
172176

@@ -182,24 +186,24 @@ export var EchartsLayer = L.Layer.extend({
182186
var coordSys = mapModel.coordinateSystem;
183187

184188
var moveHandler = function () {
185-
if (rendering) {
189+
if (rendering || !vm.visible) {
186190
return;
187191
}
188192
var topleft = leafletMap.getBounds().getNorthWest();
189193
var offset = leafletMap.latLngToLayerPoint(topleft);
190-
var mapOffset = [parseInt(offset.x, 10) || 0, parseInt(offset.y, 10) || 0]
194+
var mapOffset = [parseInt(offset.x, 10) || 0, parseInt(offset.y, 10) || 0];
191195
viewportRoot.style.left = mapOffset[0] + 'px';
192196
viewportRoot.style.top = mapOffset[1] + 'px';
193197
coordSys.setMapOffset(mapOffset);
194198
mapModel.__mapOffset = mapOffset;
195199

196200
api.dispatchAction({
197201
type: 'LeafletRoma'
198-
})
202+
});
199203
};
200204

201205
var zoomEndHandler = function () {
202-
if (rendering) {
206+
if (rendering || !vm.visible) {
203207
return;
204208
}
205209

@@ -210,8 +214,8 @@ export var EchartsLayer = L.Layer.extend({
210214
self._visible();
211215
};
212216

213-
leafletMap.off('move', this._oldMoveHandler)
214-
leafletMap.off('zoomend', this._oldZoomEndHandler)
217+
leafletMap.off('move', this._oldMoveHandler);
218+
leafletMap.off('zoomend', this._oldZoomEndHandler);
215219
// FIXME
216220
// Moveend may be triggered by centerAndZoom method when creating coordSys next time
217221
// leafletMap.off('moveend', this._oldMoveHandler)
@@ -221,7 +225,7 @@ export var EchartsLayer = L.Layer.extend({
221225
this._oldMoveHandler = moveHandler;
222226
this._oldZoomEndHandler = zoomEndHandler;
223227

224-
var roam = mapModel.get('roam')
228+
var roam = mapModel.get('roam');
225229
if (roam && roam !== 'scale') {
226230
// todo 允许拖拽
227231
} else {
@@ -247,8 +251,8 @@ export var EchartsLayer = L.Layer.extend({
247251
var canvas = document.createElement('div');
248252
canvas.id = this.layerId;
249253
//canvas.style.position = 'absolute';
250-
canvas.style.top = "0px";
251-
canvas.style.left = "0px";
254+
canvas.style.top = '0px';
255+
canvas.style.left = '0px';
252256
canvas.height = this.map.getSize().y + 'px';
253257
canvas.width = this.map.getSize().x + 'px';
254258
canvas.style.height = this.map.getSize().y + 'px';
@@ -271,8 +275,8 @@ export var EchartsLayer = L.Layer.extend({
271275
var map = self.map;
272276

273277
//canvas.style.position = 'absolute';
274-
canvas.style.top = "0px";
275-
canvas.style.left = "0px";
278+
canvas.style.top = '0px';
279+
canvas.style.left = '0px';
276280
canvas.height = this.map.getSize().y + 'px';
277281
canvas.width = this.map.getSize().x + 'px';
278282
canvas.style.height = this.map.getSize().y + 'px';
@@ -307,8 +311,8 @@ export var EchartsLayer = L.Layer.extend({
307311
var map = this.map;
308312

309313
//canvas.style.position = 'absolute';
310-
canvas.style.top = "0px";
311-
canvas.style.left = "0px";
314+
canvas.style.top = '0px';
315+
canvas.style.left = '0px';
312316
canvas.height = this.map.getSize().y + 'px';
313317
canvas.width = this.map.getSize().x + 'px';
314318
canvas.style.height = this.map.getSize().y + 'px';
@@ -317,13 +321,13 @@ export var EchartsLayer = L.Layer.extend({
317321
this.chart.resize();
318322
},
319323

320-
/**
324+
/**
321325
* @function L.zondy.EchartsLayer.prototype.update
322326
* @param {*} option echarts.option
323327
* @see https://www.echartsjs.com/zh/tutorial.html#异步数据加载和更新
324328
* @description ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
325329
*/
326-
update: function(option) {
330+
update: function (option) {
327331
this.chart.setOption(option);
328332
}
329333
});

‎src/mapboxgl/MapExtend.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
export var MapExtend = function () {
77

88
window.mapboxgl.Map.prototype.overlayLayersManager = {};
9-
window.mapboxgl.Map.prototype.addLayerBak = window.mapboxgl.Map.prototype.addLayer;
9+
// window.mapboxgl.Map.prototype.addLayerBak = window.mapboxgl.Map.prototype.addLayerBak;
1010
window.mapboxgl.Map.prototype.addLayer = function (layer, before) {
1111
if (layer.source || layer.type === 'custom' || layer.type === "background") {
1212
this.addLayerBak(layer, before);

‎src/mapboxgl/dist/webclient-mapboxgl-plugin.min.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)