From 9bdd8e15c594a5ddb927700f460cb0d19c22efa9 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 19 Jul 2019 11:11:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/map.js | 15 ++++++++++----- src/jmap/options.js | 29 +++++++---------------------- src/jmap/painter.js | 22 +++++++++++++++------- src/jmap/transformHandle.js | 10 ++++++++-- src/views/jmap/index.vue | 11 +++++++++-- 5 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/jmap/map.js b/src/jmap/map.js index ad3ec302d..ce6d7d915 100644 --- a/src/jmap/map.js +++ b/src/jmap/map.js @@ -48,8 +48,8 @@ class Jmap { this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放 - this.$painter = new Painter(this); // 绘画层 - this.$painter.updateZoomTransform(this.$options); + this.$painter = new Painter(this); + this.$painter.updateTransform(this.$options); this.$mouseController = new MouseController(this); this.$mouseController.enable(); @@ -116,8 +116,8 @@ class Jmap { if (payload.type === 'zoom') { const zrWidth = this.$zr.getWidth(); const zrHeight = this.$zr.getHeight(); - const originX = this.$options.zoomOnMouseWheel ? payload.originX : zrWidth / 2; - const originY = this.$options.zoomOnMouseWheel ? payload.originY : zrHeight / 2; + const originX = payload.originX || zrWidth / 2; + const originY = payload.originY || zrHeight / 2; const x = (this.$options.offsetX + originX) / this.$options.scaleRate; const y = (this.$options.offsetY + originY) / this.$options.scaleRate; const newScaleRate = this.$options.getScaleRate(payload.scale); @@ -132,7 +132,7 @@ class Jmap { setOptions(zoom) { this.$options.update(this.pullBack(zoom)); - this.$painter.updateZoomTransform(this.$options); + this.$painter.updateTransform(this.$options); if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); } } @@ -246,6 +246,11 @@ class Jmap { return this.mapDevice[code]; } + resize(opt) { + this.$zr.resize(opt); + this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()}); + } + refresh() { this.$painter.refresh(); } diff --git a/src/jmap/options.js b/src/jmap/options.js index 94631e04e..552f6b99c 100644 --- a/src/jmap/options.js +++ b/src/jmap/options.js @@ -1,6 +1,5 @@ class Options { - constructor(opts, zr) { - this.$zr = zr; + constructor(opts) { this.scaleIndex = 0; this.scaleList = [ 0.5, 0.6, 0.7, 0.8, 0.9, @@ -27,15 +26,7 @@ class Options { this.offsetY = opts.offsetY || 0; // y偏移 - this.throttle = opts.throttle || 100; // 刷新频率 - - this.disabled = false; // 是否禁用 - - this.moveOnMouseMove = true; - - this.zoomOnMouseWheel = false; - - this.preventDefaultMouseMove = true; + this.throttle = opts.throttle || 17; // 刷新频率 } update(payload) { @@ -45,20 +36,23 @@ class Options { if (Number.isFinite(payload.dy)) { this.offsetY -= payload.dy; } + if (Number.isFinite(payload.offsetX)) { this.offsetX = payload.offsetX; } if (Number.isFinite(payload.offsetY)) { this.offsetY = payload.offsetY; } + if (Number.isFinite(payload.scale)) { if (Number.isFinite(payload.scale)) { - if (this.scaleIndex + payload.scale >= 0 && this.scaleIndex + payload.scale < this.scaleList.length) { + if ((this.scaleIndex + payload.scale) >= 0 && (this.scaleIndex + payload.scale) < this.scaleList.length) { this.scaleIndex = this.scaleIndex + payload.scale; } } this.scaleRate = this.scaleList[this.scaleIndex]; } + if (Number.isFinite(payload.scaleRate)) { const idx = this.scaleList.indexOf(payload.scaleRate); if (idx < 0) { @@ -67,20 +61,11 @@ class Options { this.scaleIndex = idx; this.scaleRate = payload.scaleRate; } - if (payload.disabled === true || payload.disabled === false) { - this.disabled = payload.disabled; - } - if (payload.moveOnMouseMove === true || payload.moveOnMouseMove === false) { - this.moveOnMouseMove = payload.moveOnMouseMove; - } - if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) { - this.zoomOnMouseWheel = payload.zoomOnMouseWheel; - } } getScaleRate(scale) { if (Number.isFinite(scale)) { - if (this.scaleIndex + scale >= 0 && this.scaleIndex + scale < this.scaleList.length) { + if ((this.scaleIndex + scale) >= 0 && (this.scaleIndex + scale) < this.scaleList.length) { return this.scaleList[this.scaleIndex + scale]; } } diff --git a/src/jmap/painter.js b/src/jmap/painter.js index 65ee9432f..943df4013 100644 --- a/src/jmap/painter.js +++ b/src/jmap/painter.js @@ -19,8 +19,8 @@ class Painter { // 父级图层 this.parentLevel = null; - // 初始绘图实例 - this.initPainterInstance(); + // 初始图层 + this.initPainterLevels(); } /** @@ -28,7 +28,7 @@ class Painter { * @param {*} dom * @param {*} config */ - initPainterInstance() { + initPainterLevels() { // 添加父级图层 this.parentLevel = new Group({ name: '__parent__' }); this.$zr.add(this.parentLevel); @@ -93,11 +93,19 @@ class Painter { } /** - * 更新图层zoom - * @param {*} zoom + * 更新transform变化 + * @param {*} opt */ - updateZoomTransform(zoom) { - this.$transformHandle.updateTransform(zoom); + updateTransform(opt) { + this.$transformHandle.updateTransform(opt); + } + + /** + * 更新zrender尺寸 + * @param {*} opt + */ + updateZrSize(opt) { + this.$transformHandle.updateZrSize(opt); } /** diff --git a/src/jmap/transformHandle.js b/src/jmap/transformHandle.js index 98e3a8637..89828a3bd 100644 --- a/src/jmap/transformHandle.js +++ b/src/jmap/transformHandle.js @@ -77,8 +77,14 @@ class TransformHandle { } // 更新偏移量 - updateTransform(zoom) { - this.transform = createTransform(zoom); + updateTransform(opt) { + this.transform = createTransform(opt); + this.transformAll(); + } + + // 更新画布尺寸 + updateZrSize(opt) { + this.rect = { x: 0, y: 0, width: opt.width, height: opt.height }; this.transformAll(); } } diff --git a/src/views/jmap/index.vue b/src/views/jmap/index.vue index 50acd243f..370f0f834 100644 --- a/src/views/jmap/index.vue +++ b/src/views/jmap/index.vue @@ -6,9 +6,13 @@ import Jmap from '@/jmap/map'; import deviceType from '@/jmap/constant/deviceType'; import { getPublishMapDetail } from '@/api/test.js'; +import WindowResizeHandler from '@/mixin/WindowResizeHandler'; export default { name: 'Jmap', + mixins: [ + WindowResizeHandler + ], data() { return { id: '__jmap__', @@ -46,7 +50,7 @@ export default { this.jmap.on('contextmenu', this.contextmenu); // const list = []; - // for (let i = 1; i < 40; i++) { + // for (let i = 1; i < 10; i++) { // for (let j = 1; j < 1000; j++) { // list.push({ code: `${(Array(3).join(0) + i).slice(-3)}${(Array(3).join(0) + j).slice(-3)}`, lp: { x: 50 + i * 120, y: 50 + j * 20 }, rp: { x: 150 + i * 120, y: 50 + j * 20 } }); // } @@ -56,7 +60,7 @@ export default { getPublishMapDetail('03').then(resp => { this.jmap.load(resp.data); - // this.jmap.setDefaultState(); + this.jmap.setDefaultState(); this.jmap.setLevelVisible([deviceType.Link], false); }); @@ -81,6 +85,9 @@ export default { this.jmap = null; }, methods: { + resizeHandler() { + this.jmap.resize({width: this._clientWidth, height: this._clientHeight}); + }, selected(e) { // console.log('selected', e, this.jmap); },