前言

项目过程中总是会遇到稀奇古怪的需求，这不，咱老大又让我画一个系统拓扑图放在首页，要求部分数据需从后端获取，动态展示在页面上。对于一个后端人猿来说，只能慢慢摸索。不喜勿喷…- -

一、方案选型

由于需求还是比较简单，不需要支持在线画图，不需要工具栏等。所以笔者在这边采用了比较老的js开发工具包JTopo。使用原因主要是因为JTopo比较简单、灵活。其他地方笔者不再赘述，博友们可自行前往官网查看。

JTopo官网：点击查看

二、使用步骤

vue引入JTopo库方案参考 vue使用JTopo

使用方式有两种：一种是将JTopo的官方js库引入到项目中后进行使用；另一种是直接安装JTopo的npm包。

方式一：

进入JTopo官网下载最新的js开发工具包-jtopo-0.4.8-min.js
将下载下来的工具包放在工程目录下。笔者放的位置如下
找到public目录下的index.html，添加如下
demo案例

<template><div style="position: relative; width: 100%; height: 100%; margin: auto" id="topo_content"><canvas id="canvas" width="1400" height="800"></canvas></div>
</template><script>
import userImg1 from "./img/userImg-1.png";
import userImg2 from "./img/userImg-2.png";
import cloudImg from "./img/cloudImg.png";
import serverImg from "./img/server.png";
import emailImg from "./img/email.png";
import dbImg from "./img/db.png";export default {name: "index",data() {return {canvas: null,stage: null,scene: null,containerConsole: null};},computed: {},created() { },mounted() {this.init();},methods: {init() {this.canvas = document.getElementById("canvas");this.stage = new JTopo.Stage(this.canvas);this.stage.eagleEye.visible = false;this.scene = new JTopo.Scene(this.stage);// 用户节点var nodeUser1 = this.newNode("用户", "0,0,0", 80, 80, 40, 40, userImg1, 1, true);var nodeUser2 = this.newNode("用户", "0,0,0", 82, 240, 40, 40, userImg2, 1, true);var nodeCloud = this.newNode("局域网", "0,0,0", 160, 160, 40, 40, cloudImg, 1, true);// 控制台节点this.newNode("127.0.0.1", "0,0,0", 335, 160, 50, 38, serverImg, 1, true);var nodeConsole1 = this.newNode(null, null, 301, 98, 0, 0, null, 0, true);var nodeConsole2 = this.newNode(null, null, 301, 258, 0, 0, null, 0, true);var nodeConsole3 = this.newNode(null, null, 301, 178, 0, 0, null, 0, true);var nodeConsole4 = this.newNode(null, null, 380, 285, 0, 0, null, 0, true);this.newNode(null, null, 418, 170, 0, 0, null, 0, true);this.newNode(null, null, 380, 72, 0, 0, null, 0, true);this.newNode(null, null, 340, 72, 0, 0, null, 0, true);this.newNode(null, null, 336, 286, 0, 0, null, 0, true);this.newNode(null, null, 356, 286, 0, 0, null, 0, true);this.newNode("消息通知", "0,0,0", 200, 84, 20, 20, emailImg, 1, true);this.newNode("消息通知", "0,0,0", 200, 244, 20, 20, emailImg, 1, true);// 数据库节点var nodeDb = this.newNode("DB 127.0.0.1", "0,0,0", 470, 330, 40, 40, dbImg, 1, true);// 直线连接this.newLink(nodeUser1, nodeCloud, null, false);this.newLink(nodeUser2, nodeCloud, null, false);this.newLink(nodeCloud, nodeConsole3, null, true);this.newLink(nodeConsole1, nodeUser1, null, true);this.newLink(nodeConsole2, nodeUser2, null, true);// 折线连接this.newFoldLink(nodeConsole4, nodeDb, "数据读取、存储", true, "vertical");// 容器this.containerConsole = this.newContainer("决策分析系统", -30, null, 300, 72, 120, 216);this.containerConsole.dragable = false;},// 节点 文本,字体颜色,坐标,大小,图片,透明度(0-1, 1为不透明),选中时是否显示表示选中状态的矩形, 文字定位newNode(text, fontColor, x, y, w, h, img, alpha, showSelected, position) {var node = new JTopo.Node(text);node.fontColor = fontColor;node.setLocation(x, y);node.setSize(w, h);if (img != null || img != undefined) {node.setImage(img);} else {node.fillColor = "0,0,0";}if (position != null || position != undefined) {node.textPosition = position;}node.dragable = false;node.showSelected = showSelected;node.alpha = alpha;this.scene.add(node);return node;},// 简单连线 两节点,线条文本,是否需要箭头,虚线(不传代表实线, 传数字-越大虚线间隔越大)newLink(nodeA, nodeZ, text, isArrow, dashedPattern) {var link = new JTopo.Link(nodeA, nodeZ, text);link.fontColor = "0,0,0";if (isArrow) {link.arrowsRadius = 8; //箭头大小}link.lineWidth = 2; // 线宽link.dashedPattern = dashedPattern; // 虚线link.bundleOffset = 60; // 折线拐角处的长度link.bundleGap = 20; // 线条之间的间隔link.textOffsetY = 3; // 文本偏移量（向下3个像素）link.strokeColor = "0,200,255";this.scene.add(link);return link;},// 折线newFoldLink(nodeA, nodeZ, text, isArrow, direction, dashedPattern) {var link = new JTopo.FoldLink(nodeA, nodeZ, text);link.direction = direction || "horizontal";link.fontColor = "0,0,0";if (isArrow) {link.arrowsRadius = 8; //箭头大小}link.lineWidth = 2; // 线宽link.bundleOffset = 60; // 折线拐角处的长度link.bundleGap = 20; // 线条之间的间隔link.textOffsetY = 3; // 文本偏移量（向下3个像素）link.strokeColor = "0,200,255";link.dashedPattern = dashedPattern;this.scene.add(link);return link;},// 容器 文本,文本位置,布局,边界-x, y为左上角坐标,w, h为宽度和高度newContainer(text, position, layout, x, y, w, h) {var container = new JTopo.Container(text);if (text != null || text != undefined) {container.textOffsetY = position;container.fontColor = "0,0,0";container.font = "10pt 微软雅黑";}if (layout != null || layout != undefined) {container.layout = layout;}container.fillColor = "192,192,192";container.setBound(x, y, w, h);container.dragble = false;this.scene.add(container);return container;}},
};
</script><style scoped>
</style>

效果图：
在这里插入图片描述

方式二：

执行命令npm i jtopo-in-node，jtopo-in-node链接：点击这里
导入jtopo-in-node模块使用即可

三、总结

~注意啦：~
上述方式一本地npm run dev后是正常的，但是上到服务器测试环境后页面啥也没有，打开F12后发现JTopo 为undefined；而方式二是正常的。由于笔者学识浅薄，若有哪位大佬知道原因，还请告知一二，笔者在此感激不敬！！！
以上便是笔者对JTopo在vue中使用的总结，希望对博友们有点帮助。