import * as zrUtil from 'zrender/src/core/util'; import zrender from 'zrender'; import Painter from './painter'; import ProxyHandle from './proxyHandle'; import MouseController from './mouseController'; import deviceState from './config/deviceState'; import deviceStyle from './config/deviceStyle'; import deviceType from './config/deviceType'; import { parser, deviceFactory } from './utils/parser'; const renderer = 'canvas'; const devicePixelRatio = 2; class Jmap { constructor(opts) { // 绘图句柄 this.zr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width: opts.dom.clientWidth, height: opts.dom.clientHeight }, opts.config)); // 鼠标事件 this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu' }; // 回调事件 this.methods = opts.methods; // 原始数据 this.data = {}; // 默认初始状态 this.defaultStateDict = this.loadDefaultState(); // 皮肤参数 this.skinStyle = ''; // 皮肤风格 this.styleDict = {}; // 设备数据 this.mapDevice = {}; // 代理数据 this.proxyData = {}; // 绘图模块 this.painter = new Painter(this); // 鼠标事件 this.mouseController = new MouseController(this); this.mouseController.enable(); } /** * 加载数据 * @param {*} data */ loadData(skinStyle, data) { // 保存皮肤类型 this.skinStyle = skinStyle; // 保存原始数据 this.data = data; // 加载皮肤 this.styleDict = this.loadStyle(skinStyle); // 解析地图数据 this.mapDevice = parser(data, this.defaultStateDict); // 生成代理对象 this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this.painter)); // 数据加载完成回调 (this.methods.dataLoaded instanceof Function) && this.methods.dataLoaded(); // 初次渲染视图 this.painter.repaint(this.mapDevice, this.styleDict); // 视图渲染完成回调 (this.methods.viewLoaded instanceof Function) && this.methods.viewLoaded(); } loadStyle(skinStyle) { return deviceStyle; } loadDefaultState() { const defaultStateDict = {}; zrUtil.each(Object.keys(deviceState), (type) => { defaultStateDict[type] = {}; zrUtil.each(Object.keys(deviceState[type] || {}), (state) => { defaultStateDict[type][state] = deviceState[type][state].Default; }) }) return defaultStateDict; } setDefaultState() { let list = []; Object.values(this.mapDevice).forEach(elem => { let code = elem._code; let type = elem._type; list.push(Object.assign({ code, type }, this.defaultStateDict[type])); }) this.update(list); } syncData(model) { let code = model.code; let type = model.type; let dispose = model._dispose; let prop = null; switch (type) { case deviceType.Link: prop = 'linkList'; break; } let list = this.data[prop]; if (list) { let idex = list.findIndex(elem => { return elem.code == code }); if (idex >= 0) { dispose && list.splice(idex, 1); } else { list.push(model); } } } render(list) { (list || []).forEach(elem => { let type = elem.type; let code = elem.code; let device = this.proxyData[code] || deviceFactory(type, this.styleDict[type], elem); let model = Object.assign(device.model || {}, elem); delete this.proxyData[code]; if (!elem._dispose) { device = this.proxyData[code] = Object.assign(device, { model }); } this.syncData(model); }) } update(list) { (list || []).forEach(elem => { let code = elem.code; if (elem._dispose) { delete this.proxyData[code]; } else { let device = this.proxyData[code] || {}; let state = Object.assign(device.state || {}, elem); this.proxyData[code] = Object.assign(device, { state }); } }) } getZr() { return this.zr; } getPainter() { return this.painter; } getEvents() { return this.events; } getSkinStyle() { return this.skinStyle; } getStyleDict() { return this.styleDict; } getDefaultStateDict() { return this.defaultStateDict; } getMapDevice() { return this.mapDevice; } refresh() { this.painter.refresh(); } clear() { this.painter.clear(); } dispose() { this.skinStyle = ''; this.styleDict = {}; this.mapDevice = {}; this.proxyData = {}; this.zr && zrender.dispose(this.zr); this.painter.dispose(); } } export default Jmap;