Vue+JTopo（一）

1.下载js

jtopo 更新下载

(不知道为什么网站被封禁了……在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js)

链接：https://pan.baidu.com/s/18V1HKwAuxzWM19RD4axGOg 
提取码：0304

2.引用

        文件放在public/js文件夹下，在index.hml内引用。

<script src="./js/jtopo-1.4.4_trial-esm-min.js"></script>

3.初测试使用

<template>
  <div style="width:100%;height:100%;overflow: hidden;" id="topo_content">
    <div id="divId" style="height:109%;width:100%;"></div>
  </div>
</template>
<script>
//获取标题高度
export default {
  name: 'index',
  components:{},
  data () {
    return {
      stage: null,
      layer:null,
      nodes:[]
    }
  },
  mounted(){
    this.init();
  },
  methods:
  {
    init(){
      this.stage = new jtopo.Stage('divId');
      this.layer = new jtopo.Layer('default');
      this.stage.addChild(this.layer);
      
      var nodeImg = require('../../../assets/img/map/nodeB.png')
      var sectorImg = require('../../../assets/img/map/sector.jpg')
      var cellImg = require('../../../assets/img/map/cell.png')

      // 创建节点,线条
      var nodeB = this.createNode("基站", "0,0,0", [], 40, 40,nodeImg);
      var sector01 = this.createNode("扇区01", "0,0,0", [], 40, 40,sectorImg);
      var link = this.createFoldLink(nodeB, sector01, "", true, "horizontal",'0,0,0');

      var sector02 = this.createNode("扇区02", "0,0,0", [], 40, 40,sectorImg);
      var link2 = this.createFoldLink(nodeB, sector02, "", true, "horizontal",'0,0,0');

      var sector03 = this.createNode("扇区03", "0,0,0", [], 40, 40,sectorImg);
      var link3 = this.createFoldLink(nodeB, sector03, "", true, "horizontal",'0,0,0');

      var cell01 = this.createNode("小区01", "0,0,0", [], 40, 40,cellImg);
      var link4 = this.createFoldLink(sector01, cell01, "", true, "horizontal",'0,0,0');
      var cell02 = this.createNode("小区02", "0,0,0", [], 40, 40,cellImg);
      var link5 = this.createFoldLink(sector02, cell02, "", true, "horizontal",'0,0,0');
      var cell03 = this.createNode("小区03", "0,0,0", [], 40, 40,cellImg);
      var link6 = this.createFoldLink(sector03, cell03, "", true, "horizontal",'0,0,0');

      //树形布局
      var treeLayout = new jtopo.TreeLayout('down', 200, 180);
      treeLayout.doLayout(this.nodes);

      // 按画布居中
      this.stage.translateToCenter();

      this.stage.show();
    },
    //创建节点
    // textValue 节点文本内容
    // fontColor 字体颜色
    // nodePosition 节点坐标位置 [x,y] 树形布局下坐标位置无用
    // width 节点宽度
    // height 节点高度
    // imageSrc 设置的图片路径
    createNode(textValue, fontColor, nodePos, width, height, imageSrc) {
      var newNode = new jtopo.Node(textValue,nodePos[0], nodePos[1],width, height);
      newNode.fontColor = fontColor;
      if (imageSrc != null || imageSrc != undefined) {
        newNode.setImage(imageSrc);
      } else {
        newNode.fillColor = "0,0,0";
      }
      newNode.textOffsetY = 3;//文本向下偏移些
      newNode.draggable = false;//是否支持拖拽
      newNode.showSelected = false;//节点点击是否显示选中状态
      this.layer.addChild(newNode);
      this.nodes.push(newNode)
      return newNode;
    },
    // 创建折线
    // nodeStart nodeEnd 节点
    // textValue 折线上文本
    // isArrow 是否有箭头
    // direction 方向，有垂直、水平两种 取值为：'horizontal' 或者 'vertical' ，默认为 'horizontal'
    // strokeColor 线条颜色
    // dashedPattern 虚线 不传代表实线, 传数字-越大虚线间隔越大
    createFoldLink(nodeStart, nodeEnd, textValue, isArrow, direction,strokeColor,dashedPattern) {
      var link = new jtopo.FoldLink(textValue,nodeStart, nodeEnd);
      link.direction = direction || "horizontal";
      link.fontColor = "0,0,0";
      link.lineWidth = 2; // 线宽
      link.textOffsetY = 23; // 文本偏移量（向下23个像素）
      link.strokeColor = strokeColor;
      link.dashedPattern = dashedPattern; // 虚线
      this.layer.addChild(link);
      this.nodes.push(link)
      return link;
    },
  }
}
</script>