<!-- 画板 --> <template> <div ref="basetopu3" class="base-topu"> <canvas id="floor_topu3" :width="canvasWidth" :height="canvasHeight" tabindex="0" ></canvas> </div> </template> <script> import { SGraphScene } from "@persagy-web/graph"; // 替换 FloorView import { FloorView } from "./FloorView"; import { PTopoParser } from "./PTopoParser"; import axios from "axios"; export default { data() { return { canvasWidth: 0, // 画布的宽 canvasHeight: 0, // 画布的高 view: null, // 视图 view scene: null, // 场景类 }; }, methods: { // 初始化 init() { this.clearImg(); this.view ? (this.view.scene = this.scene) : null; // 获取压缩包数据并解压 this.getMapBlob(); }, // 请求获取地图的压缩包 getMapBlob() { const obj = { graphId: "2dd925178d164a96941c34326ad340e8", id: "376f578716fb48febe8fb291b527169f", }; // 请求头上加 projectId axios.interceptors.request.use( (config) => { config.headers = { projectId: "Pj1101050029", //项目id }; return config; }, (error) => { return Promise.reject(error); } ); axios.post("/labsl/graph/pub/read", obj).then((res) => { this.getDataSuc(res); }); }, // 读图成功回调 getDataSuc(res) { if (res.data.result == "failure") return; const parse = new PTopoParser(); // 获取数据解析数据再将转化得实例添加到场景中 parse.parseData(res.data.content.elements); parse.markers.forEach((item) => { item.moveable = false; this.scene.addItem(item); }); parse.nodes.forEach((item) => { item.moveable = false; // 相关事件触发 item.connect("onMouseDown", this, this.onMousedown); item.connect("onMouseUp", this, this.onMouseup); item.connect("onMouseLeave", this, this.onMouseleave); item.connect("onMouseEnter", this, this.onMouseenter); this.scene.addItem(item); }); parse.relations.forEach((t) => { t.moveable = false; this.scene.addItem(t); }); this.view.fitSceneToView(); }, // 鼠标点击事件 onMousedown(item, e) { console.log("鼠标按下!", item, e); this.$emit("onMousedown", item, e); }, // 鼠标抬起事件 onMouseup(item, e) { console.log("鼠标抬起!", item, e); }, // 鼠标事件移入 onMouseenter(item, e) { console.log("鼠标移入!", item, e); }, // 鼠标事件移出 onMouseleave(item, e) { console.log("鼠标移出!", item, e); }, // 清空画布 clearImg() { this.scene = new SGraphScene(); if (this.view) { this.view.update(); } }, }, created() { this.clearImg(); }, mounted() { // 获取 canvas 的宽高 this.canvasWidth = 800; this.canvasHeight = 600; // 初始化场景类 this.view = new FloorView("floor_topu3"); if (this.scene) { this.view.scene = this.scene; } this.init(); }, }; </script> <style lang="less" scoped> .base-topu { width: 100%; height: 100%; position: relative; } </style>