joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改代码

Browse Source
This commit is contained in:
ival 2019-07-25 18:25:04 +08:00
parent 06f45dd0cb
commit 58911eef1a
4 changed files with 56 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/jmap/map.js
View File

@ -17,7 +17,7 @@ class Jlmap {
this.methods = opts.methods;
// 鼠标事件
this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu'};
this.events = { __Pan: 'pan', __Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu', DataZoom: 'dataZoom'};
// 原始数据
this.data = {};
@ -44,18 +44,18 @@ 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.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$options);
this.optionsHandler = this.setDataZoom.bind(this);
this.optionsHandler = this.setOptions.bind(this);
this.$mouseController = new MouseController(this);
this.$mouseController.enable();
this.$mouseController.on(this.events.Pan, this.optionsHandler);
this.$mouseController.on(this.events.Zoom, this.optionsHandler);
this.$mouseController.on(this.events.__Pan, this.optionsHandler);
this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
}
loadStyle(skinStyle) {
@ -77,7 +77,9 @@ class Jlmap {
setMap(map) {
// 保存皮肤类型
if (map.skinVO) {
this.skinStyle = map.skinVO.code;
}
// 保存原始数据
this.data = map;
@ -89,13 +91,13 @@ class Jlmap {
this.mapDevice = parser(map, this);
// 数据加载完成 回调
if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(); }
if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.mapDevice); }
// 初次渲染视图
this.$painter.repaint(this.mapDevice);
// 视图加载完成 回调
if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(); }
if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.mapDevice); }
}
setDefaultState() {
@ -109,10 +111,10 @@ class Jlmap {
this.update(list);
if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(); }
if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(list); }
}
setDataZoom(opts) {
setOptions(opts) {
const options = this.pullBack(opts);
this.$options.update(options);
this.$painter.updateTransform(this.$options);
@ -131,7 +133,7 @@ class Jlmap {
if (device && device.instance) {
var rect = createBoundingRect(device.instance);
var dcenter = calculateDCenter(rect, { width: this._zr.getWidth(), height: this._zr.getHeight() });
this._options.setDataZoom(dcenter);
this._options.setOptions(dcenter);
}
}
@ -158,7 +160,7 @@ class Jlmap {
}
});
if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(); }
if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); }
}
update(list) {
@ -174,7 +176,7 @@ class Jlmap {
}
});
if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(); }
if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
}
pullBack(payload) {
@ -294,9 +296,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;
}
}
}
@ -311,8 +313,9 @@ 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);
break;
}
}
}

4
src/jmap/mouseController.js
View File

@ -105,7 +105,7 @@ class MouseController extends Eventful {
this._preventDefaultMouseMove && eventTool.stop(e.event);
this.trigger(this.events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
}
mouseup(e) {
@ -133,7 +133,7 @@ class MouseController extends Eventful {
scale = -1;
}
this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
this.trigger(this.events.__Zoom, {type: 'zoom', scale, originX, originY });
}
}

6
src/jmap/options.js
View File

@ -1,5 +1,5 @@
class Options {
constructor(opts) {
constructor(opts, trigger) {
this.scaleIndex = 0;
this.scaleList = [
0.5, 0.6, 0.7, 0.8, 0.9,
@ -35,6 +35,8 @@ class Options {
this.zoomOnMouseWheel = false;
this.preventDefaultMouseMove = true;
this.trigger = trigger;
}
update(payload) {
@ -81,6 +83,8 @@ class Options {
if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
}
if (this.trigger instanceof Function) { this.trigger(this); }
}
getScaleRate(scale) {

47
src/views/jlmap/index.vue
View File

@ -137,15 +137,16 @@ export default {
offsetY: 0
},
methods: {
dataLoaded: this.onDataLoaded,
viewLoaded: this.onViewLoaded,
stateLoaded: this.onStateLoaded,
viewUpdate: this.onViewUpdate,
stateUpdate: this.onStateUpdate,
optionsUpdate: this.onOptionsUpdate
dataLoaded: this.handleDataLoaded,
viewLoaded: this.handleViewLoaded,
stateLoaded: this.handleStateLoaded,
viewUpdate: this.handleViewUpdate,
stateUpdate: this.handleStateUpdate,
optionsUpdate: this.handleOptionsUpdate
}
});
this.$jlmap.on('dataZoom', this.onDataZoom, this);
this.$jlmap.on('selected', this.onSelected, this);
this.$jlmap.on('contextmenu', this.onContextMenu, this);
@ -182,30 +183,36 @@ export default {
this.$jlmap && this.$jlmap.setCenter(deviceCode);
},
// 地图数据加载完成
onDataLoaded() {
handleDataLoaded() {
console.log('dataloaded');
},
// 地图视图加载完成
onViewLoaded() {
this.mapViewLoaded(true);
handleViewLoaded() {
console.log('viewLoaded');
this.mapViewLoaded(false);
},
// 地图状态加载完成
onStateLoaded() {
this.mapViewLoaded(true);
handleStateLoaded() {
console.log('stateLoaded');
this.mapViewLoaded(false);
},
// 地图视图更新
onViewUpdate() {
handleViewUpdate() {
console.log('viewUpdate');
},
// 地图状态更新
onStateUpdate() {
handleStateUpdate() {
console.log('stateUpdate');
},
// 视图缩放更新
onOptionsUpdate(options) {
this.dataZoom.offsetX = options.offsetX.toFixed(1) + '';
this.dataZoom.offsetY = options.offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = options.scaleRate + '';
// 视图参数改变
handleOptionsUpdate(options) {
console.log('optionsUpdate');
},
// 视图缩放事假
onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom.scaleRate + '';
const skinStyle = this.$store.state.map.map.skinStyle;
if (skinStyle) {
@ -260,11 +267,11 @@ export default {
},
// 缩小
setShrink() {
this.$jlmap.setDataZoom({scale: -1});
this.$jlmap.setOptions({scale: -1});
},
// 放大
setMagnify() {
this.$jlmap.setDataZoom({scale: 1});
this.$jlmap.setOptions({scale: 1});
}
}
};