修改代码
This commit is contained in:
ival
parent
fcd9f7dad4
commit
9bdd8e15c5
@ -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();
|
||||
}
|
||||
|
||||
@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user