update

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts

 import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {TopologyService} from '../topology.service';
-import {NzMessageService, NzModalService} from 'ng-zorro-antd';
+import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
 import {DomSanitizer} from '@angular/platform-browser';
 import * as $ from 'jquery';
 import {TopologyComponent} from '../model/topology/topology.component';
@@ -58,13 +58,13 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
     topoType = '只读模式';
 
     checkJson = [];
+    fileList: UploadFile[] = [];
 
     constructor(private topologySer: TopologyService, private message: NzMessageService,
                 private sanitizer: DomSanitizer, private modalSer: NzModalService) {
     }
 
     ngOnInit() {
-        this.loadCanvas();
         this.getList();
     }
 
@@ -73,6 +73,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
             let element = layui.element;
             element.init();
         });
+        this.loadCanvas();
     }
 
     //新增拓扑图
@@ -299,4 +300,45 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         editor.loadTopology('', 'img/backimg.png');
     }
 
+    //添加图片-----start
+    showAddImg(){
+        this.isVisible = true;
+    }
+
+    beforeUpload = (file: UploadFile): boolean => {
+        const isLt2M = file.size / 1024  < 300;
+        if (!isLt2M) {
+            this.message.error('图标必须小于300kb!');
+        }else{
+            this.fileList.push(file);
+        }
+        return false;
+    };
+
+    handleCancel(){
+        this.isVisible = false;
+    }
+
+    handleOk(){
+        if(this.fileList.length == 0){
+            this.message.error("请选择图片");
+            return false;
+        }
+        const formData = new FormData();
+        this.fileList.forEach((file:any)=>{
+            formData.append('file',file);
+        })
+        this.topologySer.addPic(formData).subscribe(
+            (res)=>{
+                if(res.errCode == 10000){
+                    this.isVisible = false;
+                    editor.utils.addNode(res.data,'text');
+                }else{
+                    this.message.error("添加失败")
+                }
+            }
+        )
+    }
+//    end
+
 }

src/main/webapp/app/netTopology/topology.service.ts

@@ -68,4 +68,9 @@ export class TopologyService {
     findDefaultIcon(data): Observable<any> {
         return this.http.post(SERVER_API_URL + '/icon/findDefaultIcon',data);
     }
+
+    //添加图片
+    addPic(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/sysmapJson/addPic',data);
+    }
 }

src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js

@@ -1071,7 +1071,8 @@ editor.utils = {
         var node = new JTopo.Node()
         node.fontColor = editor.config.nodeFontColor
         // 节点坐标
-        node.setBound(20, 20, 50, 50)
+        node.setBound(320, -200, 50, 50);
+        console.log(node);
         // 默认节点图片
         node.setImage(topoImgPath + img)
         // 节点数据