Merge branch 'master' of https://git.cloud.tencent.com/joylink/jl-nclient

src/jmap/map.js

@@ -17,7 +17,7 @@ class Jlmap {
 		this.methods = opts.methods;
 
 		// 鼠标事件
-		this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu'};
+		this.events = { __Pan: 'pan', __Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu', DataZoom: 'dataZoom'};
 
 		// 原始数据
 		this.data = {};
@@ -44,18 +44,18 @@ class Jlmap {
 
 		this.$zr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
 
-		this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
+		this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { 	this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
 		this.$painter = new Painter(this);
 		this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
 		this.$painter.updateTransform(this.$options);
 
-		this.optionsHandler = this.setDataZoom.bind(this);
+		this.optionsHandler = this.setOptions.bind(this);
 
 		this.$mouseController = new MouseController(this);
 		this.$mouseController.enable();
 
-		this.$mouseController.on(this.events.Pan, this.optionsHandler);
-		this.$mouseController.on(this.events.Zoom, this.optionsHandler);
+		this.$mouseController.on(this.events.__Pan, this.optionsHandler);
+		this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
 	}
 
 	loadStyle(skinStyle) {
@@ -77,7 +77,9 @@ class Jlmap {
 
 	setMap(map) {
 		// 保存皮肤类型
-		this.skinStyle = map.skinVO.code;
+		if (map.skinVO) {
+			this.skinStyle = map.skinVO.code;
+		}
 
 		// 保存原始数据
 		this.data = map;
@@ -89,13 +91,13 @@ class Jlmap {
 		this.mapDevice = parser(map, this);
 
 		// 数据加载完成 回调
-		if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(); }
+		if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.mapDevice); }
 
 		// 初次渲染视图
 		this.$painter.repaint(this.mapDevice);
 
 		// 视图加载完成 回调
-		if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(); }
+		if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.mapDevice); }
 	}
 
 	setDefaultState() {
@@ -109,10 +111,10 @@ class Jlmap {
 
 		this.update(list);
 
-		if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(); }
+		if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(list); }
 	}
 
-	setDataZoom(opts) {
+	setOptions(opts) {
 		const options = this.pullBack(opts);
 		this.$options.update(options);
 		this.$painter.updateTransform(this.$options);
@@ -131,7 +133,7 @@ class Jlmap {
 		if (device && device.instance) {
 			var rect = createBoundingRect(device.instance);
 			var dcenter = calculateDCenter(rect, { width: this._zr.getWidth(), height: this._zr.getHeight() });
-			this._options.setDataZoom(dcenter);
+			this._options.setOptions(dcenter);
 		}
 	}
 
@@ -158,7 +160,7 @@ class Jlmap {
 			}
 		});
 
-		if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(); }
+		if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); }
 	}
 
 	update(list) {
@@ -174,7 +176,7 @@ class Jlmap {
 			}
 		});
 
-		if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(); }
+		if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
 	}
 
 	pullBack(payload) {
@@ -294,9 +296,9 @@ class Jlmap {
 			case this.events.Contextmenu:
 				this.$mouseController.on(this.events.Contextmenu, cb, context);
 				break;
-			// case this.events.Datazoom:
-			// 	this.$mouseController.on(this.events.Datazoom, cb, context);
-			// 	break;
+			case this.events.DataZoom:
+				this.$mouseController.on(this.events.DataZoom, cb, context);
+				break;
 			}
 		}
 	}
@@ -311,8 +313,9 @@ class Jlmap {
 			case this.events.Contextmenu:
 				this.$mouseController.off(this.events.Contextmenu, cb);
 				break;
-			// case this.events.Datazoom:
-			// 	this.$mouseController.off(this.events.Datazoom, cb);
+			case this.events.DataZoom:
+				this.$mouseController.off(this.events.DataZoom, cb);
+				break;
 			}
 		}
 	}

src/jmap/mouseController.js

@@ -105,7 +105,7 @@ class MouseController extends Eventful {
 
 		this._preventDefaultMouseMove && eventTool.stop(e.event);
 
-		this.trigger(this.events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
+		this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
 	}
 
 	mouseup(e) {
@@ -133,7 +133,7 @@ class MouseController extends Eventful {
 				scale = -1;
 			}
 
-			this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
+			this.trigger(this.events.__Zoom, {type: 'zoom', scale, originX, originY });
 		}
 	}
 

src/jmap/options.js

@@ -1,5 +1,5 @@
 class Options {
-	constructor(opts) {
+	constructor(opts, trigger) {
 		this.scaleIndex = 0;
 		this.scaleList = [
 			0.5, 0.6, 0.7, 0.8, 0.9,
@@ -35,6 +35,8 @@ class Options {
 		this.zoomOnMouseWheel = false;
 
 		this.preventDefaultMouseMove = true;
+
+		this.trigger = trigger;
 	}
 
 	update(payload) {
@@ -81,6 +83,8 @@ class Options {
 		if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
 			this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
 		}
+
+		if (this.trigger instanceof Function) { this.trigger(this); }
 	}
 
 	getScaleRate(scale) {

src/views/jlmap/index.vue

@@ -137,15 +137,16 @@ export default {
 					offsetY: 0
 				},
 				methods: {
-					dataLoaded: this.onDataLoaded,
-					viewLoaded: this.onViewLoaded,
-					stateLoaded: this.onStateLoaded,
-					viewUpdate: this.onViewUpdate,
-					stateUpdate: this.onStateUpdate,
-					optionsUpdate: this.onOptionsUpdate
+					dataLoaded: this.handleDataLoaded,
+					viewLoaded: this.handleViewLoaded,
+					stateLoaded: this.handleStateLoaded,
+					viewUpdate: this.handleViewUpdate,
+					stateUpdate: this.handleStateUpdate,
+					optionsUpdate: this.handleOptionsUpdate
 				}
 			});
 
+			this.$jlmap.on('dataZoom', this.onDataZoom, this);
 			this.$jlmap.on('selected', this.onSelected, this);
 			this.$jlmap.on('contextmenu', this.onContextMenu, this);
 
@@ -182,30 +183,36 @@ export default {
 			this.$jlmap && this.$jlmap.setCenter(deviceCode);
         },
         // 地图数据加载完成
-        onDataLoaded() {
+    	handleDataLoaded() {
             console.log('dataloaded');
         },
         // 地图视图加载完成
-        onViewLoaded() {
-            this.mapViewLoaded(true);
+        handleViewLoaded() {
+			console.log('viewLoaded');
+            this.mapViewLoaded(false);
         },
         // 地图状态加载完成
-        onStateLoaded() {
-            this.mapViewLoaded(true);
+        handleStateLoaded() {
+			console.log('stateLoaded');
+            this.mapViewLoaded(false);
         },
         // 地图视图更新
-        onViewUpdate() {
+        handleViewUpdate() {
             console.log('viewUpdate');
         },
         // 地图状态更新
-        onStateUpdate() {
+        handleStateUpdate() {
             console.log('stateUpdate');
-        },
-		// 视图缩放更新
-		onOptionsUpdate(options) {
-			this.dataZoom.offsetX = options.offsetX.toFixed(1) + '';
-			this.dataZoom.offsetY = options.offsetY.toFixed(1) + '';
-			this.dataZoom.scaleRate = options.scaleRate + '';
+		},
+		// 视图参数改变
+		handleOptionsUpdate(options) {
+			console.log('optionsUpdate');
+		},
+		// 视图缩放事假
+		onDataZoom(dataZoom) {
+			this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
+			this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
+			this.dataZoom.scaleRate = dataZoom.scaleRate + '';
 
 			const skinStyle = this.$store.state.map.map.skinStyle;
 			if (skinStyle) {
@@ -260,11 +267,11 @@ export default {
 		},
 		// 缩小
 		setShrink() {
-			this.$jlmap.setDataZoom({scale: -1});
+			this.$jlmap.setOptions({scale: -1});
 		},
 		// 放大
 		setMagnify() {
-			this.$jlmap.setDataZoom({scale: 1});
+			this.$jlmap.setOptions({scale: 1});
 		}
 	}
 };