修改代码
This commit is contained in:
ival
parent
83c6fccfc9
commit
a95bf7c338
@ -17,7 +17,7 @@ class Jlmap {
|
||||
this.methods = opts.methods;
|
||||
|
||||
// 鼠标事件
|
||||
this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu', Datazoom: 'datazoom' };
|
||||
this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu'};
|
||||
|
||||
// 原始数据
|
||||
this.data = {};
|
||||
@ -44,12 +44,12 @@ class Jlmap {
|
||||
|
||||
this.$zr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
|
||||
|
||||
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), this.events); // 缩放
|
||||
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
|
||||
this.$painter = new Painter(this);
|
||||
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
|
||||
this.$painter.updateTransform(this.$options);
|
||||
|
||||
this.optionsHandler = this.setOptions.bind(this);
|
||||
this.optionsHandler = this.setDataZoom.bind(this);
|
||||
|
||||
this.$mouseController = new MouseController(this);
|
||||
this.$mouseController.enable();
|
||||
@ -130,7 +130,7 @@ class Jlmap {
|
||||
return payload || {};
|
||||
}
|
||||
|
||||
setOptions(opts) {
|
||||
setDataZoom(opts) {
|
||||
const options = this.pullBack(opts);
|
||||
this.$options.update(options);
|
||||
this.$painter.updateTransform(this.$options);
|
||||
@ -141,7 +141,7 @@ class Jlmap {
|
||||
this.$mouseController.enable(opts);
|
||||
}
|
||||
|
||||
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
|
||||
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(this.$options); }
|
||||
}
|
||||
|
||||
setCenter(deviceCode) {
|
||||
@ -264,7 +264,6 @@ class Jlmap {
|
||||
|
||||
resize(opt) {
|
||||
this.$zr.resize(opt);
|
||||
// this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
|
||||
this.$painter.updateZrSize(opt);
|
||||
}
|
||||
|
||||
@ -299,9 +298,9 @@ class Jlmap {
|
||||
case this.events.Contextmenu:
|
||||
this.$mouseController.on(this.events.Contextmenu, cb, context);
|
||||
break;
|
||||
case this.events.Datazoom:
|
||||
this.$mouseController.on(this.events.Datazoom, cb, context);
|
||||
break;
|
||||
// case this.events.Datazoom:
|
||||
// this.$mouseController.on(this.events.Datazoom, cb, context);
|
||||
// break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -316,8 +315,8 @@ class Jlmap {
|
||||
case this.events.Contextmenu:
|
||||
this.$mouseController.off(this.events.Contextmenu, cb);
|
||||
break;
|
||||
case this.events.Datazoom:
|
||||
this.$mouseController.off(this.events.Datazoom, cb);
|
||||
// case this.events.Datazoom:
|
||||
// this.$mouseController.off(this.events.Datazoom, cb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,6 +154,10 @@ class MouseController extends Eventful {
|
||||
checkEvent(e) {
|
||||
return new EventModel(e);
|
||||
}
|
||||
|
||||
updateDatazoom(zoom) {
|
||||
this.trigger(this.events.Datazoom, zoom);
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseController;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
class Options {
|
||||
constructor(opts, events) {
|
||||
constructor(opts) {
|
||||
this.scaleIndex = 0;
|
||||
this.scaleList = [
|
||||
0.5, 0.6, 0.7, 0.8, 0.9,
|
||||
@ -35,8 +35,6 @@ class Options {
|
||||
this.zoomOnMouseWheel = false;
|
||||
|
||||
this.preventDefaultMouseMove = true;
|
||||
|
||||
this.events = events;
|
||||
}
|
||||
|
||||
update(payload) {
|
||||
@ -83,8 +81,6 @@ class Options {
|
||||
if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
|
||||
this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
|
||||
}
|
||||
|
||||
this.trigger(this.events.Datazoom, this);
|
||||
}
|
||||
|
||||
getScaleRate(scale) {
|
||||
|
||||
@ -7,6 +7,7 @@ import config from './modules/config';
|
||||
import permission from './modules/permission';
|
||||
import map from './modules/map';
|
||||
import training from './modules/training';
|
||||
import menuOperation from './modules/menuoperation';
|
||||
import getters from './getters';
|
||||
|
||||
Vue.use(Vuex);
|
||||
@ -19,7 +20,8 @@ const store = new Vuex.Store({
|
||||
permission,
|
||||
config,
|
||||
map,
|
||||
training
|
||||
training,
|
||||
menuOperation
|
||||
},
|
||||
getters
|
||||
});
|
||||
|
||||
168
src/store/modules/menuoperation.js
Normal file
168
src/store/modules/menuoperation.js
Normal file
@ -0,0 +1,168 @@
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
|
||||
/**
|
||||
* 菜单操作状态数据
|
||||
*/
|
||||
const menuOperation = {
|
||||
namespaced: true,
|
||||
|
||||
state: {
|
||||
break: false, // 对话框菜单是否弹出（用于中断控制）
|
||||
mbmpCount: 0, // 地图按钮菜单位置变更标识
|
||||
buttonOperation: null, // 按钮菜单是否被按下
|
||||
selected: {}, // 选中的地图对象
|
||||
selectedCount: 0, // 选中对象变更标识
|
||||
menu: null, // 弹出菜单设备
|
||||
menuPosition: {}, // 弹出菜单位置
|
||||
menuCount: 0, // 弹出菜单变更标识
|
||||
menuParam: '', // 弹出菜单参数
|
||||
magnifyCount: 0, // 地图放大比例标识
|
||||
shrinkCount: 0 // 地图缩小比例标识
|
||||
},
|
||||
|
||||
getters: {
|
||||
selected: (state) => {
|
||||
return state.selected;
|
||||
},
|
||||
mbmpCount: (state) => {
|
||||
return state.mbmpCount;
|
||||
},
|
||||
menuParam: (state) => {
|
||||
return state.menuParam;
|
||||
},
|
||||
buttonOperation: (state) => {
|
||||
return state.buttonOperation;
|
||||
},
|
||||
checkDialogIsOpen: (state) => (menu) => {
|
||||
return state.menu == menu;
|
||||
}
|
||||
},
|
||||
|
||||
mutations: {
|
||||
reset: (state) => {
|
||||
state.menu = null;
|
||||
state.selected = null;
|
||||
state.menuPosition = {};
|
||||
state.buttonOperation = null;
|
||||
},
|
||||
doBreak: (state, editStatus) => {
|
||||
if (!state.break) {
|
||||
state.break = true;
|
||||
if (editStatus != TrainingMode.EDIT) {
|
||||
state.menuCount += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
doAccess: (state) => {
|
||||
if (state.break) {
|
||||
state.break = false;
|
||||
state.menuCount += 1;
|
||||
}
|
||||
},
|
||||
setButtonOperation: (state, operation) => {
|
||||
state.buttonOperation = operation;
|
||||
},
|
||||
setSelected: (state, selected) => {
|
||||
state.selected = selected;
|
||||
state.selectedCount += 1;
|
||||
},
|
||||
mbmpCountIncrement: (state) => {
|
||||
state.mbmpCount += 1;
|
||||
},
|
||||
setMenu: (state, menu) => {
|
||||
state.menu = menu;
|
||||
state.menuCount += 1;
|
||||
},
|
||||
setMenuParam: (state, param) => {
|
||||
state.menuParam = param;
|
||||
},
|
||||
setMenuPosition: (state, position) => {
|
||||
state.menuPosition = position;
|
||||
},
|
||||
setMenuPositionOffset: (state, offset) => {
|
||||
if (state.menuPosition) {
|
||||
state.menuPosition = {
|
||||
x: state.menuPosition.x + offset.x,
|
||||
y: state.menuPosition.y + offset.y
|
||||
};
|
||||
}
|
||||
},
|
||||
setMagnifyCount: (state) => {
|
||||
state.magnifyCount += 1;
|
||||
},
|
||||
setShrinkCount: (state) => {
|
||||
state.shrinkCount += 1;
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 放大地图
|
||||
*/
|
||||
handleMagnifyCount: ({ commit }) => {
|
||||
commit('setMagnifyCount');
|
||||
},
|
||||
|
||||
/**
|
||||
* 缩小地图
|
||||
*/
|
||||
handleShrinkCount: ({ commit }) => {
|
||||
commit('setShrinkCount');
|
||||
},
|
||||
|
||||
/** 清除菜单操作*/
|
||||
reset: ({ commit }) => {
|
||||
commit('reset');
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理操作是否中断
|
||||
*/
|
||||
handleBreakFlag: ({ commit, rootState }, payLoad) => {
|
||||
if (rootState.training.mode === TrainingMode.EDIT && rootState.training.started && payLoad && payLoad.break) {
|
||||
commit('doBreak', rootState.training.mode);
|
||||
} else {
|
||||
commit('doAccess');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 地图按钮菜单位置改变事件
|
||||
*/
|
||||
mbmPositionChange: ({ commit }) => {
|
||||
commit('mbmpCountIncrement');
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置按钮菜单按钮
|
||||
*/
|
||||
setButtonOperation: ({ commit }, operation) => {
|
||||
commit('setButtonOperation', operation);
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置选中model
|
||||
*/
|
||||
setSelected: ({ commit }, selected) => {
|
||||
commit('setSelected', selected);
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置菜单
|
||||
*/
|
||||
setPopMenu: ({ commit }, payLoad) => {
|
||||
commit('setMenu', payLoad.menu);
|
||||
commit('setMenuParam', payLoad.param);
|
||||
commit('setMenuPosition', payLoad.position);
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新坐标
|
||||
*/
|
||||
setMenuPositionOffset: ({ commit }, offset) => {
|
||||
commit('setMenuPositionOffset', offset);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default menuOperation;
|
||||
@ -156,11 +156,10 @@
|
||||
stateUpdate() {
|
||||
console.log('stateUpdate');
|
||||
},
|
||||
optionsUpdate() { console.log('optionsUpdate'); }
|
||||
optionsUpdate: this.onDataZoom
|
||||
}
|
||||
});
|
||||
|
||||
this.$jlmap.on('datazoom', this.onDataZoom, this);
|
||||
this.$jlmap.on('selected', this.onSelected, this);
|
||||
this.$jlmap.on('contextmenu', this.onContextMenu, this);
|
||||
|
||||
@ -213,9 +212,9 @@
|
||||
},
|
||||
// 监听缩放事件
|
||||
onDataZoom(dataZoom) {
|
||||
this.dataZoom.offsetX = dataZoom._offsetX.toFixed(1) + '';
|
||||
this.dataZoom.offsetY = dataZoom._offsetY.toFixed(1) + '';
|
||||
this.dataZoom.scaleRate = dataZoom._scaleRate + '';
|
||||
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
|
||||
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
|
||||
this.dataZoom.scaleRate = dataZoom.scaleRate + '';
|
||||
|
||||
let skinStyle = this.$store.state.map.map.skinStyle;
|
||||
if (skinStyle) {
|
||||
@ -228,7 +227,6 @@
|
||||
localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param)); // 保存缩放倍数
|
||||
}
|
||||
|
||||
this.$store.dispatch('map/updateZoom', this.dataZoom);
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
// 点击选择事件
|
||||
@ -271,11 +269,11 @@
|
||||
},
|
||||
// 缩小
|
||||
setShrink() {
|
||||
this.$jlmap.setOptions({scale: -1});
|
||||
this.$jlmap.setDataZoom({scale: -1});
|
||||
},
|
||||
// 放大
|
||||
setMagnify() {
|
||||
this.$jlmap.setOptions({scale: 1});
|
||||
this.$jlmap.setDataZoom({scale: 1});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user