修正格式

package.json

@@ -25,6 +25,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "qrcode.vue": "^1.6.2",
+    "sessionstorage": "^0.1.0",
     "stompjs": "^2.3.3",
     "storejs": "^1.0.25",
     "vue": "2.6.10",

src/jmap/config/deviceRender.js

@@ -0,0 +1,11 @@
+import deviceType from './deviceType';
+
+const deviceRender = {};
+
+/** link状态配置*/
+deviceRender[deviceType.Link] = {
+    zlevel: 1,
+    progressive: 1,
+};
+
+export default deviceRender;

src/jmap/map.js

@@ -1,3 +1,4 @@
+import * as zrUtil from 'zrender/src/core/util';
 import Painter from './painter';
 import ProxyHandle from './proxyHandle';
 import deviceState from './config/deviceState';
@@ -43,14 +44,21 @@ class Jmap {
 		// 加载皮肤
 		this.styleDict = this.loadStyle(skinStyle);
 
+		console.log('开始解析');
+
 		// 解析地图数据
 		this.mapDevice = parser(data, this.defaultStateDict);
+		console.log('解析数据完成');
 
 		// 生成代理对象
 		this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
 
+		console.log('数据加载完成: dataLoaded');
+
 		// 初次渲染视图
 		this.$painter.repaint(this.mapDevice, this.styleDict);
+
+		console.log('状态加载完成: stateLoaded');
 	}
 
 	loadStyle(skinStyle) {
@@ -60,12 +68,12 @@ class Jmap {
 	loaddefaultState() {
 		const defaultStateDict = {};
 
-		Object.keys(deviceState).forEach(type => {
+		zrUtil.each(Object.keys(deviceState), (type) => {
 			defaultStateDict[type] = {};
-			Object.keys(deviceState[type] || {}).forEach(state => {
+			zrUtil.each(Object.keys(deviceState[type] || {}), (state) => {
 				defaultStateDict[type][state] = deviceState[type][state].Default;
-			});
-		});
+			})
+		})
 
 		return defaultStateDict;
 	}
@@ -102,7 +110,7 @@ class Jmap {
 				device = this.proxyData[code] = Object.assign(device, { model });
 			}
 
-			this.syncData(model);
+			// this.syncData(model);
 		})
 	}
 

src/jmap/painter.js

@@ -1,10 +1,11 @@
 import zrender from 'zrender';
+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';
 
-const renderer = 'svg';
+const renderer = 'canvas';
 const devicePixelRatio = 2;
 
 class Painter {
@@ -45,7 +46,7 @@ class Painter {
         this.$zr.add(this.parentLevel);
 
         // 添加子级图层
-        Object.values(deviceType).forEach(type => {
+        zrUtil.each(Object.values(deviceType), (type) => {
             const level = new Group({ name: `__${type}__` });
             this.viewLevelMap[type] = level;
             this.parentLevel.add(level);
@@ -117,7 +118,7 @@ class Painter {
     updateZoomTransform(transform) {
         Object.assign(this.zoomTransform, transform);
     }
-    
+
     /**
      * 视图是否存在
      * @param {*} code 
@@ -141,9 +142,9 @@ class Painter {
         this.viewInstance = {};
 
         // 清空图层
-        Object.values(this.viewLevelMap).forEach(level => {
+        zrUtil.each(Object.values(this.viewLevelMap), (level) => {
             level && level.removeAll();
-        });
+        })
 
         this.refresh();
     }

src/jmap/transformController.js

@@ -13,60 +13,60 @@ class transformController {
         this.$zr = painter.$zr;
         this.parentLevel = painter.parentLevel;
 
-        this.zoom = {scale: 1, offsetX: 0, offsetY: 0};
-		this.rect = {x:0, y:0, width: this.$zr.getWidth(), height: this.$zr.getHeight()};
-        this.transform = getTransform(this.zoom); 
-	}
-    
+        this.zoom = { scale: 1, offsetX: 0, offsetY: 0 };
+        this.rect = { x: 0, y: 0, width: this.$zr.getWidth(), height: this.$zr.getHeight() };
+        this.transform = getTransform(this.zoom);
+    }
+
     checkVisible(view) {
         let rect = this.getBoundingRect();
-    	let viewRect = this.getViewBoundingRect(view);
-    	return viewRect.intersect(rect);
+        let viewRect = this.getViewBoundingRect(view);
+        return viewRect.intersect(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.getTransform();
-			view.decomposeTransform();
-			this.revisibleView(view);
+        if (view) {
+            view.transform = this.getTransform();
+            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 = getTransform(zoom);
         this.transformAll();
-	}
-	
-	getTransform() {
-    	return this.transform;
+    }
+
+    getTransform() {
+        return this.transform;
     }
 
     getBoundingRect() {
@@ -78,7 +78,7 @@ class transformController {
         let scale = view.scale[0];
         let offsetX = view.position[0];
         let offsetY = view.position[1];
-        
+
         rect.width = rect.width * scale;
         rect.height = rect.height * scale;
         rect.x = rect.x * scale + offsetX;

src/jmap/utils/parser.js

@@ -1,20 +1,21 @@
+import * as zrUtil from 'zrender/src/core/util';
 import deviceType from '../config/deviceType';
+import deviceRender from '../config/deviceRender';
 
 export function deviceFactory(type, defaultStateDict, elem) {
-	return {
-		zlevel: 1,
+	return Object.assign({
 		_type: type,
 		_code: elem.code,
 		model: elem,
 		state: Object.assign({}, defaultStateDict[type])
-	};
+	}, deviceRender[type]);
 }
 
 export function parser(data, defaultStateDict) {
 	const mapDevice = {};
 
 	if (data) {
-		(data.linkList || []).forEach(elem => {
+		zrUtil.each(data.linkList || [], (elem) => {
 			mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem);
 		});
 	}

src/views/jmap/index.vue

@@ -14,24 +14,26 @@
 				jmaps: null
 			};
 		},
-		mounted() {
+		created() {
 			this.jmaps = new Jmaps();
+		},
+		mounted() {
 			this.jmap = this.jmaps.init({
 				id: this.id,
 				config: {
-					renderer: 'svg',
+					renderer: 'canvas',
 					width: document.documentElement.clientWidth,
 					height: document.documentElement.clientHeight
 				}
 			});
 
 			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 < 10; i++) {
-				for (var j = 1; j < 6000;  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 j = 1; j < 5000; j++) {
+					list.push({ code: `_00${i}${j}`, beg: { x: i * 120 + 50, y: j * 20 + 50 }, end: { x: i * 120 + 150, y: j * 20 + 50 } });
 				}
 			}