修改代码

src/jmap/config/deviceModel.js

@@ -0,0 +1,9 @@
+import deviceType from "./deviceType";
+
+const deviceModel = {};
+
+/** link字段配置*/
+deviceModel[deviceType.Link] = {
+}
+
+export default deviceModel;

src/jmap/config/deviceState.js

@@ -0,0 +1,14 @@
+import deviceType from './deviceType';
+
+const deviceState = {}
+
+/** link状态配置*/
+deviceState[deviceType.Link] = {
+    status: {
+        Default: '01',      //01默认状态
+        State01: '01',      //01状态
+        State02: '02',      //02状态
+    }
+}
+
+export default deviceState;

src/jmap/config/deviceStyle.js

@@ -0,0 +1,17 @@
+import deviceType from './deviceType';
+
+const deviceStyle = {
+    Global: {
+        textFontSize: '8.2',
+        backgroundColor: '#000000',
+    }
+}
+
+/** link风格配置*/
+deviceStyle[deviceType.Link] = {
+    linkColor: 'red',
+    linkWidth: 8,
+    linkTextColor: '#FFFFFF',
+}
+
+export default deviceStyle;

src/jmap/map.js

@@ -1,70 +1,81 @@
 import Painter from './painter';
 import ProxyHandle from './proxyHandle';
-import parser from './parser';
-import { copyFile } from 'fs';
-
-const renderer = 'svg';
-const devicePixelRatio = 2;
+import parser from './utils/parser';
+import deviceState from './config/deviceState';
 
 class Jmap {
     constructor(opts) {
-        this.$dom = opts.dom;               // 挂载的dom节点
-        this.renderer = opts.renderer;      // 渲染方式
+        // 挂载的dom节点
+        this.$dom = opts.dom;
 
-        this.data = {};                     // 原始数据
+        // 原始数据
+        this.data = {};
 
-        this.skinStyle = '';                // 皮肤风格
-        this.styleDict = {};                // 主题风格字典
-        this.defaultStatusDict = {};        // 默认状态字典
+        // 默认初始状态
+        this.defaultStateDict = this.loaddefaultState();
 
-        this.mapDevice = {};                // 设备数据字典
-        this.proxyData = {};                // 设备数据代理字典
+        // 皮肤参数
+        this.skinStyle = '';
 
-        this.$painter = new Painter(this);  // 绘图模块
+        // 皮肤风格
+        this.styleDict = {};
 
-        this.mount(opts);
-    }
-
-    mount(opts) {
-        this.defaultStatusDict = this.loadDefaultStatus();
-
-        if (opts.dom) {
-            let width = opts.dom.clientWidth;
-            let height = opts.dom.clientHeight;
-            let config = Object.assign({ renderer, devicePixelRatio, width, height }, opts.config);
-
-            this.$painter.mount(opts.dom, config);
-        }
+        // 设备数据
+        this.mapDevice = {};
+
+        // 设备代理数据
+        this.proxyData = {};
+
+        // 绘图模块
+        this.$painter = new Painter(this, opts);
     }
 
+    /**
+     * 加载数据
+     * @param {*} data 
+     */
     loadData(skinStyle, data) {
         // 保存原始数据
         this.data = data;
 
-        // 加载皮肤配置
-        this.styleDict = this.loadStyle(skinStyle);
-
         // 解析地图数据
-        this.mapDevice = parser(data, this.defaultStatusDict, this.styleDict);
+        this.mapDevice = parser(data, this.defaultStateDict);
 
         // 生成代理对象
         this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
 
-        // 地图视图渲染
+        // 初次渲染视图
         this.$painter.render(this.mapDevice);
     }
 
-    loadStyle() {
+    loaddefaultState() {
+        let defaultStateDict = {};
 
-    }
-
-    loadDefaultStatus() {
+        Object.keys(deviceState).forEach(type => {
+            defaultStateDict[type] = {};
+            Object.keys(deviceState[type] || {}).forEach(state => {
+                defaultStateDict[type][state] = deviceState[type][state].Default;
+            })
+        })
 
+        return defaultStateDict;
     }
 
     getPainter() {
         return this.$painter;
     }
+
+    clear() {
+        this.$painter.clear();
+    }
+
+    dispose() {
+        this.skinStyle = '';
+        this.styleDict = {};
+        this.mapDevice = {};
+        this.proxyData = {};
+        this.$painter.dispose();
+    }
 }
 
 export default Jmap;

src/jmap/maps.js

@@ -1,8 +1,8 @@
 import zrender from 'zrender';
 import * as zrUtil from 'zrender/src/core/util';
 import Jmap from './map';
-import { __DEV__ } from './config/dev';
-import { getAttribute, setAttribute } from './utils/model';
+import { __DEV__ } from './utils/dev';
+import { getAttribute, setAttribute } from './utils/attribute';
 
 const DOM_ATTRIBUTE_KEY = '_emaps_instance_';
 

src/jmap/painter.js

@@ -2,57 +2,96 @@ import zrender from 'zrender';
 import Group from 'zrender/src/container/Group';
 import deviceType from './config/deviceType';
 import shapefactory from './shape/factory';
-import { copyFile } from 'fs';
+import deviceStyle from './config/deviceStyle';
+
+const renderer = 'svg';
+const devicePixelRatio = 2;
 
 class Painter {
-    constructor(jamp) {
+    constructor(jamp, opts) {
+        // 父级实例
         this.$jamp = jamp;
+
+        // zrender实例
         this.$zr = null;
 
-        this.mapLevel = {};
-        this.viewInstance = {};
-    }
+        // 皮肤配置
+        this.styleMap = {};
 
-    /** 挂载视图*/
-    mount(dom, config) {
-        // 初始化图层
-        Object.values(deviceType).forEach(type => {
-            this.mapLevel[type] = new Group({ name: `__${type}__` });
-        })
+        // 图层数据
+        this.viewLevelMap = {};
+
+        // 视图数据
+        this.viewInstance = {};
+
+        // 父级图层
+        this.parentLevel = new Group({ name: '__parent__' });
 
         // 挂载视图
-        zrender.init(dom, config);
+        this.mount(opts.dom, Object.assign({ renderer, devicePixelRatio, width: opts.dom.width, height: opts.dom.clientHeight }, opts.config));
     }
 
-    /** 渲染视图*/
-    render(mapDevice) {
-        // 初始化视图实例
+    /**
+     * 挂载视图
+     * @param {*} dom 
+     * @param {*} config 
+     */
+    mount(dom, config) {
+        // 挂载页面视图
+        this.$zr = zrender.init(dom, config);
+
+        // 添加父级图层
+        this.$zr.add(this.parentLevel);
+
+        // 添加子级图层
+        Object.values(deviceType).forEach(type => {
+            let level = new Group({ name: `__${type}__` })
+            this.viewLevelMap[type] = level;
+            this.parentLevel.add(level);
+        })
+    }
+
+    /**
+     * 初次渲染视图
+     * @param {*} mapDevice 
+     */
+    render(mapDevice, skinStyle) {
+        // 清空视图
         this.viewInstance = {};
 
+        // 加载皮肤
+        this.styleMap = this.loadStyle(skinStyle);
+
         // 清空图层
-        Object.values(this.mapLevel).forEach(level => {
+        Object.values(this.viewLevelMap).forEach(level => {
             level && level.removeAll();
         })
 
-        // 批量创建视图
+        // 创建视图
         Object.values(mapDevice).forEach(device => {
-            if (device) {
-                this.add(device);
-            }
+            device && this.add(device);
         })
     }
 
+    /**
+     * 加载皮肤
+     * @param {*} skinStyle 
+     */
+    loadStyle(skinStyle) {
+        return deviceStyle;
+    }
+
     /**
      * 添加视图
      * @param {*} device 
      */
     add(device) {
-        let type = device.type;
-        let code = device.code;
-        let view = shapefactory(device);
+        let type = device._type;
+        let code = device._code;
+        let view = shapefactory(type, device, this.styleMap);
         if (view) {
             this.viewInstance[code] = view;
-            this.mapLevel[type].add(view);
+            this.viewLevelMap[type].add(view);
         }
     }
 
@@ -61,11 +100,11 @@ class Painter {
      * @param {*} device 
      */
     delete(device) {
-        let code = device.code;
-        let type = device.type;
+        let code = device._code;
+        let type = device._type;
         let view = this.viewInstance[code];
         if (view) {
-            this.mapLevel[type].remove(view);
+            this.viewLevelMap[type].remove(view);
             delete this.viewInstance[code];
         }
     }
@@ -75,18 +114,29 @@ class Painter {
      * @param {*} device 
      */
     update(device) {
-        let code = device.code;
+        let code = device._code;
         let view = this.viewInstance[code];
         if (view) {
-            if (device.model) {
-                view.setModel(device.model);
-            }
-
-            if (device.status) {
-                view.setStatus(device.status);
-            }
+            view.setStatus(device);
         }
     }
+
+    /**
+     * 清除所有对象和画布
+     */
+    clear() {
+        this.$zr && this.$zr.clear();
+    }
+
+    /**
+    * 销毁 ZRender 实例
+    */
+    dispose() {
+        this.$zr && zrender.dispose(this.$zr);
+        this.$zr = null;
+        this.viewInstance = {};
+        this.viewLevelMap = {};
+    }
 }
 
 export default Painter;

src/jmap/parser.js

@@ -1,21 +0,0 @@
-import deviceType from './config/deviceType';
-
-function parser(data, defaultStatusDict, styleDict) {
-    let mapDevice = {};
-
-    if (data) {
-        (data.linkList || []).forEach(elem => {
-            mapDevice[elem.code] = {
-                type: deviceType.Link,
-                code: elem.code,
-                model: elem,
-                style: styleDict.Link,
-                state: Object.assign({}, defaultStatusDict.Link)
-            }
-        });
-    }
-
-    return mapDevice;
-}
-
-export default parser;

src/jmap/shape/Link.js

@@ -1,12 +1,16 @@
 import Line from 'zrender/src/graphic/shape/Line';
 import Group from 'zrender/src/container/Group';
+import { stat } from 'fs';
 
 class Link extends Group {
-    constructor({ model, style, state }) {
+    constructor({ _code, _type, zlevel, model, state }, style) {
         super();
+        this._code = _code;
+        this._type = _type;
+        this.zlevel = zlevel;
         this.model = model;
-        this.style = style;
         this.state = state;
+        this.style = style;
         this.create();
     }
 
@@ -20,7 +24,7 @@ class Link extends Group {
         }
 
         this.link = new Line({
-            zlevel: model.zlevel,
+            zlevel: this.zlevel,
             shape: {
                 x1: model.beg.x,
                 y1: model.beg.y,
@@ -28,15 +32,15 @@ class Link extends Group {
                 y2: model.end.y,
             },
             style: {
-                lineWidth: style.linkWidth,
-                stroke: style.linkColor,
-                text: model.name,
-                textDistance: style.linkWidth * 2,
+                lineWidth: style.Link.linkWidth,
+                stroke: style.Link.linkColor,
+                text: model.code,
+                textDistance: style.Link.linkWidth * 2,
                 textPosition: textPosition,
                 textAlign: 'middle',
-                fontSize: style.textFontSize,
-                textFill: style.linkTextColor,
-                textStroke: style.backgroundColor,
+                fontSize: style.Global.textFontSize,
+                textFill: style.Link.linkTextColor,
+                textStroke: style.Global.backgroundColor,
             }
         });
 

src/jmap/shape/Section.js

@@ -1,57 +0,0 @@
-import Line from 'zrender/src/graphic/shape/Line';
-import Group from 'zrender/src/container/Group';
-
-class Section extends Group {
-    constructor({ model, style, state }) {
-        super();
-        this.model = model;
-        this.style = style;
-        this.state = state;
-        this.create();
-    }
-
-    create() {
-        let model = this.model;
-        let style = this.style;
-        let textPosition = 'insideBottom';
-
-        if (model.beg.x !== model.end.x && model.beg.y !== model.end.y) {
-            textPosition = model.beg.y > model.end.y ? 'insideLeft' : 'insideRight';
-        }
-
-        this.section = new Line({
-            zlevel: model.zlevel,
-            shape: {
-                x1: model.beg.x,
-                y1: model.beg.y,
-                x2: model.end.x,
-                y2: model.end.y,
-            },
-            style: {
-                lineWidth: style.sectionWidth,
-                stroke: style.sectionColor,
-                text: model.name,
-                textDistance: style.sectionWidth * 2,
-                textPosition: textPosition,
-                textAlign: 'middle',
-                fontSize: style.textFontSize,
-                textFill: style.sectionTextColor,
-                textStroke: style.backgroundColor,
-            }
-        });
-
-        this.add(this.section);
-    }
-
-    setStatus() {
-    }
-
-    tipBasePoint() {
-        return {
-            x: (this.section.shape.x1 + this.section.shape.x2) / 2,
-            y: (this.section.shape.y1 + this.section.shape.y2) / 2
-        };
-    }
-}
-
-export default Section;

src/jmap/shape/factory.js

@@ -1,16 +1,14 @@
 import deviceType from '../config/deviceType';
 import Link from './Link';
-import Section from './Section';
 
+/** 图库*/
 const mapShape = {};
 mapShape[deviceType.Link] = Link;
-mapShape[deviceType.Section] = Section;
 
-function shapefactory(device) {
-
-    let shape = mapShape[device.type];
+function shapefactory(type, device, style) {
+    let shape = mapShape[type];
     if (shape instanceof Function) {
-        return shape(device);
+        return new shape(device, style);
     }
 }
 

src/jmap/utils/parser.js

@@ -0,0 +1,25 @@
+import deviceType from '../config/deviceType';
+
+function deviceFactory(type, defaultStateDict, elem, zlevel) {
+    return {
+        zlevel: zlevel,
+        _type: type,
+        _code: elem.code,
+        model: elem,
+        state: Object.assign({}, defaultStateDict[type])
+    }
+}
+
+function parser(data, defaultStateDict) {
+    let mapDevice = {};
+
+    if (data) {
+        (data.linkList || []).forEach(elem => {
+            mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem, 1);
+        });
+    }
+
+    return mapDevice;
+}
+
+export default parser;

src/views/jmap/index.vue

@@ -23,7 +23,15 @@
 					width: document.documentElement.clientWidth,
 					height: document.documentElement.clientHeight
 				}
-			})
+			});
+			this.jmap.loadData('01',
+				{
+					linkList: [
+						{ code: '1', beg: { x: 200, y: 200 }, end: { x: 400, y: 200 } },
+						{ code: '2', beg: { x: 200, y: 300 }, end: { x: 400, y: 300 } }
+					]
+				}
+			);
 		},
 		methods: {