添加操作

src/jmap/eventController.js

@@ -0,0 +1,7 @@
+class EventController {
+    constructor(jmap) {
+
+    }
+
+
+}

src/jmap/map.js

@@ -11,6 +11,9 @@ class Jmap {
 		// 挂载的dom节点
 		this.$dom = opts.dom;
 
+		// 回调事件
+		this.methods = opts.methods;
+
 		// 原始数据
 		this.data = {};
 
@@ -53,12 +56,12 @@ class Jmap {
 		// 生成代理对象
 		this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
 
-		console.log('数据加载完成: dataLoaded');
+		this.methods.dataLoaded();
 
 		// 初次渲染视图
 		this.$painter.repaint(this.mapDevice, this.styleDict);
 
-		console.log('状态加载完成: stateLoaded');
+		this.methods.stateLoaded();
 	}
 
 	loadStyle(skinStyle) {

src/jmap/painter.js

@@ -3,7 +3,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import Group from 'zrender/src/container/Group';
 import deviceType from './config/deviceType';
 import shapefactory from './shape/factory';
-import TransformController from './transformController';
+import ZoomController from './zoomController';
 
 const renderer = 'canvas';
 const devicePixelRatio = 2;
@@ -26,7 +26,7 @@ class Painter {
         this.parentLevel = null;
 
         // 视图控制器
-        this.transformController = null;
+        this.zoomController = null;
 
         // 挂载视图
         this.mount(opts.dom, Object.assign({ renderer, devicePixelRatio, width: opts.dom.width, height: opts.dom.clientHeight }, opts.config));
@@ -53,7 +53,7 @@ class Painter {
         });
 
         // 视图控制器
-        this.transformController = new TransformController(this);
+        this.zoomController = new ZoomController(this);
     }
 
 	/**
@@ -79,7 +79,7 @@ class Painter {
         const code = device._code;
         const view = shapefactory(type, device, this.$jamp.getStyleDict());
         if (view) {
-            this.transformController.transformView(view);
+            this.zoomController.transformView(view);
             this.viewInstance[code] = view;
             this.viewLevelMap[type].add(view);
         }
@@ -113,10 +113,10 @@ class Painter {
 
     /**
      * 更新zoom
-     * @param {*} transform 
+     * @param {*} zoom 
      */
-    updateZoomTransform(transform) {
-        Object.assign(this.zoomTransform, transform);
+    updateZoomTransform(zoom) {
+        this.zoomController.updateTransform(zoom);
     }
 
     /**

src/jmap/zoomController.js

@@ -7,7 +7,7 @@ function createTransform(zoom) {
     return transform;
 }
 
-function  createBoundingRect(view) {
+function createBoundingRect(view) {
     let rect = view.getBoundingRect();
     let scale = view.scale[0];
     let offsetX = view.position[0];
@@ -19,60 +19,59 @@ function  createBoundingRect(view) {
     return rect;
 }
 
-class transformController {
+class ZoomController {
     constructor(painter) {
-        this.$painter = painter;
         this.$zr = painter.$zr;
         this.parentLevel = painter.parentLevel;
 
-		this.rect = {x:0, y:0, width: this.$zr.getWidth(), height: this.$zr.getHeight()};
-        this.transform = createTransform({scale: 1, offsetX: 0, offsetY: 0}); 
-	}
-    
+        this.rect = { x: 0, y: 0, width: this.$zr.getWidth(), height: this.$zr.getHeight() };
+        this.transform = createTransform({ scale: 1, offsetX: 0, offsetY: 0 });
+    }
+
     checkVisible(view) {
-    	return createBoundingRect(view).intersect(this.rect);
+        return createBoundingRect(view).intersect(this.rect);
     }
 
     revisibleView(view) {
-    	if (this.checkVisible(view)) {
-      		view.show();
-    	} else {
-      		view.hide();
+        if (this.checkVisible(view)) {
+            view.show();
+        } else {
+            view.hide();
         }
-        
-    	view.dirty();
+
+        view.dirty();
     }
 
     transformView(view) {
-		if (view) {
-			view.transform = this.transform;
-			view.decomposeTransform();
-			this.revisibleView(view);
+        if (view) {
+            view.transform = this.transform;
+            view.decomposeTransform();
+            this.revisibleView(view);
         }
-        
-        return view;
-  	}
 
-    transformAll () {
-      	this.parentLevel.eachChild((level) => {
-          	level.eachChild((view) => {
-              	this.transformView(view);
-          	});
-      	});
+        return view;
     }
-    
+
+    transformAll() {
+        this.parentLevel.eachChild((level) => {
+            level.eachChild((view) => {
+                this.transformView(view);
+            });
+        });
+    }
+
     revisibleAll() {
         this.parentLevel.eachChild((level) => {
-          	level.eachChild((view) => {
-            	this.revisibleView(view);
-          	});
-      	});
+            level.eachChild((view) => {
+                this.revisibleView(view);
+            });
+        });
     }
-    
+
     updateTransform(zoom) {
         this.transform = createTransform(zoom);
         this.transformAll();
     }
 }
 
-export default transformController;
+export default ZoomController;

src/views/jmap/index.vue

@@ -19,19 +19,24 @@
 			this.jmap = this.jmaps.init({
 				id: this.id,
 				config: {
-					renderer: 'svg',
+					renderer: 'canvas',
 					width: document.documentElement.clientWidth,
 					height: document.documentElement.clientHeight
+				},
+				methods: {
+					dataLoaded() { console.log('dataLoaded'); },
+					stateLoaded() { console.log('stateLoaded'); },
+					stateUpdated() { console.log('stateUpdated'); }
 				}
 			});
 
 			let list = [
-				{ code: '1', beg: { x: 20 , y:  50}, end: { x: 120, y: 50 } }
+				{ code: '1', beg: { x: 20, y: 50 }, end: { x: 120, y: 50 } }
 			];
 
-			for (var i = 1; i < 2; i++) {
-				for (var j = 1; j < 70000;  j++) {
-					list.push({ code: `${i}${j}`, beg: { x: i * 120  + 50, y: j * 20 + 50}, end: { x: i * 120 + 150, y: j * 20 + 50 } });
+			for (var i = 1; i < 10; i++) {
+				for (var j = 1; j < 5000; j++) {
+					list.push({ code: `${i}${j}`, beg: { x: i * 120 + 50, y: j * 20 + 50 }, end: { x: i * 120 + 150, y: j * 20 + 50 } });
 				}
 			}
 
@@ -46,7 +51,7 @@
 			// ]);
 
 			this.jmap.update([
-				{code: '11', type: 'Link', status: '02'}
+				{ code: '11', type: 'Link', status: '02' }
 			]);
 
 			// this.jmap.render([