|
@@ -34,6 +34,7 @@ export default {
|
|
|
view: null, // 视图 view
|
|
|
enlarge_view: null, //鹰眼图
|
|
|
scene: null, // 场景类
|
|
|
+ scene_enlarge: null, //鹰眼场景
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -41,7 +42,7 @@ export default {
|
|
|
init() {
|
|
|
this.clearImg();
|
|
|
this.view ? (this.view.scene = this.scene) : null;
|
|
|
- this.enlarge_view ? (this.enlarge_view.scene = this.scene) : null;
|
|
|
+ this.enlarge_view ? (this.enlarge_view.scene = this.scene_enlarge) : null;
|
|
|
// 获取压缩包数据并解压
|
|
|
this.getMapBlob();
|
|
|
},
|
|
@@ -100,11 +101,17 @@ export default {
|
|
|
return obj;
|
|
|
});
|
|
|
}
|
|
|
+ // 生成大图解析器
|
|
|
const parse = new PTopoParser();
|
|
|
parse.factory = new topuFactory();
|
|
|
- // 获取数据解析数据再将转化得实例添加到场景中
|
|
|
+ // 生成鹰眼图解析器
|
|
|
+ const parse_enlargee = new PTopoParser();
|
|
|
+ parse_enlargee.factory = new topuFactory();
|
|
|
|
|
|
+ // 获取数据解析数据再将转化得实例添加到场景中
|
|
|
parse.parseData(data.content.elements);
|
|
|
+ parse_enlargee.parseData(data.content.elements);
|
|
|
+
|
|
|
parse.markers.forEach((item) => {
|
|
|
item.moveable = false;
|
|
|
this.scene.addItem(item);
|
|
@@ -115,25 +122,42 @@ export default {
|
|
|
item.setEquipName();
|
|
|
item.setStatusPointColor("#7ed321");
|
|
|
}
|
|
|
-
|
|
|
// 相关事件触发
|
|
|
item.connect("onMouseDown", this, this.onMousedown);
|
|
|
item.connect("onMouseUp", this, this.onMouseup);
|
|
|
item.connect("onMouseLeave", this, this.onMouseleave);
|
|
|
item.connect("onMouseEnter", this, this.onMouseenter);
|
|
|
- // 监听放大视图中滚轮放缩事件, wheelScale 是回调
|
|
|
- this.view.connect("onMouseWheel", this, this.wheelScale);
|
|
|
- // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
|
|
|
- this.view.connect("leftMove", this, this.midMouseMove);
|
|
|
- // 监听标准视图的事件, 回调函数是 mouseMove
|
|
|
- this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
|
|
|
this.scene.addItem(item);
|
|
|
-
|
|
|
});
|
|
|
parse.relations.forEach((t) => {
|
|
|
t.moveable = false;
|
|
|
this.scene.addItem(t);
|
|
|
});
|
|
|
+
|
|
|
+ // 鹰眼图 获取数据解析数据再将转化得实例添加到场景中
|
|
|
+ parse_enlargee.markers.forEach((item) => {
|
|
|
+ item.moveable = false;
|
|
|
+ this.scene_enlarge.addItem(item);
|
|
|
+ });
|
|
|
+ parse_enlargee.nodes.forEach((item) => {
|
|
|
+ item.moveable = false;
|
|
|
+ // 隐藏信息点名称
|
|
|
+ let msgList = item.getMsgList().forEach((t) => {
|
|
|
+ t.visible = false;
|
|
|
+ });
|
|
|
+ this.scene_enlarge.addItem(item);
|
|
|
+ });
|
|
|
+ parse_enlargee.relations.forEach((t) => {
|
|
|
+ t.moveable = false;
|
|
|
+ this.scene_enlarge.addItem(t);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听放大视图中滚轮放缩事件, wheelScale 是回调
|
|
|
+ this.view.connect("onMouseWheel", this, this.wheelScale);
|
|
|
+ // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
|
|
|
+ this.view.connect("leftMove", this, this.midMouseMove);
|
|
|
+ // 监听标准视图的事件, 回调函数是 mouseMove
|
|
|
+ this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
|
|
|
setTimeout(() => {
|
|
|
// 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
|
|
|
const scale = this.canvasHeight / 150;
|
|
@@ -146,7 +170,6 @@ export default {
|
|
|
},
|
|
|
// 鼠标点击事件
|
|
|
onMousedown(item, e) {
|
|
|
- console.log("鼠标按下!", item, e);
|
|
|
this.$emit("onMousedown", item, e);
|
|
|
},
|
|
|
// 放大视图 滚轮放缩事件回调
|
|
@@ -201,6 +224,7 @@ export default {
|
|
|
// 清空画布
|
|
|
clearImg() {
|
|
|
this.scene = new SGraphScene();
|
|
|
+ this.scene_enlarge = new SGraphScene();
|
|
|
if (this.view) {
|
|
|
this.view.update();
|
|
|
}
|
|
@@ -218,10 +242,11 @@ export default {
|
|
|
this.canvasHeight = 600;
|
|
|
// 初始化场景类
|
|
|
this.view = new FloorView("floor_topu9");
|
|
|
+ // 初始化鹰眼场景类
|
|
|
this.enlarge_view = new EagleView("enlarge"); // 小图
|
|
|
if (this.scene) {
|
|
|
this.view.scene = this.scene;
|
|
|
- this.enlarge_view.scene = this.scene;
|
|
|
+ this.enlarge_view.scene = this.scene_enlarge;
|
|
|
}
|
|
|
this.init();
|
|
|
},
|