Browse Source

新增绘制业务空间接口及其业务

YaolongHan 4 years ago
parent
commit
a4a127504e
44 changed files with 5028 additions and 140 deletions
  1. 5 0
      src/api/public.js
  2. 212 140
      src/components/floorMap/index.vue
  3. 593 0
      src/components/mapClass/EditScence.js
  4. 626 0
      src/components/mapClass/EditScence.ts
  5. 626 0
      src/components/mapClass/SPolygonItem.js
  6. 680 0
      src/components/mapClass/SPolygonItem.ts
  7. 23 0
      src/components/mapClass/until.js
  8. 27 0
      src/components/mapClass/until.ts
  9. 16 0
      src/lib/enums/SGraphElementType.js
  10. 15 0
      src/lib/enums/SGraphElementType.ts
  11. 14 0
      src/lib/enums/SLineStyle.js
  12. 13 0
      src/lib/enums/SLineStyle.ts
  13. 14 0
      src/lib/enums/SMarkerType.js
  14. 13 0
      src/lib/enums/SMarkerType.ts
  15. 54 0
      src/lib/items/SImageLegendItem.js
  16. 62 0
      src/lib/items/SImageLegendItem.ts
  17. 36 0
      src/lib/items/SImageMarkerItem.js
  18. 44 0
      src/lib/items/SImageMarkerItem.ts
  19. 155 0
      src/lib/items/SImgTextItem.js
  20. 173 0
      src/lib/items/SImgTextItem.ts
  21. 47 0
      src/lib/items/SLineLegendItem.js
  22. 55 0
      src/lib/items/SLineLegendItem.ts
  23. 52 0
      src/lib/items/SLineMarkerItem.js
  24. 61 0
      src/lib/items/SLineMarkerItem.ts
  25. 22 0
      src/lib/items/SNoneLegendItem.js
  26. 28 0
      src/lib/items/SNoneLegendItem.ts
  27. 92 0
      src/lib/items/STextMarkerItem.js
  28. 99 0
      src/lib/items/STextMarkerItem.ts
  29. 154 0
      src/lib/items/SZoneLegendItem.js
  30. 163 0
      src/lib/items/SZoneLegendItem.ts
  31. 133 0
      src/lib/items/TipelineItem.js
  32. 144 0
      src/lib/items/TipelineItem.ts
  33. 120 0
      src/lib/parsers/STopologyParser.js
  34. 126 0
      src/lib/parsers/STopologyParser.ts
  35. 19 0
      src/lib/types/Anchor.js
  36. 35 0
      src/lib/types/Anchor.ts
  37. 19 0
      src/lib/types/ElementData.js
  38. 36 0
      src/lib/types/ElementData.ts
  39. 19 0
      src/lib/types/Legend.js
  40. 61 0
      src/lib/types/Legend.ts
  41. 19 0
      src/lib/types/Marker.js
  42. 49 0
      src/lib/types/Marker.ts
  43. 19 0
      src/lib/types/Relation.js
  44. 55 0
      src/lib/types/Relation.ts

+ 5 - 0
src/api/public.js

@@ -36,3 +36,8 @@ export function queryRead({ postParams }) {
 export function updateRead({ postParams }) {
     return httputils.postJson(`/serve/topology-wanda/graph/updateNote`, postParams)
 }
+
+//查询系统图展示所需数据 --平面图业务数据
+export function readGroup(postParams) {
+    return httputils.fetchJson(`/serve/topology-wanda/graph/read`, postParams)
+}

+ 212 - 140
src/components/floorMap/index.vue

@@ -1,155 +1,227 @@
 <!-- 底图 -->
 <template>
-    <div id='floor_base' v-loading='loading' ref='graphy'>
-        <div id='fengMap'></div>
-        <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
-        <!-- 地图底部操作按钮 -->
-        <div class='strip-bottom'>
-            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
-        </div>
-        <room-box ref='boxRoom'></room-box>
+  <div id="floor_base" v-loading="loading" ref="graphy">
+    <div id="fengMap"></div>
+    <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
+    <!-- 地图底部操作按钮 -->
+    <div class="strip-bottom">
+      <canvasFun
+        @fit="fit"
+        @savePng="savePng"
+        @saveSvg="saveSvg"
+        @saveJson="saveJson"
+        @scale="scale"
+        ref="canvasFun"
+      ></canvasFun>
     </div>
+    <room-box ref="boxRoom"></room-box>
+  </div>
 </template>
 <script>
-import { SFengParser } from '@saga-web/feng-map'
-import { SFloorParser } from '@saga-web/big'
-import { FloorView } from '@/lib/FloorView'
-import { FloorScene } from '@/lib/FloorScene'
-import RoomBox from '@/views/room/index'
-import canvasFun from '@/components/floorMap/canvasFun'
-
-let fengmap = null
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { FloorView } from "@/lib/FloorView";
+import { FloorScene } from "@/lib/FloorScene";
+import RoomBox from "@/views/room/index";
+import canvasFun from "@/components/floorMap/canvasFun";
+import { readGroup } from "@/api/public";
+import { STopologyParser } from "@/lib/parsers/STopologyParser";
+// import { uuid } from "@/components/mapClass/until";
+let fengmap = null;
 
 export default {
-    data() {
-        return {
-            appName: '万达可视化系统',
-            key: '23f30a832a862c58637a4aadbf50a566',
-            mapServerURL: `/wdfn`,
-            fmapID: '1000423_120', // 2020-6-18 磊哥发 1000423 大连高新万达
-            canvasWidth: 1100,
-            canvasHeight: 800,
-            loading: false,
-            view: null,
-            isQuerying: false // 限制重复查询
-        }
-    },
-    components: { RoomBox, canvasFun },
-    methods: {
-        init(floorid) {
-            if (this.isQuerying) {
-                console.log('正在查询...')
-                return
-            }
-            this.isQuerying = true
-            this.clearGraphy()
-            this.scene = new FloorScene()
-            this.scene.selectContainer.connect('listChange', this, this.listChange)
-            if (!fengmap) {
-                fengmap = new SFengParser('fengMap', `${this.mapServerURL}/${this.fmapID}`, this.key, this.appName, null)
+  data() {
+    return {
+      appName: "万达可视化系统",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      mapServerURL: `/wdfn`,
+      canvasWidth: 1100,
+      canvasHeight: 800,
+      loading: false,
+      view: null,
+      isQuerying: false, // 限制重复查询
+      urlMsg: {}
+    };
+  },
+  components: { RoomBox, canvasFun },
+  methods: {
+    init(floorid) {
+      if (this.isQuerying) {
+        console.log("正在查询...");
+        return;
+      }
+      this.isQuerying = true;
+      this.clearGraphy();
+      this.scene = new FloorScene();
+      this.scene.selectContainer.connect("listChange", this, this.listChange);
+      if (!fengmap) {
+        fengmap = new SFengParser(
+          "fengMap",
+          `${this.mapServerURL}/${this.urlMsg.fmapID}`,
+          this.key,
+          this.appName,
+          null
+        );
 
-                fengmap.loadMap(this.fmapID, res => {
-                    this.floorList = res
-                    this.parserData(floorid)
-                })
-            } else {
-                this.parserData(floorid)
-            }
-        },
-        parserData(floor) {
-            if (this.floorList[floor]) {
-                console.log(this.floorList[floor])
-                fengmap.parseData(this.floorList[floor], res => {
-                    if (res.err) {
-                        console.log(res.err)
-                        return
-                    }
-                    const fParser = new SFloorParser(null)
-                    fParser.parseData(res)
-                    fParser.spaceList.forEach(t => {
-                        t.selectable = true
-                        this.scene.addItem(t)
-                    })
-                    fParser.wallList.forEach(t => this.scene.addItem(t))
-                    fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-                    fParser.doorList.forEach(t => this.scene.addItem(t))
-                    fParser.columnList.forEach(t => this.scene.addItem(t))
-                    fParser.casementList.forEach(t => this.scene.addItem(t))
-                    this.view.scene = this.scene
-                    this.view.fitSceneToView()
-                    this.loading = false
-                    this.isQuerying = false
-                    console.log('success')
-                })
-            } else {
-                console.log('楼层不正确')
-            }
-        },
-        clearGraphy() {
-            console.log(new FloorView('canvas'))
-            if (this.view) {
-                this.view.scene = null
-                return
-            }
-            this.view = new FloorView('canvas')
-        },
-        listChange(item, ev) {
-            let name = ev[0][0].data.Name
-            if (name.slice(name.length - 2, name.length) == '机房') {
-                this.$refs.boxRoom.open(name)
-            }
-        },
-        // 适配底图到窗口
-        fit() {
-            this.view.fitSceneToView()
-        },
-        // 保存为png
-        savePng() {
-            this.view.saveImage(`1.png`, 'png')
-        },
-        // 保存为svg
-        saveSvg() {
-            this.view.saveSceneSvg(`1.svg`, 6400, 4800)
-        },
-        // 保存为json
-        saveJson() {
-            console.log(2222)
-            this.view.saveFloorJson(`1.json`)
-        },
-        // 缩放
-        scale(val) {
-            if (!this.view) {
-                return
-            }
-            let scale = this.view.scale
-            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
-        }
+        fengmap.loadMap(this.urlMsg.fmapID, res => {
+          this.floorList = res;
+          this.parserData(floorid);
+        });
+        this.readGroup().then(data => {
+          const parserData = new STopologyParser(null);
+          parserData.parseData(data.data.Data[0].Elements);
+          // 多边形
+          parserData.zoneLegendList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Nodes.push(t);
+          });
+          // 增加文字
+          parserData.textMarkerList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Markers.push(t);
+          });
+          // 增加图片
+          parserData.imageMarkerList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Markers.push(t);
+          });
+          // 增加直线
+          parserData.lineMarkerList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Markers.push(t);
+          });
+          // 增加图标类图例
+          parserData.imageLegendList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Nodes.push(t);
+          });
+          // 增加管线类
+          // 增加图标类图例
+          parserData.relationList.forEach(t => {
+            this.scene.addItem(t);
+            this.scene.Relations.push(t);
+          });
+          this.view.fitSceneToView();
+        });
+      } else {
+        this.parserData(floorid);
+      }
+    },
+    parserData(floor) {
+      if (this.floorList[floor]) {
+        console.log(this.floorList[floor]);
+        fengmap.parseData(this.floorList[floor], res => {
+          if (res.err) {
+            console.log(res.err);
+            return;
+          }
+          const fParser = new SFloorParser(null);
+          fParser.parseData(res);
+          fParser.spaceList.forEach(t => {
+            t.selectable = true;
+            this.scene.addItem(t);
+          });
+          fParser.wallList.forEach(t => this.scene.addItem(t));
+          fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+          fParser.doorList.forEach(t => this.scene.addItem(t));
+          fParser.columnList.forEach(t => this.scene.addItem(t));
+          fParser.casementList.forEach(t => this.scene.addItem(t));
+          this.view.scene = this.scene;
+          this.view.fitSceneToView();
+          this.loading = false;
+          this.isQuerying = false;
+          console.log("success");
+        });
+      } else {
+        console.log("楼层不正确");
+      }
+    },
+    clearGraphy() {
+      console.log(new FloorView("canvas"));
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView("canvas");
+    },
+    listChange(item, ev) {
+      let name = ev[0][0].data.Name;
+      if (name.slice(name.length - 2, name.length) == "机房") {
+        this.$refs.boxRoom.open(name);
+      }
+    },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView();
+    },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`1.png`, "png");
     },
-    mounted() {
-        if (window.screen.height == '768') {
-            this.canvasWidth = this.$refs.graphy.offsetWidth
-            this.canvasHeight = this.$refs.graphy.offsetHeight - 100
-        } else {
-            this.canvasWidth = this.$refs.graphy.offsetWidth
-            this.canvasHeight = this.$refs.graphy.offsetHeight
-        }
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`1.svg`, 6400, 4800);
+    },
+    // 保存为json
+    saveJson() {
+      console.log(2222);
+      this.view.saveFloorJson(`1.json`);
+    },
+    // 缩放
+    scale(val) {
+      if (!this.view) {
+        return;
+      }
+      let scale = this.view.scale;
+      this.view.scaleByPoint(
+        val / scale,
+        this.canvasWidth / 2,
+        this.canvasHeight / 2
+      );
+    },
+    // 读取数据
+    readGroup() {
+      const data = {
+        categoryId: this.urlMsg.categoryId,
+        projectId: this.urlMsg.ProjectID
+      };
+      return readGroup(data);
     }
-}
+  },
+  mounted() {
+    if (window.screen.height == "768") {
+      this.canvasWidth = this.$refs.graphy.offsetWidth;
+      this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
+    } else {
+      this.canvasWidth = this.$refs.graphy.offsetWidth;
+      this.canvasHeight = this.$refs.graphy.offsetHeight;
+    }
+  },
+  created() {
+    this.urlMsg = {
+      categoryId: "NTXT",
+      ProjectID: "6",
+      BuildingID: "1",
+      FloorID: "1",
+      fmapID: "1000423_120"
+    };
+  }
+};
 </script>
 <style lang="less" scoped>
 #floor_base {
-    position: relative;
-    #fengMap {
-        position: fixed;
-        width: 100px;
-        height: 100px;
-        z-index: -1;
-    }
-    .strip-bottom {
-        position: absolute;
-        right: 0;
-        bottom: 40px;
-        width: 100%;
-    }
+  position: relative;
+  #fengMap {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  .strip-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 40px;
+    width: 100%;
+  }
 }
 </style>

+ 593 - 0
src/components/mapClass/EditScence.js

@@ -0,0 +1,593 @@
+import { SUndoStack } from "@saga-web/base";
+import { SGraphScene } from '@saga-web/graph/lib';
+import { SItemStatus, ItemOrder } from "@saga-web/big";
+import { SLineStyle } from "@saga-web/graph/lib";
+import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
+import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
+import { TipelineItem } from "@/lib/items/TipelineItem";
+import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem";
+import { SPoint, SFont } from '@saga-web/draw/lib';
+import { uuid } from "@/components/mapClass/until";
+import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
+import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
+/**
+ * 在线绘图
+ *
+ * @author 韩耀龙
+ */
+export class EditScence extends SGraphScene {
+    constructor() {
+        super();
+        this.undoStack = new SUndoStack();
+        /** 命令 1 绘制直线 */
+        this.cmd = 'choice';
+        /** 当前选中焦点Item */
+        this.focusItem = null;
+        /**图例节点 */
+        this.Nodes = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+        /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+        this.Markers = [];
+        /**  管线对象 */
+        this.Relations = [];
+        /** 绘制图例样式 */
+        this._legend = null;
+        // // 选择绑定选额item事件
+        this.selectContainer.connect("listChange", this, this.listChange);
+    }
+    /** 获取当前状态 */
+    get getCmd() {
+        return this.cmd;
+    }
+    /** 编辑当前状态 */
+    set setCmd(cmd) {
+        if (cmd == 'choice') {
+            this.grabItem = null;
+        }
+        this.cmd = cmd;
+        if (this.focusItem) {
+            // 取消操作
+            this.focusItem.cancelOperate();
+            this.focusItem = null;
+            // this.selectContainer.
+        }
+        if (this.view) {
+            this.view.update();
+        }
+    }
+    ;
+    get getlegend() {
+        return this._legend;
+    }
+    ;
+    set setlegend(obj) {
+        this._legend = obj;
+        console.log('aaaaaa', obj);
+    }
+    /**
+     * 监听变化
+     * @param obj 变化后的对象
+     */
+    listChange(obj) {
+        let itemType = 'equipment';
+        if (obj.itemList[0] instanceof STextMarkerItem) {
+            itemType = 'baseText';
+            console.log('obj.itemList[0]', itemType, obj.itemList[0]);
+        }
+        else if (obj.itemList[0] instanceof SImageMarkerItem) {
+            itemType = 'baseImage';
+        }
+        else if (obj.itemList[0] instanceof SLineMarkerItem) {
+            itemType = 'baseLine';
+        }
+        else if (obj.itemList[0] instanceof SZoneLegendItem) {
+            itemType = 'Zone';
+        }
+        else if (obj.itemList[0] instanceof SImageLegendItem) {
+            itemType = 'Image';
+        }
+        else if (obj.itemList[0] instanceof TipelineItem) {
+            itemType = 'Line';
+        }
+        else {
+            itemType = '';
+        }
+        ;
+        if (obj.itemList.length == 1) {
+            // 获取聚焦item
+            this.focusItem = obj.itemList[0];
+        }
+        let msg = {
+            itemList: obj.itemList,
+            itemType,
+        };
+        this.emitChange(msg);
+    }
+    emitChange(msg) {
+    }
+    /**
+     * 增加线段item
+     */
+    addLine(event) {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '直线',
+            /** 图标(Image),线类型(Line) */
+            Type: "Line",
+            /** 位置  */
+            Pos: { X: 0, Y: 0 },
+            /** 由应用自己定义  */
+            Properties: {
+                Line: [{ X: event.x, Y: event.y }]
+            }
+        };
+        const item = new SLineMarkerItem(null, data);
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.lineOrder;
+        item.selectable = true;
+        this.addItem(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        this.grabItem = item;
+        this.Markers.push(item);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        // item.connect("onMove", this, this.onItemMove.bind(this));
+        return true;
+    }
+    /**
+     * 增加折线item
+     */
+    addPolylineItem(event) {
+        const point = new SPoint(event.x, event.y);
+        const item = new TipelineItem(null, [point]);
+        //设置状态
+        item.selectable = true;
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.polylineOrder;
+        this.addItem(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        this.grabItem = item;
+        this.focusItem = item;
+        return true;
+    }
+    /**
+     * 增加管道 lenged
+     */
+    addTipelineItem(event) {
+        const LegendData = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Type: "Line",
+            PointList: [{ X: event.x, Y: event.y }],
+            LineType: 0,
+            Properties: {
+                LineDash: this._legend.LineDash,
+                LineWidth: this._legend.LineWidth,
+                Color: this._legend.Color,
+            },
+        };
+        const item = new TipelineItem(null, LegendData);
+        //设置状态
+        item.selectable = true;
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.polylineOrder;
+        this.addItem(item);
+        this.Relations.push(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        this.grabItem = item;
+        this.focusItem = item;
+        return true;
+    }
+    /**
+     * 增加多边形item lenged
+     */
+    addPolygonItem(event) {
+        const LegendData = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Type: "Zone",
+            Pos: { X: event.x, Y: event.y },
+            OutLine: [{ X: event.x, Y: event.y }],
+            Properties: {
+                StrokeColor: this._legend.Color,
+                FillColor: this._legend.FillColor,
+                LineDash: this._legend.LineDash,
+                LineWidth: this._legend.LineWidth,
+            },
+        };
+        const Polylines = new SZoneLegendItem(null, LegendData);
+        Polylines.selectable = true;
+        //设置状态
+        Polylines.status = SItemStatus.Create;
+        Polylines.zOrder = ItemOrder.polygonOrder;
+        // Polylines.moveable = true;
+        this.addItem(Polylines);
+        Polylines.connect("finishCreated", this, this.finishCreated);
+        this.grabItem = Polylines;
+        this.focusItem = Polylines;
+        this.Nodes.push(Polylines);
+    }
+    /**
+     * 增加图片Item mark
+     */
+    addImgItem(event) {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '图片',
+            Num: 3,
+            /** 图标(Image),线类型(Line) */
+            Type: "Image",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Url: '',
+            }
+        };
+        const item = new SImageMarkerItem(null, data);
+        item.zOrder = ItemOrder.imageOrder;
+        item.selectable = true;
+        item.moveable = true;
+        this.addItem(item);
+        this.grabItem == null;
+        this.focusItem = item;
+        this.cmd = 'choice';
+        this.Markers.push(item);
+    }
+    /**
+     * 增加文字item
+     */
+    addTextItem(event) {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '文本',
+            /** 图标 */
+            Type: "Text",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Text: '请在右侧属性栏输入文字!',
+                Color: '',
+                Font: 0,
+                BackgroundColor: ''
+            }
+        };
+        const item = new STextMarkerItem(null, data);
+        item.moveTo(event.x, event.y);
+        item.selectable = true;
+        item.moveable = true;
+        item.zOrder = ItemOrder.textOrder;
+        this.addItem(item);
+        this.grabItem == null;
+        this.cmd = 'choice';
+        this.Markers.push(item);
+    }
+    /**
+     * 增加图标lenged图标
+     */
+    addIconItem(event) {
+        console.log('this._legend.url', this._legend);
+        const LegendData = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Pos: { X: event.x, Y: event.y },
+            Scale: { X: 1, Y: 1, Z: 1 },
+            Rolate: { X: 0, Y: 0, Z: 0 },
+            Size: { Width: 0, Height: 0 },
+            Properties: {
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
+            },
+        };
+        const item = new SImageLegendItem(null, LegendData);
+        this.grabItem == null;
+        this.cmd = 'choice';
+        item.selectable = true;
+        item.moveable = true;
+        item.zOrder = ItemOrder.markOrder;
+        // item.moveTo(event.x, event.y);
+        this.addItem(item);
+        this.Nodes.push(item);
+    }
+    /**
+     * 更改item对应属性
+     */
+    editItemStatus() {
+    }
+    /**
+     * 更改文本对应属性
+     * @param str string 文字内容
+     */
+    updatedText(str) {
+        if (this.focusItem) {
+            const old = this.focusItem.text;
+            this.focusItem.text = str;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
+        }
+    }
+    /**
+     * 更改文本fontSize属性
+     * @param size number 文字大小
+     */
+    updatedFontSize(size) {
+        if (this.focusItem) {
+            let old = new SFont(this.focusItem.font);
+            let font = new SFont(this.focusItem.font);
+            font.size = size;
+            this.focusItem.font = font;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+        }
+    }
+    /**
+     * 更改线宽属性
+     * @param lineWidth number 线宽大小
+     */
+    updatedLineWidth(lineWidth) {
+        if (this.focusItem) {
+            // let old = new SFont(this.focusItem.font);
+            // let font = new SFont(this.focusItem.font);
+            // font.size = size;
+            this.focusItem.lineWidth = lineWidth;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+        }
+    }
+    /**
+     * 更改文本颜色属性
+     * @param str string 颜色
+     */
+    updatedFontColor(color) {
+        if (this.focusItem) {
+            let old = this.focusItem.color;
+            this.focusItem.color = color;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+    /**
+     * 更改border颜色
+     * @param color string 颜色
+     */
+    updatedBorderColor(color) {
+        if (this.focusItem) {
+            let old = this.focusItem.strokeColor;
+            this.focusItem.strokeColor = color;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+    /**
+     * 更改item宽
+     * @param width number 颜色
+     */
+    updatedWidth(width) {
+        if (this.focusItem) {
+            // let old = this.focusItem.width;
+            this.focusItem.width = width;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+    /**
+    * 更改item高
+    * @param height number 颜色
+    */
+    updatedHeight(height) {
+        if (this.focusItem) {
+            // let old = this.focusItem.width;
+            this.focusItem.height = height;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+    /**
+     * 更改item坐标
+     * @param x number x x坐标
+     * @param y number y y坐标
+     */
+    updatedPosition(x, y) {
+        if (this.focusItem) {
+            let p = this.focusItem.mapFromScene(x, y);
+            // newx - oldx = newleft - oldleft
+            // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
+            this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
+            this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
+        }
+    }
+    /**
+     * 更改item 背景色坐标
+     * @param color string 颜色color
+     */
+    updatedbackColor(color) {
+        if (this.focusItem) {
+            this.focusItem.backgroundColor = color;
+        }
+    }
+    /**
+     * 更改item Url
+     * @param url string 图片key
+     */
+    upadataImageUrl(url) {
+        if (this.focusItem) {
+            this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
+        }
+    }
+    /**
+     * 更改item border
+     * @param val string border类型
+     */
+    upadataBorder(val) {
+        if (this.focusItem) {
+            let borderStyle = null;
+            if (val == 'dashed') {
+                borderStyle = SLineStyle.Dashed;
+            }
+            else if (val == 'dotted') {
+                borderStyle = SLineStyle.Dotted;
+            }
+            else if (val == 'solid') {
+                borderStyle = SLineStyle.Soild;
+            }
+            this.focusItem.lineStyle = borderStyle;
+        }
+    }
+    /**
+     * 更改item 名称
+     * @param val string border类型
+     */
+    upadataLengedName(val) {
+        console.log('xxxxxxx', val, this.focusItem);
+        if (this.focusItem && this.focusItem.data) {
+            this.focusItem.text = val;
+        }
+    }
+    /**
+     * 删除指定item
+     */
+    deleiteItem() {
+        if (this.focusItem) {
+            this.removeItem(this.focusItem);
+            let a = -1;
+            this.Nodes.forEach((item, index) => {
+                if (item.id == this.focusItem.id) {
+                    a = index;
+                }
+            });
+            this.Nodes.splice(a, 1);
+            let b = -1;
+            this.Markers.forEach((item, index) => {
+                if (item.id == this.focusItem.id) {
+                    b = index;
+                }
+            });
+            this.Markers.splice(b, 1);
+            let c = -1;
+            this.Relations.forEach((item, index) => {
+                if (item.id == this.focusItem.id) {
+                    c = index;
+                }
+            });
+            this.Relations.splice(c, 1);
+            this.focusItem = null;
+        }
+        if (this.view) {
+            this.view.update();
+        }
+    }
+    /**
+     * 对齐指定item
+     * @param v
+     */
+    changeAlignItem(v) {
+        this.selectContainer.layout(v);
+    }
+    /**
+     * 提取item
+     */
+    extractItem() {
+        console.log(this);
+    }
+    /**
+     * 保存数据
+     */
+    saveMsgItem() {
+        const Nodes = [];
+        const Markers = [];
+        const Relations = [];
+        this.Nodes.forEach(e => {
+            Nodes.push(e.toData());
+        });
+        this.Markers.forEach(e => {
+            Markers.push(e.toData());
+        });
+        this.Relations.forEach(e => {
+            Relations.push(e.toData());
+        });
+        let element = {
+            Nodes, Markers, Relations
+        };
+        return element;
+    }
+    /**
+     * 锁住item
+     */
+    lockItem() {
+    }
+    /**
+     * 执行取消操作
+     */
+    redo() {
+        this.undoStack.undo();
+    }
+    /**
+    * 执行重做操作执行
+    */
+    undo() {
+        this.undoStack.redo();
+    }
+    /**
+     * 完成事件创建的回调函数
+     */
+    finishCreated(item) {
+        this.setCmd = 'choice';
+        this.focusItem = item;
+        this.selectContainer.toggleItem(item);
+    }
+    ////////////////////////
+    //  以下为鼠标键盘操作事件
+    onMouseDown(event) {
+        if (this.grabItem) {
+            return this.grabItem.onMouseDown(event);
+        }
+        switch (this.cmd) {
+            case 'baseLine':
+                this.addLine(event);
+                break;
+            case 'baseText':
+                this.addTextItem(event);
+                break;
+            case 'baseImage':
+                this.addImgItem(event);
+                break;
+            case 'Zone':
+                this.addPolygonItem(event);
+                break;
+            case 'Image':
+                this.addIconItem(event);
+                break;
+            case 'Line':
+                this.addTipelineItem(event);
+                break;
+            default:
+                return super.onMouseDown(event);
+        }
+    }
+    /**
+     * 键盘事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onKeyDown(event) {
+        if (this.grabItem) {
+            this.grabItem.onKeyDown(event);
+        }
+        // if (event.key == "Enter") {
+        //     this.cmd = 0
+        // }
+        return false;
+    }
+}

+ 626 - 0
src/components/mapClass/EditScence.ts

@@ -0,0 +1,626 @@
+import { SMouseEvent, SUndoStack } from "@saga-web/base";
+import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
+import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
+import { SGraphItem, SLineStyle, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
+import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
+import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
+import { TipelineItem } from "@/lib/items/TipelineItem";
+import { SImgTextItem } from "@/lib/items/SImgTextItem";
+import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
+import { SPoint, SFont } from '@saga-web/draw/lib';
+import { Legend } from '@/lib/types/Legend';
+import { Relation } from '@/lib/types/Legend';
+
+import { uuid } from "@/components/mapClass/until";
+import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
+import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
+/**
+ * 在线绘图
+ *
+ * @author 韩耀龙
+ */
+
+export class EditScence extends SGraphScene {
+
+    undoStack = new SUndoStack();
+    /** 命令 1 绘制直线 */
+    private cmd = 'choice';
+    /** 获取当前状态 */
+    get getCmd(): string {
+        return this.cmd;
+    }
+    /** 编辑当前状态 */
+    set setCmd(cmd: string) {
+        if (cmd == 'choice') {
+            this.grabItem = null;
+        }
+        this.cmd = cmd;
+        if (this.focusItem) {
+            // 取消操作
+            this.focusItem.cancelOperate();
+            this.focusItem = null;
+            // this.selectContainer.
+        }
+        if (this.view) {
+            this.view.update();
+        }
+    };
+
+    /** 当前选中焦点Item */
+    focusItem: SGraphItem | null = null;
+
+    /**图例节点 */
+    Nodes: any = [];  // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+    /**图例节点 */  // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+    Markers: any = [];
+    /**  管线对象 */
+    Relations: any = [];
+    constructor() {
+        super();
+        // // 选择绑定选额item事件
+        this.selectContainer.connect("listChange", this, this.listChange);
+    }
+    /** 绘制图例样式 */
+    _legend: any | null = null;
+    get getlegend(): any {
+        return this._legend;
+    };
+    set setlegend(obj: any) {
+        this._legend = obj;
+        console.log('aaaaaa', obj)
+    }
+    /**
+     * 监听变化
+     * @param obj 变化后的对象
+     */
+    listChange(obj: any) {
+        let itemType: string = 'equipment';
+
+        if (obj.itemList[0] instanceof STextMarkerItem) {
+            itemType = 'baseText'
+            console.log('obj.itemList[0]', itemType, obj.itemList[0])
+        } else if (obj.itemList[0] instanceof SImageMarkerItem) {
+            itemType = 'baseImage'
+        } else if (obj.itemList[0] instanceof SLineMarkerItem) {
+            itemType = 'baseLine'
+        } else if (obj.itemList[0] instanceof SZoneLegendItem) {
+            itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SImageLegendItem) {
+            itemType = 'Image'
+        } else if (obj.itemList[0] instanceof TipelineItem) {
+            itemType = 'Line'
+        } else {
+            itemType = ''
+        };
+        if (obj.itemList.length == 1) {
+            // 获取聚焦item
+            this.focusItem = obj.itemList[0]
+        }
+        let msg = {
+            itemList: obj.itemList,
+            itemType,
+        }
+        this.emitChange(msg)
+    }
+    emitChange(msg: any) {
+
+    }
+
+    /**
+     * 增加线段item
+     */
+    addLine(event: SMouseEvent): boolean {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '直线',
+            /** 图标(Image),线类型(Line) */
+            Type: "Line",
+            /** 位置  */
+            Pos: { X: 0, Y: 0 },
+            /** 由应用自己定义  */
+            Properties: {
+                Line: [{ X: event.x, Y: event.y }]
+            }
+        }
+        const item = new SLineMarkerItem(null, data);
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.lineOrder;
+        item.selectable = true;
+        this.addItem(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        this.grabItem = item;
+        this.Markers.push(item)
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        // item.connect("onMove", this, this.onItemMove.bind(this));
+        return true
+    }
+
+    /**
+     * 增加折线item
+     */
+    addPolylineItem(event: SMouseEvent): boolean {
+        const point = new SPoint(event.x, event.y)
+        const item = new TipelineItem(null, [point]);
+        //设置状态
+        item.selectable = true;
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.polylineOrder
+        this.addItem(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        this.grabItem = item;
+        this.focusItem = item;
+        return true
+    }
+
+    /**
+     * 增加管道 lenged
+     */
+    addTipelineItem(event: SMouseEvent): boolean {
+        const LegendData: Relation = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Type: "Line",
+            PointList: [{ X: event.x, Y: event.y }],
+            LineType: 0,
+            Properties: {
+                LineDash: this._legend.LineDash,
+                LineWidth: this._legend.LineWidth,
+                Color: this._legend.Color,
+            },
+        }
+
+        const item = new TipelineItem(null, LegendData);
+        //设置状态
+        item.selectable = true;
+        item.status = SItemStatus.Create;
+        item.zOrder = ItemOrder.polylineOrder
+        this.addItem(item);
+        this.Relations.push(item);
+        item.connect("finishCreated", this, this.finishCreated);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        this.grabItem = item;
+        this.focusItem = item;
+        return true
+    }
+
+    /**
+     * 增加多边形item lenged
+     */
+    addPolygonItem(event: SMouseEvent): void {
+        const LegendData: Legend = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Type: "Zone",
+            Pos: { X: event.x, Y: event.y },
+            OutLine:[{X:event.x, Y:event.y}],
+            Properties: {
+                StrokeColor: this._legend.Color,
+                FillColor: this._legend.FillColor,
+                LineDash: this._legend.LineDash,
+                LineWidth: this._legend.LineWidth,
+            },
+        }
+
+        const Polylines = new SZoneLegendItem(null, LegendData);
+        Polylines.selectable = true;
+        //设置状态
+        Polylines.status = SItemStatus.Create;
+        Polylines.zOrder = ItemOrder.polygonOrder;
+        // Polylines.moveable = true;
+        this.addItem(Polylines);
+        Polylines.connect("finishCreated", this, this.finishCreated);
+        this.grabItem = Polylines;
+        this.focusItem = Polylines;
+        this.Nodes.push(Polylines);
+    }
+
+    /**
+     * 增加图片Item mark
+     */
+    addImgItem(event: SMouseEvent) {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '图片',
+            Num: 3,
+            /** 图标(Image),线类型(Line) */
+            Type: "Image",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Url: '',
+            }
+        }
+        const item = new SImageMarkerItem(null, data);
+        item.zOrder = ItemOrder.imageOrder;
+        item.selectable = true;
+        item.moveable = true;
+        this.addItem(item);
+        this.grabItem == null;
+        this.focusItem = item;
+        this.cmd = 'choice';
+        this.Markers.push(item)
+    }
+
+    /**
+     * 增加文字item
+     */
+    addTextItem(event: SMouseEvent): void {
+        const data = {
+            /** ID */
+            ID: uuid(),
+            /** 名称  */
+            Name: '文本',
+            /** 图标 */
+            Type: "Text",
+            /** 位置  */
+            Pos: { X: event.x, Y: event.y },
+            /** 由应用自己定义  */
+            Properties: {
+                Text: '请在右侧属性栏输入文字!',
+                Color: '',
+                Font: 0,
+                BackgroundColor: ''
+            }
+        }
+        const item = new STextMarkerItem(null, data);
+        item.moveTo(event.x, event.y);
+        item.selectable = true;
+        item.moveable = true;
+        item.zOrder = ItemOrder.textOrder;
+        this.addItem(item);
+        this.grabItem == null
+        this.cmd = 'choice';
+        this.Markers.push(item)
+    }
+
+    /**
+     * 增加图标lenged图标
+     */
+    addIconItem(event: SMouseEvent): void {
+        console.log('this._legend.url', this._legend)
+        const LegendData: Legend = {
+            ID: uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId: this._legend.Id,
+            AttachObjectIds: [],
+            Pos: { X: event.x, Y: event.y },
+            Scale: { X: 1, Y: 1, Z: 1 },          // 缩放
+            Rolate: { X: 0, Y: 0, Z: 0 },
+            Size: { Width: 0, Height: 0 },         // 大小
+            Properties: {
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
+            },
+        }
+        const item = new SImageLegendItem(null, LegendData);
+        this.grabItem == null
+        this.cmd = 'choice';
+        item.selectable = true;
+        item.moveable = true;
+        item.zOrder = ItemOrder.markOrder;
+        // item.moveTo(event.x, event.y);
+        this.addItem(item);
+        this.Nodes.push(item);
+    }
+
+    /**
+     * 更改item对应属性
+     */
+    editItemStatus(): void {
+
+    }
+
+    /**
+     * 更改文本对应属性
+     * @param str string 文字内容
+     */
+    updatedText(str: string): void {
+        if (this.focusItem) {
+            const old = this.focusItem.text;
+            this.focusItem.text = str;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str));
+        }
+    }
+
+    /**
+     * 更改文本fontSize属性
+     * @param size number 文字大小
+     */
+    updatedFontSize(size: number): void {
+        if (this.focusItem) {
+            let old = new SFont(this.focusItem.font);
+            let font = new SFont(this.focusItem.font);
+            font.size = size;
+            this.focusItem.font = font;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+
+        }
+    }
+
+    /**
+     * 更改线宽属性
+     * @param lineWidth number 线宽大小
+     */
+    updatedLineWidth(lineWidth: number): void {
+        if (this.focusItem) {
+            // let old = new SFont(this.focusItem.font);
+            // let font = new SFont(this.focusItem.font);
+            // font.size = size;
+            this.focusItem.lineWidth = lineWidth;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
+        }
+    }
+
+    /**
+     * 更改文本颜色属性
+     * @param str string 颜色
+     */
+    updatedFontColor(color: string): void {
+        if (this.focusItem) {
+            let old = this.focusItem.color;
+            this.focusItem.color = color;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+
+    /**
+     * 更改border颜色
+     * @param color string 颜色
+     */
+    updatedBorderColor(color: string): void {
+        if (this.focusItem) {
+            let old = this.focusItem.strokeColor;
+            this.focusItem.strokeColor = color;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+
+    /**
+     * 更改item宽
+     * @param width number 颜色
+     */
+
+    updatedWidth(width: number): void {
+        if (this.focusItem) {
+            // let old = this.focusItem.width;
+            this.focusItem.width = width;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+
+    /**
+    * 更改item高
+    * @param height number 颜色
+    */
+    updatedHeight(height: number): void {
+        if (this.focusItem) {
+            // let old = this.focusItem.width;
+            this.focusItem.height = height;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
+
+    /**
+     * 更改item坐标
+     * @param x number x x坐标
+     * @param y number y y坐标
+     */
+    updatedPosition(x: number, y: number): void {
+        if (this.focusItem) {
+            let p = this.focusItem.mapFromScene(x, y)
+            // newx - oldx = newleft - oldleft
+            // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
+            this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
+            this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
+        }
+    }
+
+
+    /**
+     * 更改item 背景色坐标
+     * @param color string 颜色color
+     */
+    updatedbackColor(color: string): void {
+        if (this.focusItem) {
+            this.focusItem.backgroundColor = color;
+        }
+    }
+
+    /**
+     * 更改item Url
+     * @param url string 图片key
+     */
+    upadataImageUrl(url: string): void {
+        if (this.focusItem) {
+            this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
+        }
+    }
+
+    /**
+     * 更改item border
+     * @param val string border类型
+     */
+    upadataBorder(val: string): void {
+        if (this.focusItem) {
+            let borderStyle = null
+            if (val == 'dashed') {
+                borderStyle = SLineStyle.Dashed
+            } else if (val == 'dotted') {
+                borderStyle = SLineStyle.Dotted
+            } else if (val == 'solid') {
+                borderStyle = SLineStyle.Soild
+            }
+            this.focusItem.lineStyle = borderStyle;
+        }
+    }
+
+    /**
+     * 更改item 名称
+     * @param val string border类型
+     */
+    upadataLengedName(val: string): void {
+        console.log('xxxxxxx',val,this.focusItem)
+        if (this.focusItem && this.focusItem.data) {
+            this.focusItem.text= val
+        }
+    }
+
+    /**
+     * 删除指定item
+     */
+    deleiteItem(): void {
+        if (this.focusItem) {
+            this.removeItem(this.focusItem);
+            let a = -1
+            this.Nodes.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    a = index
+                }
+            });
+            this.Nodes.splice(a, 1);
+            let b = -1;
+            this.Markers.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    b = index
+                }
+            });
+            this.Markers.splice(b, 1);
+            let c = -1;
+            this.Relations.forEach((item: any, index: number) => {
+                if (item.id == this.focusItem.id) {
+                    c = index
+                }
+            });
+            this.Relations.splice(c, 1);
+            this.focusItem = null;
+        }
+        if (this.view) {
+            this.view.update();
+        }
+    }
+
+    /**
+     * 对齐指定item
+     * @param v
+     */
+    changeAlignItem(v: any): void {
+        this.selectContainer.layout(v);
+    }
+
+    /**
+     * 提取item
+     */
+    extractItem(): void {
+        console.log(this)
+    }
+
+    /**
+     * 保存数据
+     */
+    saveMsgItem(): any {
+        const Nodes: any = [];
+        const Markers: any = [];
+        const Relations: any = [];
+        this.Nodes.forEach(e => {
+            Nodes.push(e.toData())
+        });
+        this.Markers.forEach(e => {
+            Markers.push(e.toData())
+        });
+        this.Relations.forEach(e => {
+            Relations.push(e.toData())
+        });
+
+        let element = {
+            Nodes, Markers, Relations
+        }
+        return element
+    }
+    /**
+     * 锁住item
+     */
+    lockItem(): void {
+    }
+
+    /**
+     * 执行取消操作
+     */
+    redo(): void {
+        this.undoStack.undo();
+    }
+
+    /**
+    * 执行重做操作执行
+    */
+    undo(): void {
+        this.undoStack.redo();
+    }
+    /**
+     * 完成事件创建的回调函数
+     */
+    finishCreated(item: any) {
+        this.setCmd = 'choice';
+        this.focusItem = item;
+        this.selectContainer.toggleItem(item)
+    }
+    ////////////////////////
+    //  以下为鼠标键盘操作事件
+    onMouseDown(event: SMouseEvent): any {
+        if (this.grabItem) {
+            return this.grabItem.onMouseDown(event);
+        }
+        switch (this.cmd) {
+            case 'baseLine':
+                this.addLine(event);
+                break;
+            case 'baseText':
+                this.addTextItem(event);
+                break;
+            case 'baseImage':
+                this.addImgItem(event)
+                break;
+            case 'Zone':
+                this.addPolygonItem(event);
+                break;
+            case 'Image':
+                this.addIconItem(event);
+                break;
+            case 'Line':
+                this.addTipelineItem(event);
+                break;
+            default:
+                return super.onMouseDown(event);
+        }
+    }
+
+    /**
+     * 键盘事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onKeyDown(event: KeyboardEvent): any {
+        if (this.grabItem) {
+            this.grabItem.onKeyDown(event);
+        }
+        // if (event.key == "Enter") {
+        //     this.cmd = 0
+        // }
+        return false
+    }
+}

+ 626 - 0
src/components/mapClass/SPolygonItem.js

@@ -0,0 +1,626 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate } from "@saga-web/graph/lib";
+import { SUndoStack } from "@saga-web/base/";
+;
+import { SColor, SLineCapStyle, SPoint, SRect, SLine, SPolygonUtil } from "@saga-web/draw";
+import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
+import { SItemStatus } from "@saga-web/big";
+/**
+ * 编辑多边形
+ *
+ * @author  韩耀龙
+ */
+export class SPolygonItem extends SGraphItem {
+    /**
+    * 构造函数
+    *
+    * @param parent    指向父对象
+    * @param data      PolygonData数据
+    */
+    constructor(parent) {
+        super(parent);
+        /** X坐标最小值  */
+        this.minX = Number.MAX_SAFE_INTEGER;
+        /** X坐标最大值  */
+        this.maxX = Number.MIN_SAFE_INTEGER;
+        /** Y坐标最小值  */
+        this.minY = Number.MAX_SAFE_INTEGER;
+        /** Y坐标最大值  */
+        this.maxY = Number.MIN_SAFE_INTEGER;
+        /** 轮廓线坐标  */
+        this.pointList = [];
+        /** 是否闭合    */
+        this.closeFlag = false;
+        // 当前状态
+        this._status = SItemStatus.Normal;
+        this.data = null;
+        /** 边框颜色 */
+        this._strokeColor = new SColor("#0091FF");
+        /** 填充颜色 */
+        this._fillColor = new SColor("#1EE887");
+        /** 边框的宽 只可输入像素宽*/
+        this._lineWidth = 4;
+        /** 鼠标移动点  */
+        this.lastPoint = null;
+        /** 当前鼠标获取顶点对应索引 */
+        this.curIndex = -1;
+        /** 当前鼠标获取顶点对应坐标 */
+        this.curPoint = null;
+        /** 灵敏像素 */
+        this.len = 10;
+        /** 场景像素 内部将灵敏像素换算为场景实际距离  */
+        this.scenceLen = 15;
+        /** 场景像素  */
+        this.isAlt = false;
+        /** undoredo堆栈 */
+        this.undoStack = new SUndoStack();
+    }
+    // 获取当前状态
+    get getPointList() {
+        return this.pointList;
+    }
+    // 编辑当前状态
+    set setPointList(arr) {
+        this.pointList = arr;
+        this.update();
+    }
+    ;
+    // 获取当前状态
+    get status() {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        this.update();
+    }
+    ;
+    /**  画笔颜色 */
+    get strokeColor() {
+        return this._strokeColor;
+    }
+    ;
+    set strokeColor(v) {
+        this._strokeColor = v;
+    }
+    get fillColor() {
+        return this._fillColor;
+    }
+    ;
+    set fillColor(v) {
+        this._fillColor = v;
+    }
+    get lineWidth() {
+        return this._lineWidth;
+    }
+    set lineWidth(v) {
+        this._lineWidth = v;
+        this.update();
+    }
+    ;
+    //////////////////
+    //  以下为对pointList 数组的操作方法
+    /**
+     * 储存新的多边形顶点
+     *
+     * @param x   点位得x坐标
+     * @param y   点位得y坐标
+     * @param i   储存所在索引
+     * @return SPoint。添加的顶点
+     */
+    insertPoint(x, y, i = null) {
+        const point = new SPoint(x, y);
+        if (i == null) {
+            this.pointList.push(point);
+        }
+        else {
+            this.pointList.splice(i, 0, point);
+        }
+        this.update();
+        return point;
+    }
+    /**
+     * 删除点位
+     *
+     * @param i   删除点所在的索引
+     * @return    SPoint|null。索引不在数组范围则返回null
+     */
+    deletePoint(i = null) {
+        let point = null;
+        if (i != null) {
+            if (i >= (this.pointList.length) || i < 0) {
+                point = null;
+            }
+            else {
+                point = new SPoint(this.pointList[i].x, this.pointList[i].y);
+                this.pointList.splice(i, 1);
+            }
+        }
+        else {
+            if (this.pointList.length) {
+                point = this.pointList[this.pointList.length - 1];
+                this.pointList.pop();
+            }
+            else {
+                point = null;
+            }
+        }
+        this.update();
+        return point;
+    }
+    /**
+     * 多边形顶点的移动位置
+     *
+     * @param x   点位得x坐标
+     * @param y   点位得y坐标
+     * @param i   点位得i坐标
+     * @return    移动对应得点。如果索引无法找到移动顶点,则返回null
+     */
+    movePoint(x, y, i) {
+        let point = null;
+        if (i >= (this.pointList.length) || i < 0) {
+            return null;
+        }
+        if (this.pointList.length) {
+            this.pointList[i].x = x;
+            this.pointList[i].y = y;
+        }
+        point = this.pointList[i];
+        return point;
+    }
+    /**
+     * 打印出多边形数组
+     *
+     * @return  顶点数组
+     */
+    PrintPointList() {
+        return this.pointList;
+    }
+    ////////////
+    //  以下为三种状态下的绘制多边形方法
+    /**
+     * 展示状态 --绘制多边形数组
+     *
+     * @param painter      绘制类
+     * @param pointList    绘制多边形数组
+     */
+    drawShowPolygon(painter, pointList) {
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        painter.brush.color = this._fillColor;
+        painter.drawPolygon([...pointList]);
+    }
+    /**
+     * 创建状态 --绘制多边形数组
+     *
+     * @param painter      绘制类
+     * @param pointList    绘制多边形数组
+     */
+    drawCreatePolygon(painter, pointList) {
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        if (this.lastPoint && pointList.length) {
+            painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
+        }
+        painter.drawPolyline(pointList);
+        painter.pen.color = SColor.Transparent;
+        painter.brush.color = this._fillColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        if (this.lastPoint) {
+            painter.drawPolygon([...pointList, this.lastPoint]);
+        }
+        else {
+            painter.drawPolygon(pointList);
+        }
+    }
+    /**
+     *
+     * 编辑状态 --绘制多边形数组
+     *
+     * @param painter    绘制类
+     * @param pointList    绘制多边形数组
+     */
+    drawEditPolygon(painter, pointList) {
+        // 展示多边形
+        this.drawShowPolygon(painter, pointList);
+        // 绘制顶点块
+        painter.pen.color = SColor.Black;
+        painter.brush.color = SColor.White;
+        pointList.forEach((item, index) => {
+            painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
+        });
+    }
+    /**
+     * 编辑状态操作多边形数组
+     *
+     * @param event    鼠标事件
+     *
+     *
+     */
+    editPolygonPoint(event) {
+        //  判断是否为删除状态 isAlt = true为删除状态
+        if (this.isAlt) {
+            // 1 判断是否点击在多边形顶点
+            let lenIndex = -1; // 当前点击到的点位索引;
+            let curenLen = this.scenceLen; // 当前的灵敏度
+            this.pointList.forEach((item, index) => {
+                let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
+                if (dis < curenLen) {
+                    curenLen = dis;
+                    lenIndex = index;
+                }
+            });
+            // 若点击到,对该索引对应的点做删除
+            if (lenIndex != -1) {
+                if (this.pointList.length <= 3) {
+                    return;
+                }
+                const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y);
+                this.deletePoint(lenIndex);
+                // 记录顶点操作记录压入堆栈
+                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint, lenIndex]);
+            }
+        }
+        else {
+            // 1 判断是否点击在多边形顶点
+            this.curIndex = -1;
+            this.curPoint = null;
+            let lenIndex = -1; // 当前点击到的点位索引;
+            let curenLen = this.scenceLen; // 当前的灵敏度
+            this.pointList.forEach((item, index) => {
+                let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
+                if (dis < curenLen) {
+                    curenLen = dis;
+                    lenIndex = index;
+                }
+            });
+            this.curIndex = lenIndex;
+            // 2判断是否点击在多边形得边上
+            if (-1 == lenIndex) {
+                let len = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[0], this.pointList[1])), index = 0;
+                if (this.pointList.length > 2) {
+                    for (let i = 1; i < this.pointList.length; i++) {
+                        let dis = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[i], this.pointList[i + 1]));
+                        if ((i + 1) == this.pointList.length) {
+                            dis = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[i], this.pointList[0]));
+                        }
+                        if (dis.MinDis < len.MinDis) {
+                            len = dis;
+                            index = i;
+                        }
+                    }
+                }
+                // 判断是否有点
+                if (len.Point) {
+                    console.log(index, len.Point);
+                    // 点在了多边形的边上
+                    if (len.MinDis <= this.scenceLen) {
+                        this.pointList.splice(index + 1, 0, len.Point);
+                        // 记录新增顶点操作记录压入堆栈
+                        this.recordAction(SGraphPointListInsert, [this.pointList, len.Point, index + 1]);
+                    }
+                    else { //没点在多边形边上也没点在多边形顶点上
+                        super.onMouseDown(event);
+                    }
+                }
+            }
+            else {
+                // 当捕捉到顶点后 ,记录当前点的xy坐标,用于undo、redo操作
+                this.curPoint = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
+            }
+            // 刷新视图
+            this.update();
+        }
+    }
+    /////////////////////
+    // undo、redo相关操作
+    /**
+     * 记录相关动作并推入栈中
+     * @param	SGraphCommand         相关命令类
+     * @param	any                    对应传入参数
+     */
+    recordAction(SGraphCommand, any) {
+        // 记录相关命令并推入堆栈中
+        const sgraphcommand = new SGraphCommand(this, ...any);
+        if (this.undoStack) {
+            this.undoStack.push(sgraphcommand);
+        }
+    }
+    /**
+     * 执行取消操作执行
+     */
+    undo() {
+        if (this.status == SItemStatus.Normal) {
+            return;
+        }
+        if (this.undoStack) {
+            this.undoStack.undo();
+        }
+    }
+    /**
+     * 执行重做操作执行
+     */
+    redo() {
+        if (this.status == SItemStatus.Normal) {
+            return;
+        }
+        if (this.undoStack) {
+            this.undoStack.redo();
+        }
+    }
+    ///////////////////////////////
+    // 以下为鼠标事件
+    /**
+     * 鼠标双击事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onDoubleClick(event) {
+        // 如果位show状态 双击改对象则需改为编辑状态
+        if (SItemStatus.Normal == this.status) {
+            this.status = SItemStatus.Edit;
+            this.grabItem(this);
+        }
+        else if (SItemStatus.Edit == this.status) {
+            this.status = SItemStatus.Normal;
+            this.releaseItem();
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        this.update();
+        return true;
+    } // Function onDoubleClick()
+    /**
+     * 键盘事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onKeyDown(event) {
+        if (this.status == SItemStatus.Normal) {
+            return false;
+        }
+        else if (this.status == SItemStatus.Create) {
+            if (event.code == 'Enter') {
+                // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
+                if (this.pointList.length > 2) {
+                    this.status = SItemStatus.Normal;
+                    //3 传递完成事件状态
+                    this.$emit('finishCreated');
+                    //1 grabItem 置为null
+                    this.releaseItem();
+                    //2 清空undo
+                    if (this.undoStack) {
+                        this.undoStack.clear();
+                    }
+                }
+            }
+        }
+        else if (this.status == SItemStatus.Edit) {
+            if (event.key == 'Alt') {
+                this.isAlt = true;
+            }
+        }
+        this.update();
+        return true;
+    } // Function onKeyDown()
+    /**
+     * 键盘键抬起事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onKeyUp(event) {
+        if (this.status == SItemStatus.Edit) {
+            if (event.key == 'Alt') {
+                this.isAlt = false;
+            }
+        }
+        this.update();
+    } // Function onKeyUp()
+    /**
+     * 鼠标按下事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseDown(event) {
+        // 如果状态为编辑状态则添加点
+        if (this.status == SItemStatus.Create) {
+            // 新增顶点
+            this.insertPoint(event.x, event.y);
+            // 记录新增顶点操作记录压入堆栈
+            let pos = new SPoint(event.x, event.y);
+            this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
+        }
+        else if (this.status == SItemStatus.Edit) {
+            // 对多边形数组做编辑操作
+            this.editPolygonPoint(event);
+        }
+        else {
+            return super.onMouseDown(event);
+        }
+        return true;
+    } // Function onMouseDown()
+    /**
+     * 鼠标移入事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseEnter(event) {
+        return true;
+    } // Function onMouseEnter()
+    /**
+     * 鼠标移出事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseLeave(event) {
+        return true;
+    } // Function onMouseLeave()
+    /**
+     * 鼠标移动事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseMove(event) {
+        if (this.status == SItemStatus.Create) {
+            this.lastPoint = new SPoint;
+            this.lastPoint.x = event.x;
+            this.lastPoint.y = event.y;
+            this.update();
+        }
+        else if (this.status == SItemStatus.Edit) {
+            if (-1 != this.curIndex) {
+                this.pointList[this.curIndex].x = event.x;
+                this.pointList[this.curIndex].y = event.y;
+            }
+            this.update();
+        }
+        else {
+            // return super.onMouseMove(event)
+        }
+        return true;
+    } // Function onMouseMove()
+    /**
+     * 鼠标抬起事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseUp(event) {
+        if (this.status == SItemStatus.Edit) {
+            if (-1 != this.curIndex) {
+                const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
+                this.recordAction(SGraphPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex]);
+            }
+            this.curIndex = -1;
+            this.curPoint = null;
+        }
+        else {
+            // return super.onMouseUp(event)
+        }
+        return true;
+    } // Function onMouseUp()
+    /**
+     * 适配事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onResize(event) {
+        return true;
+    } // Function onResize()
+    /**
+     * 取消操作
+     *
+     * @param   painter       painter对象
+     */
+    cancelOperate() {
+        // 当状态为展示状态
+        if (this.status == SItemStatus.Create) {
+            // 闭合多边形
+            this.parent = null;
+        }
+        else if (this.status == SItemStatus.Edit) {
+            // 编辑状态
+            this.status = SItemStatus.Normal;
+        }
+        this.update();
+    } // Function cancelOperate()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect() {
+        if (this.pointList.length) {
+            this.minX = this.pointList[0].x;
+            this.maxX = this.pointList[0].x;
+            this.minY = this.pointList[0].y;
+            this.maxY = this.pointList[0].y;
+            this.pointList.forEach(it => {
+                let x = it.x, y = it.y;
+                if (x < this.minX) {
+                    this.minX = x;
+                }
+                if (y < this.minY) {
+                    this.minY = y;
+                }
+                if (x > this.maxX) {
+                    this.maxX = x;
+                }
+                if (y > this.maxY) {
+                    this.maxY = y;
+                }
+            });
+        }
+        ;
+        return new SRect(this.minX, this.minY, this.maxX - this.minX, this.maxY - this.minY);
+    } // Function boundingRect()
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x, y) {
+        let arr = this.pointList;
+        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
+            return false;
+        }
+        return true;
+    } // Function contains()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     */
+    onDraw(painter) {
+        this.scenceLen = painter.toPx(this.len);
+        // 当状态为展示状态
+        if (this.status == SItemStatus.Normal) {
+            // 闭合多边形
+            this.drawShowPolygon(painter, this.pointList);
+        }
+        else if (this.status == SItemStatus.Create) {
+            // 创建状态
+            this.drawCreatePolygon(painter, this.pointList);
+        }
+        else {
+            // 编辑状态
+            this.drawEditPolygon(painter, this.pointList);
+        }
+    } // Function onDraw()
+}

+ 680 - 0
src/components/mapClass/SPolygonItem.ts

@@ -0,0 +1,680 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate } from "@saga-web/graph/lib";
+import { SMouseEvent, SUndoStack } from "@saga-web/base/";;
+import {
+    SColor,
+    SLineCapStyle,
+    SPainter,
+    SPoint,
+    SRect,
+    SLine,
+    SPolygonUtil
+} from "@saga-web/draw";
+import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
+import { SItemStatus } from "@saga-web/big";
+
+/**
+ * 编辑多边形
+ *
+ * @author  韩耀龙
+ */
+export class SPolygonItem extends SGraphItem {
+    /** X坐标最小值  */
+    private minX = Number.MAX_SAFE_INTEGER;
+    /** X坐标最大值  */
+    private maxX = Number.MIN_SAFE_INTEGER;
+    /** Y坐标最小值  */
+    private minY = Number.MAX_SAFE_INTEGER;
+    /** Y坐标最大值  */
+    private maxY = Number.MIN_SAFE_INTEGER;
+    /** 轮廓线坐标  */
+    private pointList: SPoint[] = [];
+    // 获取当前状态
+    get getPointList(): SPoint[] {
+        return this.pointList;
+    }
+    // 编辑当前状态
+    set setPointList(arr: SPoint[]) {
+        this.pointList = arr;
+        this.update();
+    };
+    /** 是否闭合    */
+    closeFlag: boolean = false;
+    // 当前状态
+    protected _status: number = SItemStatus.Normal;
+    // 获取当前状态
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        this.update();
+    };
+    data: any | null = null;
+    /** 边框颜色 */
+    _strokeColor: SColor = new SColor("#0091FF");
+    /**  画笔颜色 */
+    get strokeColor(): SColor {
+        return this._strokeColor
+    };
+    set strokeColor(v: SColor) {
+        this._strokeColor = v
+    }
+    /** 填充颜色 */
+    _fillColor: SColor = new SColor("#1EE887");
+    get fillColor(): SColor {
+        return this._fillColor
+    };
+    set fillColor(v: SColor) {
+        this._fillColor = v
+    }
+
+    /** 边框的宽 只可输入像素宽*/
+    _lineWidth: number = 4;
+    get lineWidth(): number {
+        return this._lineWidth
+    }
+    set lineWidth(v: number) {
+        this._lineWidth = v;
+        this.update();
+    };
+    /** 鼠标移动点  */
+    private lastPoint: SPoint | null = null;
+    /** 当前鼠标获取顶点对应索引 */
+    private curIndex: number = -1;
+    /** 当前鼠标获取顶点对应坐标 */
+    private curPoint: null | SPoint = null
+    /** 灵敏像素 */
+    private len: number = 10;
+    /** 场景像素 内部将灵敏像素换算为场景实际距离  */
+    private scenceLen: number = 15;
+    /** 场景像素  */
+    private isAlt: boolean = false;
+    /** undoredo堆栈 */
+    protected undoStack: SUndoStack | null = new SUndoStack();
+
+    /**
+    * 构造函数
+    *
+    * @param parent    指向父对象
+    * @param data      PolygonData数据
+    */
+    constructor(parent: SGraphItem | null) {
+        super(parent);
+    }
+
+    //////////////////
+    //  以下为对pointList 数组的操作方法
+
+    /**
+     * 储存新的多边形顶点
+     *
+     * @param x   点位得x坐标
+     * @param y   点位得y坐标
+     * @param i   储存所在索引
+     * @return SPoint。添加的顶点
+     */
+    insertPoint(x: number, y: number, i: number | null = null): SPoint {
+        const point = new SPoint(x, y);
+        if (i == null) {
+            this.pointList.push(point)
+        } else {
+            this.pointList.splice(i, 0, point);
+        }
+        this.update()
+        return point
+    }
+
+    /**
+     * 删除点位
+     *
+     * @param i   删除点所在的索引
+     * @return    SPoint|null。索引不在数组范围则返回null
+     */
+    deletePoint(i: number | null = null): SPoint | null {
+        let point = null;
+        if (i != null) {
+            if (i >= (this.pointList.length) || i < 0) {
+                point = null
+            } else {
+                point = new SPoint(this.pointList[i].x, this.pointList[i].y);
+                this.pointList.splice(i, 1);
+            }
+        } else {
+            if (this.pointList.length) {
+                point = this.pointList[this.pointList.length - 1];
+                this.pointList.pop();
+            } else {
+                point = null
+            }
+        }
+        this.update()
+        return point
+    }
+
+    /**
+     * 多边形顶点的移动位置
+     *
+     * @param x   点位得x坐标
+     * @param y   点位得y坐标
+     * @param i   点位得i坐标
+     * @return    移动对应得点。如果索引无法找到移动顶点,则返回null
+     */
+    movePoint(x: number, y: number, i: number, ): SPoint | null {
+        let point = null;
+        if (i >= (this.pointList.length) || i < 0) {
+            return null
+        }
+        if (this.pointList.length) {
+            this.pointList[i].x = x;
+            this.pointList[i].y = y;
+        }
+        point = this.pointList[i];
+        return point
+    }
+
+    /**
+     * 打印出多边形数组
+     *
+     * @return  顶点数组
+     */
+    PrintPointList(): SPoint[] {
+        return this.pointList
+    }
+
+    ////////////
+    //  以下为三种状态下的绘制多边形方法
+
+    /**
+     * 展示状态 --绘制多边形数组
+     *
+     * @param painter      绘制类
+     * @param pointList    绘制多边形数组
+     */
+    protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        painter.brush.color = this._fillColor;
+        painter.drawPolygon([...pointList]);
+    }
+
+
+    /**
+     * 创建状态 --绘制多边形数组
+     *
+     * @param painter      绘制类
+     * @param pointList    绘制多边形数组
+     */
+    protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        if (this.lastPoint && pointList.length) {
+            painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
+        }
+        painter.drawPolyline(pointList);
+        painter.pen.color = SColor.Transparent;
+        painter.brush.color = this._fillColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        if (this.lastPoint) {
+            painter.drawPolygon([...pointList, this.lastPoint]);
+        } else {
+            painter.drawPolygon(pointList);
+        }
+
+    }
+
+    /**
+     *
+     * 编辑状态 --绘制多边形数组
+     *
+     * @param painter    绘制类
+     * @param pointList    绘制多边形数组
+     */
+    protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
+        // 展示多边形
+        this.drawShowPolygon(painter, pointList);
+        // 绘制顶点块
+        painter.pen.color = SColor.Black;
+        painter.brush.color = SColor.White;
+        pointList.forEach((item, index) => {
+            painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2))
+        })
+    }
+
+    /**
+     * 编辑状态操作多边形数组
+     *
+     * @param event    鼠标事件
+     *
+     *
+     */
+    protected editPolygonPoint(event: SMouseEvent): void {
+        //  判断是否为删除状态 isAlt = true为删除状态
+        if (this.isAlt) {
+            // 1 判断是否点击在多边形顶点
+            let lenIndex = -1;  // 当前点击到的点位索引;
+            let curenLen = this.scenceLen; // 当前的灵敏度
+            this.pointList.forEach((item, index) => {
+                let dis = SMathUtil.pointDistance(
+                    event.x,
+                    event.y,
+                    item.x,
+                    item.y
+                );
+                if (dis < curenLen) {
+                    curenLen = dis;
+                    lenIndex = index;
+                }
+            });
+            // 若点击到,对该索引对应的点做删除
+            if (lenIndex != -1) {
+                if (this.pointList.length <= 3) {
+                    return
+                }
+                const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y)
+                this.deletePoint(lenIndex);
+                // 记录顶点操作记录压入堆栈
+                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint, lenIndex]);
+            }
+        } else {
+            // 1 判断是否点击在多边形顶点
+            this.curIndex = -1;
+            this.curPoint = null;
+            let lenIndex = -1;  // 当前点击到的点位索引;
+            let curenLen = this.scenceLen; // 当前的灵敏度
+            this.pointList.forEach((item, index) => {
+                let dis = SMathUtil.pointDistance(
+                    event.x,
+                    event.y,
+                    item.x,
+                    item.y
+                );
+                if (dis < curenLen) {
+                    curenLen = dis;
+                    lenIndex = index;
+                }
+            });
+            this.curIndex = lenIndex;
+            // 2判断是否点击在多边形得边上
+            if (-1 == lenIndex) {
+                let len = SMathUtil.pointToLine(
+                    new SPoint(event.x, event.y),
+                    new SLine(this.pointList[0], this.pointList[1])
+                ),
+                    index = 0;
+                if (this.pointList.length > 2) {
+                    for (let i = 1; i < this.pointList.length; i++) {
+                        let dis = SMathUtil.pointToLine(
+                            new SPoint(event.x, event.y),
+                            new SLine(this.pointList[i], this.pointList[i + 1])
+                        );
+                        if ((i + 1) == this.pointList.length) {
+                            dis = SMathUtil.pointToLine(
+                                new SPoint(event.x, event.y),
+                                new SLine(this.pointList[i], this.pointList[0])
+                            );
+                        }
+                        if (dis.MinDis < len.MinDis) {
+                            len = dis;
+                            index = i;
+                        }
+                    }
+                }
+                // 判断是否有点
+                if (len.Point) {
+                    console.log(index,len.Point);
+                    // 点在了多边形的边上
+                    if (len.MinDis <= this.scenceLen) {
+                        this.pointList.splice(index + 1, 0, len.Point);
+                        // 记录新增顶点操作记录压入堆栈
+                        this.recordAction(SGraphPointListInsert, [this.pointList, len.Point, index + 1]);
+                    } else { //没点在多边形边上也没点在多边形顶点上
+                        super.onMouseDown(event);
+                    }
+                }
+            } else {
+                // 当捕捉到顶点后 ,记录当前点的xy坐标,用于undo、redo操作
+                this.curPoint = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
+            }
+            // 刷新视图
+            this.update();
+        }
+
+    }
+
+    /////////////////////
+    // undo、redo相关操作
+
+    /**
+     * 记录相关动作并推入栈中
+     * @param	SGraphCommand         相关命令类
+     * @param	any                    对应传入参数
+     */
+    protected recordAction(SGraphCommand: any, any: any[]): void {
+        // 记录相关命令并推入堆栈中
+        const sgraphcommand = new SGraphCommand(this, ...any);
+        if (this.undoStack) {
+            this.undoStack.push(sgraphcommand);
+        }
+    }
+
+    /**
+     * 执行取消操作执行
+     */
+    undo(): void {
+        if (this.status == SItemStatus.Normal) {
+            return
+        }
+        if (this.undoStack) {
+            this.undoStack.undo();
+        }
+    }
+
+    /**
+     * 执行重做操作执行
+     */
+    redo(): void {
+        if (this.status == SItemStatus.Normal) {
+            return
+        }
+        if (this.undoStack) {
+            this.undoStack.redo();
+        }
+    }
+
+    ///////////////////////////////
+    // 以下为鼠标事件
+
+    /**
+     * 鼠标双击事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onDoubleClick(event: SMouseEvent): boolean {
+        // 如果位show状态 双击改对象则需改为编辑状态
+        if (SItemStatus.Normal == this.status) {
+            this.status = SItemStatus.Edit;
+            this.grabItem(this);
+        } else if (SItemStatus.Edit == this.status) {
+            this.status = SItemStatus.Normal;
+            this.releaseItem();
+            if (this.undoStack) {
+                this.undoStack.clear()
+            }
+        }
+        this.update()
+        return true;
+    } // Function onDoubleClick()
+
+
+    /**
+     * 键盘事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+
+    onKeyDown(event: KeyboardEvent): boolean {
+        if (this.status == SItemStatus.Normal) {
+            return false;
+        } else if (this.status == SItemStatus.Create) {
+            if (event.code == 'Enter') {
+                // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
+                if (this.pointList.length > 2) {
+                    this.status = SItemStatus.Normal;
+                    //3 传递完成事件状态
+                    this.$emit('finishCreated')
+                    //1 grabItem 置为null
+                    this.releaseItem();
+                    //2 清空undo
+                    if (this.undoStack) {
+                        this.undoStack.clear();
+                    }
+                }
+            }
+        } else if (this.status == SItemStatus.Edit) {
+            if (event.key == 'Alt') {
+                this.isAlt = true;
+            }
+        }
+        this.update();
+        return true;
+    } // Function onKeyDown()
+
+
+    /**
+     * 键盘键抬起事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onKeyUp(event: KeyboardEvent): void {
+        if (this.status == SItemStatus.Edit) {
+            if (event.key == 'Alt') {
+                this.isAlt = false;
+            }
+        }
+        this.update()
+    } // Function onKeyUp()
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        // 如果状态为编辑状态则添加点
+        if (this.status == SItemStatus.Create) {
+            // 新增顶点
+            this.insertPoint(event.x, event.y);
+            // 记录新增顶点操作记录压入堆栈
+            let pos = new SPoint(event.x, event.y);
+            this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
+        } else if (this.status == SItemStatus.Edit) {
+            // 对多边形数组做编辑操作
+            this.editPolygonPoint(event);
+        } else {
+            return super.onMouseDown(event)
+        }
+        return true;
+
+    } // Function onMouseDown()
+
+    /**
+     * 鼠标移入事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseEnter(event: SMouseEvent): boolean {
+        return true;
+    } // Function onMouseEnter()
+
+
+    /**
+     * 鼠标移出事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+
+    onMouseLeave(event: SMouseEvent): boolean {
+        return true;
+    } // Function onMouseLeave()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+
+    onMouseMove(event: SMouseEvent): boolean {
+        if (this.status == SItemStatus.Create) {
+            this.lastPoint = new SPoint
+            this.lastPoint.x = event.x;
+            this.lastPoint.y = event.y;
+            this.update();
+        } else if (this.status == SItemStatus.Edit) {
+            if (-1 != this.curIndex) {
+                this.pointList[this.curIndex].x = event.x;
+                this.pointList[this.curIndex].y = event.y;
+            }
+            this.update()
+        } else {
+            // return super.onMouseMove(event)
+        }
+
+        return true;
+    } // Function onMouseMove()
+
+
+    /**
+     * 鼠标抬起事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onMouseUp(event: SMouseEvent): boolean {
+        if (this.status == SItemStatus.Edit) {
+            if (-1 != this.curIndex) {
+                const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y)
+                this.recordAction(SGraphPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex])
+            }
+            this.curIndex = -1;
+            this.curPoint = null;
+        } else {
+            // return super.onMouseUp(event)
+        }
+        return true;
+    } // Function onMouseUp()
+
+    /**
+     * 适配事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+
+    onResize(event: SMouseEvent): boolean {
+        return true;
+    } // Function onResize()
+
+    /**
+     * 取消操作
+     *
+     * @param   painter       painter对象
+     */
+    cancelOperate(): void {
+        // 当状态为展示状态
+        if (this.status == SItemStatus.Create) {
+            // 闭合多边形
+            this.parent = null
+        } else if (this.status == SItemStatus.Edit) {
+            // 编辑状态
+            this.status = SItemStatus.Normal
+        }
+        this.update()
+    } // Function cancelOperate()
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        if (this.pointList.length) {
+            this.minX = this.pointList[0].x;
+            this.maxX = this.pointList[0].x;
+            this.minY = this.pointList[0].y;
+            this.maxY = this.pointList[0].y;
+            this.pointList.forEach(it => {
+                let x = it.x,
+                    y = it.y;
+                if (x < this.minX) {
+                    this.minX = x;
+                }
+                if (y < this.minY) {
+                    this.minY = y;
+                }
+                if (x > this.maxX) {
+                    this.maxX = x;
+                }
+                if (y > this.maxY) {
+                    this.maxY = y;
+                }
+            });
+        };
+        return new SRect(
+            this.minX,
+            this.minY,
+            this.maxX - this.minX,
+            this.maxY - this.minY
+        );
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let arr = this.pointList;
+        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
+            return false;
+        }
+        return true;
+    } // Function contains()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     */
+    onDraw(painter: SPainter): void {
+        this.scenceLen = painter.toPx(this.len)
+        // 当状态为展示状态
+        if (this.status == SItemStatus.Normal) {
+            // 闭合多边形
+            this.drawShowPolygon(painter, this.pointList);
+        } else if (this.status == SItemStatus.Create) {
+            // 创建状态
+            this.drawCreatePolygon(painter, this.pointList)
+        } else {
+            // 编辑状态
+            this.drawEditPolygon(painter, this.pointList);
+        }
+    } // Function onDraw()
+
+
+}

+ 23 - 0
src/components/mapClass/until.js

@@ -0,0 +1,23 @@
+//rgba转成16进制
+export function hexify(color) {
+    var values = color
+        .replace(/rgba?\(/, '')
+        .replace(/\)/, '')
+        .replace(/[\s+]/g, '')
+        .split(',');
+    var a = parseFloat(values[3] || 1), r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255), g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255), b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
+    return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2);
+}
+//  生成uuid
+export function uuid() {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+    var uuid = s.join("");
+    return uuid;
+}

+ 27 - 0
src/components/mapClass/until.ts

@@ -0,0 +1,27 @@
+ //rgba转成16进制
+ export function hexify(color:string):string {
+     var values = color
+         .replace(/rgba?\(/, '')
+         .replace(/\)/, '')
+         .replace(/[\s+]/g, '')
+         .split(',')
+     var a = parseFloat(values[3] || 1),
+         r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
+         g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
+         b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
+     return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
+ }
+//  生成uuid
+ export function uuid() {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+
+    var uuid = s.join("");
+    return uuid;
+}

+ 16 - 0
src/lib/enums/SGraphElementType.js

@@ -0,0 +1,16 @@
+/**
+ * 图标,区域类型
+ *
+ * @author  张宇
+ */
+export var SGraphElementType;
+(function (SGraphElementType) {
+    /** 非图例    */
+    SGraphElementType[SGraphElementType["None"] = 0] = "None";
+    /** 线类型    */
+    SGraphElementType[SGraphElementType["Line"] = 1] = "Line";
+    /** 区域类型    */
+    SGraphElementType[SGraphElementType["Zone"] = 2] = "Zone";
+    /** 图类型    */
+    SGraphElementType[SGraphElementType["Image"] = 3] = "Image";
+})(SGraphElementType || (SGraphElementType = {})); // Enum SGraphElementType

+ 15 - 0
src/lib/enums/SGraphElementType.ts

@@ -0,0 +1,15 @@
+/**
+ * 图标,区域类型
+ *
+ * @author  张宇
+ */
+export enum SGraphElementType {
+    /** 非图例    */
+    None,
+    /** 线类型    */
+    Line,
+    /** 区域类型    */
+    Zone,
+    /** 图类型    */
+    Image
+} // Enum SGraphElementType

+ 14 - 0
src/lib/enums/SLineStyle.js

@@ -0,0 +1,14 @@
+/**
+ * 线样式
+ *
+ * @author  张宇
+ */
+export var SLineStyle;
+(function (SLineStyle) {
+    /** 实线    */
+    SLineStyle[SLineStyle["Soild"] = 0] = "Soild";
+    /** 虚线    */
+    SLineStyle[SLineStyle["Dashed"] = 1] = "Dashed";
+    /** 点线    */
+    SLineStyle[SLineStyle["Dotted"] = 2] = "Dotted";
+})(SLineStyle || (SLineStyle = {})); // Enum SLineStyle

+ 13 - 0
src/lib/enums/SLineStyle.ts

@@ -0,0 +1,13 @@
+/**
+ * 线样式
+ *
+ * @author  张宇
+ */
+export enum SLineStyle {
+    /** 实线    */
+    Soild,
+    /** 虚线    */
+    Dashed,
+    /** 点线    */
+    Dotted
+} // Enum SLineStyle

+ 14 - 0
src/lib/enums/SMarkerType.js

@@ -0,0 +1,14 @@
+/**
+ * 标识对象类型
+ *
+ * @author  张宇
+ */
+export var SMarkerType;
+(function (SMarkerType) {
+    /** 图标    */
+    SMarkerType[SMarkerType["Image"] = 0] = "Image";
+    /** 线类型    */
+    SMarkerType[SMarkerType["Line"] = 1] = "Line";
+    /** 文本类型    */
+    SMarkerType[SMarkerType["Text"] = 2] = "Text";
+})(SMarkerType || (SMarkerType = {})); // Enum SMarkerType

+ 13 - 0
src/lib/enums/SMarkerType.ts

@@ -0,0 +1,13 @@
+/**
+ * 标识对象类型
+ *
+ * @author  张宇
+ */
+export enum SMarkerType {
+    /** 图标    */
+    Image,
+    /** 线类型    */
+    Line,
+    /** 文本类型    */
+    Text
+} // Enum SMarkerType

+ 54 - 0
src/lib/items/SImageLegendItem.js

@@ -0,0 +1,54 @@
+import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
+import { ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(图标类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SImageLegendItem extends SIconTextItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        /** 图例数量 */
+        this._num = 0;
+        this.zOrder = ItemOrder.markOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Num) {
+            this._num = data.Num;
+        }
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Text) {
+            this.text = `${data.Properties.Text}${data.Num ? ` × ${data.Num}` : ''}`;
+        }
+        if (data.Properties && data.Properties.Url) {
+            this.img.url = data.Properties.Url;
+        }
+    }
+    get num() {
+        return this._num;
+    }
+    set num(v) {
+        this._num = v;
+        this.data.Num = v;
+        this.update();
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Size = { Width: this.width, Height: this.height };
+        this.data.Num = this.num;
+        this.data.Properties.Text = this.text;
+        this.data.Properties.Url = this.img.url;
+        return this.data;
+    }
+} // Class SImageLegendItem

+ 62 - 0
src/lib/items/SImageLegendItem.ts

@@ -0,0 +1,62 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
+import { Legend } from '../types/Legend';
+import { ItemOrder } from '@saga-web/big/lib';
+
+/**
+ * 图例节点Item(图标类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SImageLegendItem extends SIconTextItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+    /** 图例数量 */
+    _num: number = 0;
+    get num(): number {
+        return this._num;
+    }
+    set num(v: number) {
+        this._num = v;
+        this.data.Num = v;
+        this.update();
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.markOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Num) {
+            this._num = data.Num;
+        }
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Text) {
+            this.text = `${data.Properties.Text}${data.Num?` × ${data.Num}`:''}`;
+        }
+        if (data.Properties && data.Properties.Url) {
+            this.img.url = data.Properties.Url;
+        }
+    }
+
+    toData(): Legend {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Size = {Width: this.width, Height: this.height};
+        this.data.Num = this.num;
+        this.data.Properties.Text = this.text;
+        this.data.Properties.Url = this.img.url;
+        return this.data;
+    }
+} // Class SImageLegendItem

+ 36 - 0
src/lib/items/SImageMarkerItem.js

@@ -0,0 +1,36 @@
+import { SImageItem } from "@saga-web/graph/lib";
+import { ItemOrder } from '@saga-web/big/lib';
+/**
+ * 标识对象Item(图标类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SImageMarkerItem extends SImageItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        this.zOrder = ItemOrder.imageOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Url) {
+            this.url = data.Properties.Url;
+        }
+    } // Constructor
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Size = { Width: this.width, Height: this.height };
+        this.data.Properties.Url = this.url;
+        return this.data;
+    }
+} // Class SImageMarkerItem

+ 44 - 0
src/lib/items/SImageMarkerItem.ts

@@ -0,0 +1,44 @@
+
+import { SGraphItem, SImageItem, SImageShowType } from "@saga-web/graph/lib";
+import { SPainter } from "@saga-web/draw";
+import { Marker } from '../types/Marker';
+import { ItemOrder } from '@saga-web/big/lib';
+
+/**
+ * 标识对象Item(图标类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SImageMarkerItem extends SImageItem {
+    /** 标识对象数据 */
+    data: Marker;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent);
+        this.zOrder = ItemOrder.imageOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Url) {
+            this.url = data.Properties.Url;
+        }
+    } // Constructor
+
+    toData(): Marker {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Size = {Width: this.width, Height: this.height};
+        this.data.Properties.Url = this.url;
+        return this.data;
+    }
+} // Class SImageMarkerItem

+ 155 - 0
src/lib/items/SImgTextItem.js

@@ -0,0 +1,155 @@
+import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
+import { SColor } from '@saga-web/draw/lib';
+import { SObjectItem, SImageItem, STextItem, SAnchorItem } from '@saga-web/graph/lib';
+/**
+     * 图例item  icon
+     *
+     * */
+export class SImgTextItem extends SObjectItem {
+    /**
+     * 构造体
+     *
+     * */
+    constructor(parent) {
+        super(parent);
+        /** item状态  */
+        this._status = SItemStatus.Normal;
+        /** 是否显示文字  */
+        this._showText = true;
+        /** 是否显示锚点  */
+        this._showAnchor = false;
+        /** img Item    */
+        this.img = new SImageItem(this);
+        /** text item   */
+        this.textItem = new STextItem(this);
+        this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+        this.img.width = 32;
+        this.img.height = 32;
+        let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+        this.anchorList = anchorPoint.map(t => {
+            let item = new SAnchorItem(this);
+            item.moveTo(t.x, t.y);
+            return item;
+        });
+        this.update();
+        this.textItem.text = "请填写文本";
+        this.textItem.moveTo(16, -6);
+        this.moveable = true;
+        this.selectable = true;
+        this.isTransform = false;
+        this.textItem.enabled = false;
+        this.img.enabled = false;
+    }
+    get status() {
+        return this._status;
+    }
+    set status(v) {
+        this._status = v;
+        this.update();
+    }
+    get showText() {
+        return this._showText;
+    }
+    set showText(v) {
+        if (v === this._showText) {
+            return;
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        }
+        else {
+            this.textItem.hide();
+        }
+    }
+    /** X轴坐标 */
+    get x() {
+        return this.pos.x;
+    } // Get x
+    set x(v) {
+        this.pos.x = v;
+        this.$emit("changePos");
+        this.update();
+    } // Set x
+    /** Y轴坐标 */
+    get y() {
+        return this.pos.y;
+    } // Get y
+    set y(v) {
+        this.pos.y = v;
+        this.$emit("changePos");
+        this.update();
+    } // Set y
+    get showAnchor() {
+        return this._showAnchor;
+    }
+    set showAnchor(v) {
+        this._showAnchor = v;
+        this.anchorList.forEach(t => {
+            t.visible = v;
+        });
+    }
+    get text() {
+        return this.textItem.text;
+    }
+    set text(v) {
+        this.textItem.text = v;
+        this.update();
+    }
+    /**
+     * 鼠标按下事件
+     *
+     * */
+    onMouseDown(event) {
+        console.log(this);
+        if (this.status == SItemStatus.Normal) {
+            return super.onMouseDown(event);
+        }
+        else if (this.status == SItemStatus.Edit) {
+            return super.onMouseDown(event);
+        }
+        return true;
+    } // Function onMouseDown()
+    /**
+     * 宽高发发生变化
+     *
+     * @param   oldSize 改之前的大小
+     * @param   newSize 改之后大小
+     * */
+    onResize(oldSize, newSize) {
+        console.log(arguments);
+    } // Function onResize()
+    /**
+     * 鼠标双击事件
+     *
+     * @param   event   鼠标事件
+     * @return  是否处理事件
+     * */
+    onDoubleClick(event) {
+        this.status = SItemStatus.Edit;
+        return true;
+    } // Function onDoubleClick()
+    /**
+     * 宽高发生变化
+     *
+     * @return  SRect   所有子对象的并集
+     * */
+    boundingRect() {
+        let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
+        if (this.showText) {
+            rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0));
+        }
+        return rect;
+    } // Function boundingRect()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter painter对象
+     */
+    onDraw(painter) {
+        painter.pen.lineWidth = painter.toPx(1);
+        painter.pen.color = new SColor("#00FF00");
+        painter.brush.color = SColor.Transparent;
+        painter.drawRect(this.boundingRect());
+    } // Function onDraw()
+}

+ 173 - 0
src/lib/items/SImgTextItem.ts

@@ -0,0 +1,173 @@
+import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
+import { SGraphItem } from '@saga-web/graph/lib/SGraphItem';
+import { STextBaseLine } from '@saga-web/draw/lib';
+import { SMouseEvent } from '@saga-web/base/lib/SMouseEvent';
+import { SSize } from '@saga-web/draw/lib';
+import { SPainter } from '@saga-web/draw/lib';
+import { SColor } from '@saga-web/draw/lib';
+import { SRect } from '@saga-web/draw/lib';
+import { SObjectItem, SImageItem, STextItem, SAnchorItem } from '@saga-web/graph/lib';
+
+/**
+     * 图例item  icon
+     *
+     * */
+export class SImgTextItem extends SObjectItem {
+
+  /** item状态  */
+  _status: SItemStatus = SItemStatus.Normal;
+  get status(): SItemStatus {
+    return this._status;
+  }
+  set status(v: SItemStatus) {
+    this._status = v;
+    this.update();
+  }
+
+  /** 是否显示文字  */
+  _showText: boolean = true;
+  get showText(): boolean {
+    return this._showText;
+  }
+  set showText(v: boolean) {
+    if (v === this._showText) {
+      return
+    }
+    this._showText = v;
+    if (v) {
+      this.textItem.show();
+    } else {
+      this.textItem.hide();
+    }
+  }
+
+  /** X轴坐标 */
+  get x(): number {
+    return this.pos.x;
+  } // Get x
+  set x(v: number) {
+    this.pos.x = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set x
+  /** Y轴坐标 */
+  get y(): number {
+    return this.pos.y;
+  } // Get y
+  set y(v: number) {
+    this.pos.y = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set y
+
+  /** 是否显示锚点  */
+  _showAnchor: boolean = false;
+  get showAnchor(): boolean {
+    return this._showAnchor;
+  }
+  set showAnchor(v: boolean) {
+    this._showAnchor = v;
+    this.anchorList.forEach(t => {
+      t.visible = v;
+    })
+  }
+
+  get text():string{
+    return this.textItem.text;
+  }
+  set text(v:string){
+    this.textItem.text = v;
+    this.update();
+  }
+
+  /** img Item    */
+  img: SImageItem = new SImageItem(this);
+
+  /** text item   */
+  textItem: STextItem = new STextItem(this);
+
+  /**
+   * 构造体
+   *
+   * */
+  constructor(parent: SGraphItem | null) {
+    super(parent);
+    this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+    this.img.width = 32;
+    this.img.height = 32;
+    let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+    this.anchorList = anchorPoint.map(t => {
+      let item = new SAnchorItem(this);
+      item.moveTo(t.x, t.y);
+      return item;
+    });
+    this.update();
+    this.textItem.text = "请填写文本";
+    this.textItem.moveTo(16, -6);
+    this.moveable = true;
+    this.selectable = true;
+    this.isTransform = false;
+    this.textItem.enabled = false;
+    this.img.enabled = false;
+  }
+
+  /**
+   * 鼠标按下事件
+   *
+   * */
+  onMouseDown(event: SMouseEvent): boolean {
+    console.log(this)
+    if (this.status == SItemStatus.Normal) {
+      return super.onMouseDown(event);
+    } else if (this.status == SItemStatus.Edit) {
+      return super.onMouseDown(event);
+    }
+    return true;
+  } // Function onMouseDown()
+
+  /**
+   * 宽高发发生变化
+   *
+   * @param   oldSize 改之前的大小
+   * @param   newSize 改之后大小
+   * */
+  onResize(oldSize: SSize, newSize: SSize) {
+    console.log(arguments);
+  } // Function onResize()
+
+  /**
+   * 鼠标双击事件
+   *
+   * @param   event   鼠标事件
+   * @return  是否处理事件
+   * */
+  onDoubleClick(event: SMouseEvent): boolean {
+    this.status = SItemStatus.Edit;
+    return true;
+  } // Function onDoubleClick()
+
+  /**
+   * 宽高发生变化
+   *
+   * @return  SRect   所有子对象的并集
+   * */
+  boundingRect(): SRect {
+    let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.pos.y,0,0);
+    if (this.showText) {
+        rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x,this.textItem.pos.y,0,0))
+    }
+    return rect;
+  } // Function boundingRect()
+
+  /**
+   * Item绘制操作
+   *
+   * @param   painter painter对象
+   */
+  onDraw(painter: SPainter): void {
+    painter.pen.lineWidth = painter.toPx(1);
+    painter.pen.color = new SColor("#00FF00");
+    painter.brush.color = SColor.Transparent;
+    painter.drawRect(this.boundingRect());
+  } // Function onDraw()
+}

+ 47 - 0
src/lib/items/SLineLegendItem.js

@@ -0,0 +1,47 @@
+import { SPoint } from "@saga-web/draw/lib";
+import { SPolylineItem } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(线类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SLineLegendItem extends SPolylineItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent, []);
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Properties && data.Properties.Line) {
+            let setPointList;
+            setPointList = data.Properties.Line.map(i => {
+                return new SPoint(i.x, i.y);
+            });
+            this.pointList = setPointList;
+        }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+        if (data.Properties && data.Properties.StrokeColor) {
+            this.strokeColor = data.Properties.StrokeColor;
+        }
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Properties.Line = this.pointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            };
+        });
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Properties.StrokeColor = this.strokeColor;
+        return this.data;
+    }
+} // Class SLineLegendItem

+ 55 - 0
src/lib/items/SLineLegendItem.ts

@@ -0,0 +1,55 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPoint } from "@saga-web/draw/lib";
+import { SPolylineItem } from '@saga-web/big/lib';
+import { Legend } from '../types/Legend';
+
+/**
+ * 图例节点Item(线类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SLineLegendItem extends SPolylineItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent,[]);
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Properties && data.Properties.Line) {
+            let setPointList: SPoint[];
+            setPointList = data.Properties.Line.map(i => {
+                return new SPoint(i.x, i.y)
+            })
+            this.pointList = setPointList;
+        }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+        if (data.Properties && data.Properties.StrokeColor) {
+            this.strokeColor = data.Properties.StrokeColor;
+        }
+    }
+
+    toData(): Legend {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Properties.Line = this.pointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Properties.StrokeColor = this.strokeColor;
+        return this.data;
+    }
+} // Class SLineLegendItem

+ 52 - 0
src/lib/items/SLineMarkerItem.js

@@ -0,0 +1,52 @@
+import { SPoint } from "@saga-web/draw/lib";
+import { SLineItem, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 标识对象Item(线类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SLineMarkerItem extends SLineItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        this.zOrder = ItemOrder.lineOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Properties && data.Properties.Line) {
+            let setPointList;
+            setPointList = data.Properties.Line.map(i => {
+                return new SPoint(i.X, i.Y);
+            });
+            this.line = setPointList;
+        }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+        if (data.Properties && data.Properties.LineStyle) {
+            this.lineStyle = data.Properties.LineStyle;
+        }
+        if (data.Properties && data.Properties.StrokeColor) {
+            this.strokeColor = data.Properties.StrokeColor;
+        }
+    } // Constructor
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Properties.Line = this.line.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            };
+        });
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Properties.StrokeColor = this.strokeColor;
+        this.data.Properties.LineStyle = this.lineStyle;
+        return this.data;
+    }
+} // Class SLineMarkerItem

+ 61 - 0
src/lib/items/SLineMarkerItem.ts

@@ -0,0 +1,61 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPoint } from "@saga-web/draw/lib";
+import { SLineItem, ItemOrder } from '@saga-web/big/lib';
+import { Marker } from '../types/Marker';
+
+/**
+ * 标识对象Item(线类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SLineMarkerItem extends SLineItem {
+    /** 标识对象数据 */
+    data: Marker;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent);
+        this.zOrder = ItemOrder.lineOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Properties && data.Properties.Line) {
+            let setPointList: SPoint[];
+            setPointList = data.Properties.Line.map(i => {
+                return new SPoint(i.X, i.Y)
+            })
+            this.line = setPointList;
+        }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+        if (data.Properties && data.Properties.LineStyle) {
+            this.lineStyle = data.Properties.LineStyle;
+        }
+        if (data.Properties && data.Properties.StrokeColor) {
+            this.strokeColor = data.Properties.StrokeColor;
+        }
+    } // Constructor
+
+    toData(): Marker {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Properties.Line = this.line.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Properties.StrokeColor = this.strokeColor;
+        this.data.Properties.LineStyle = this.lineStyle;
+        return this.data;
+    }
+
+} // Class SLineMarkerItem

+ 22 - 0
src/lib/items/SNoneLegendItem.js

@@ -0,0 +1,22 @@
+import { SGraphItem } from "@saga-web/graph/lib";
+/**
+ * 图例节点Item(非图例类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SNoneLegendItem extends SGraphItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        this.data = data;
+        this.id = data.ID;
+    }
+    toData() {
+        return this.data;
+    }
+} // Class SNoneLegendItem

+ 28 - 0
src/lib/items/SNoneLegendItem.ts

@@ -0,0 +1,28 @@
+import { SGraphItem } from "@saga-web/graph/lib";
+import { Legend } from '../types/Legend';
+
+/**
+ * 图例节点Item(非图例类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SNoneLegendItem extends SGraphItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.data = data;
+        this.id = data.ID;
+    }
+
+    toData(): Legend {
+        return this.data;
+    }
+} // Class SNoneLegendItem

+ 92 - 0
src/lib/items/STextMarkerItem.js

@@ -0,0 +1,92 @@
+import { STextItem } from "@saga-web/graph/lib";
+import { SColor, SFont } from "@saga-web/draw";
+import { SLineStyle } from '../enums/SLineStyle';
+import { ItemOrder } from '@saga-web/big/lib';
+/**
+ * 标识对象Item(文本类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class STextMarkerItem extends STextItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        /** 边框宽度 */
+        this._lineWidth = 1;
+        /** 边框样式    */
+        this._borderStyle = SLineStyle.Soild;
+        this.zOrder = ItemOrder.textOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Text) {
+            this.text = data.Properties.Text;
+        }
+        if (data.Properties && data.Properties.Color) {
+            this.color = data.Properties.Color;
+        }
+        if (data.Properties && data.Properties.Font) {
+            this.font = new SFont("sans-serif", data.Properties.Font);
+            ;
+        }
+        if (data.Properties && data.Properties.BackgroundColor) {
+            this.backgroundColor = data.Properties.BackgroundColor;
+        }
+    } // Constructor
+    get lineWidth() {
+        return this._lineWidth;
+    }
+    set lineWidth(v) {
+        this._lineWidth = v;
+        this.update();
+    }
+    get borderStyle() {
+        return this._borderStyle;
+    }
+    set borderStyle(v) {
+        this._borderStyle = v;
+        this.update();
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Size = { Width: this.width, Height: this.height };
+        this.data.Properties.Text = this.text;
+        this.data.Properties.Color = this.color;
+        this.data.Properties.Font = this.font.size;
+        this.data.Properties.BackgroundColor = this.backgroundColor;
+        return this.data;
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter      绘画类
+     */
+    onDraw(painter) {
+        // 绘制文本
+        painter.brush.color = new SColor(this.color);
+        painter.font = this.font;
+        if (this.borderStyle == SLineStyle.Dashed) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth * 3),
+                painter.toPx(this.lineWidth * 7)
+            ];
+        }
+        else if (this.borderStyle == SLineStyle.Dotted) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth),
+                painter.toPx(this.lineWidth)
+            ];
+        }
+        this.drawFormatText(painter);
+    } // Function onDraw()
+} // Class STextMarkerItem

+ 99 - 0
src/lib/items/STextMarkerItem.ts

@@ -0,0 +1,99 @@
+import { SGraphItem, STextItem } from "@saga-web/graph/lib";
+import { SPainter, SColor,SFont } from "@saga-web/draw";
+import { Marker } from '../types/Marker';
+import { SLineStyle } from '../enums/SLineStyle';
+import { ItemOrder } from '@saga-web/big/lib';
+
+/**
+ * 标识对象Item(文本类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class STextMarkerItem extends STextItem {
+    /** 标识对象数据 */
+    data: Marker;
+
+    /** 边框宽度 */
+    private _lineWidth: number = 1;
+    get lineWidth(): number {
+        return this._lineWidth;
+    }
+    set lineWidth(v: number) {
+        this._lineWidth = v;
+        this.update();
+    }
+
+    /** 边框样式    */
+    private _borderStyle: SLineStyle = SLineStyle.Soild;
+    get borderStyle(): SLineStyle {
+        return this._borderStyle;
+    }
+    set borderStyle(v: SLineStyle) {
+        this._borderStyle = v;
+        this.update();
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      标识对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent);
+        this.zOrder = ItemOrder.textOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.moveTo(data.Pos.X, data.Pos.Y);
+        if (data.Size) {
+            this.width = data.Size.Width;
+            this.height = data.Size.Height;
+        }
+        if (data.Properties && data.Properties.Text) {
+            this.text = data.Properties.Text;
+        }
+        if (data.Properties && data.Properties.Color) {
+            this.color = data.Properties.Color
+        }
+        if (data.Properties && data.Properties.Font) {
+            this.font = new SFont("sans-serif", data.Properties.Font);;
+        }
+        if (data.Properties && data.Properties.BackgroundColor) {
+            this.backgroundColor = data.Properties.BackgroundColor
+        }
+    } // Constructor
+
+    toData(): Marker {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Size = {Width: this.width, Height: this.height};
+        this.data.Properties.Text = this.text;
+        this.data.Properties.Color = this.color;
+        this.data.Properties.Font = this.font.size
+        this.data.Properties.BackgroundColor = this.backgroundColor
+        return this.data;
+    }
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter      绘画类
+     */
+    onDraw(painter: SPainter): void {
+        // 绘制文本
+        painter.brush.color = new SColor(this.color);
+        painter.font = this.font;
+        if (this.borderStyle == SLineStyle.Dashed) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth * 3),
+                painter.toPx(this.lineWidth * 7)
+            ];
+        } else if (this.borderStyle == SLineStyle.Dotted) {
+            painter.pen.lineDash = [
+                painter.toPx(this.lineWidth),
+                painter.toPx(this.lineWidth)
+            ];
+        }
+        this.drawFormatText(painter);
+    } // Function onDraw()
+} // Class STextMarkerItem

+ 154 - 0
src/lib/items/SZoneLegendItem.js

@@ -0,0 +1,154 @@
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until";
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SZoneLegendItem extends SPolygonItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        /** text item   */
+        this.textItem = new STextItem(this);
+        /** 是否显示文字  */
+        this._showText = true;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList;
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                }
+                else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y));
+                    });
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth;
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated", this, () => {
+            // 计算文本位置
+            let x = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.x / arr.length);
+            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.y / arr.length);
+            }, 0);
+            this.textItem.moveTo(x, y);
+        });
+    }
+    get text() {
+        return this.textItem.text;
+    }
+    set text(v) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color() {
+        return this.textItem.color;
+    }
+    set color(v) {
+        this.textItem.color = v;
+    }
+    get font() {
+        return this.textItem.font;
+    }
+    set font(v) {
+        this.textItem.font = v;
+    }
+    get status() {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        }
+        else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+        console.log("多边形item", this);
+        console.log("文本item", this.textItem);
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    set showText(v) {
+        if (v === this._showText) {
+            return;
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        }
+        else {
+            this.textItem.hide();
+        }
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            };
+        });
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        return this.data;
+    }
+} // Class SZoneLegendItem

+ 163 - 0
src/lib/items/SZoneLegendItem.ts

@@ -0,0 +1,163 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SZoneLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+        console.log("多边形item", this);
+        console.log("文本item", this.textItem);
+    };
+
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated",this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.x / arr.length)
+                            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.y / arr.length)
+                            }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        return this.data;
+    }
+
+} // Class SZoneLegendItem

+ 133 - 0
src/lib/items/TipelineItem.js

@@ -0,0 +1,133 @@
+import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPoint } from "@saga-web/draw/lib";
+/**
+ * 管道item
+ *
+ * */
+export class TipelineItem extends SPolylineItem {
+    constructor(parent, data) {
+        super(parent, []);
+        /** 起始锚点  */
+        this.startAnchor = null;
+        /** 结束锚点  */
+        this.endAnchor = null;
+        /** 对应的图例ID  */
+        this._graphElementId = "";
+        /** 关联节点1ID  */
+        this._node1Id = "";
+        /** 关联节点2ID  */
+        this._node2Id = "";
+        /** 关联锚点1ID  */
+        this._anchor1ID = "";
+        /** 关联锚点2ID  */
+        this._anchor2ID = "";
+        /** 数据存储  */
+        this.data = null;
+        this.zOrder = ItemOrder.polylineOrder;
+        this.pointList = data.PointList.map(item => {
+            return new SPoint(item.X, item.Y);
+        });
+        this.data = data;
+        this.id = data.ID;
+        if (data.GraphElementId) {
+            this._graphElementId = data.GraphElementId;
+        }
+        if (data.Node1ID) {
+            this._node1Id = data.Node1ID;
+        }
+        if (data.Node2ID) {
+            this._node2Id = data.Node2ID;
+        }
+        if (data.Anchor1ID) {
+            this._anchor1ID = data.Anchor1ID;
+        }
+        if (data.Anchor2ID) {
+            this._anchor2ID = data.Anchor2ID;
+        }
+        if (data.Properties && data.Properties.Color) {
+            this.strokeColor = data.Properties.Color;
+        }
+        // if(data.Properties && data.Properties.LineDash){
+        //   this.LineDash = data.Properties.LineDash
+        // }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth;
+        }
+    }
+    get graphElementId() {
+        return this._graphElementId;
+    }
+    set graphElementId(v) {
+        this._graphElementId = v;
+        if (this.data) {
+            this.data.GraphElementId = this._graphElementId;
+        }
+    }
+    get node1Id() {
+        return this._node1Id;
+    }
+    set node1Id(v) {
+        this._node1Id = v;
+        if (this.data) {
+            this.data.Node1ID = this._node1Id;
+        }
+    }
+    get node2Id() {
+        return this._node2Id;
+    }
+    set node2Id(v) {
+        this._node2Id = v;
+        if (this.data) {
+            this.data.Node2ID = this._node2Id;
+        }
+    }
+    get anchor1ID() {
+        return this._anchor1ID;
+    }
+    set anchor1ID(v) {
+        this._anchor1ID = v;
+        if (this.data) {
+            this.data.Anchor1ID = this._anchor1ID;
+        }
+    }
+    get anchor2ID() {
+        return this._anchor2ID;
+    }
+    set anchor2ID(v) {
+        this._anchor2ID = v;
+        if (this.data) {
+            this.data.Anchor2ID = this._anchor2ID;
+        }
+    }
+    /** 接收事件作出修改  */
+    changePos() {
+        if (this.startAnchor) {
+            // 判断删除equip后,不移动
+            if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+                this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+            }
+        }
+        if (this.endAnchor) {
+            // 删除equip后
+            if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0);
+            }
+        }
+    }
+    /** 获取data数据  */
+    toData() {
+        let pointList = this.pointList.map(item => {
+            return {
+                X: item.x,
+                Y: item.y
+            };
+        });
+        if (this.data) {
+            this.data.PointList = pointList;
+            this.data.Properties.LineWidth = this.lineWidth;
+            // this.data.Properties.LineDash = this.LineDash;
+            this.data.Properties.Color = this.strokeColor;
+        }
+        return this.data;
+    }
+}

+ 144 - 0
src/lib/items/TipelineItem.ts

@@ -0,0 +1,144 @@
+import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPainter, SColor } from '@saga-web/draw';
+import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
+import { Relation } from '../types/Relation';
+import { SPoint } from "@saga-web/draw/lib";
+import { Point } from "@saga-web/big/lib/types/Point";
+
+/**
+ * 管道item
+ *
+ * */
+export class TipelineItem extends SPolylineItem {
+  /** 起始锚点  */
+  startAnchor: SAnchorItem | null = null;
+  /** 结束锚点  */
+  endAnchor: SAnchorItem | null = null;
+  /** 对应的图例ID  */
+  _graphElementId: string = "";
+  get graphElementId(): string {
+    return this._graphElementId;
+  }
+  set graphElementId(v: string) {
+    this._graphElementId = v;
+    if (this.data) {
+      this.data.GraphElementId = this._graphElementId;
+    }
+  }
+  /** 关联节点1ID  */
+  _node1Id: string = "";
+  get node1Id(): string {
+    return this._node1Id;
+  }
+  set node1Id(v: string) {
+    this._node1Id = v;
+    if (this.data) {
+      this.data.Node1ID = this._node1Id;
+    }
+  }
+  /** 关联节点2ID  */
+  _node2Id: string = "";
+  get node2Id(): string {
+    return this._node2Id;
+  }
+  set node2Id(v: string) {
+    this._node2Id = v;
+    if (this.data) {
+      this.data.Node2ID = this._node2Id;
+    }
+  }
+  /** 关联锚点1ID  */
+  _anchor1ID: string = "";
+  get anchor1ID(): string {
+    return this._anchor1ID;
+  }
+  set anchor1ID(v: string) {
+    this._anchor1ID = v;
+    if (this.data) {
+      this.data.Anchor1ID = this._anchor1ID;
+    }
+  }
+  /** 关联锚点2ID  */
+  _anchor2ID: string = "";
+  get anchor2ID(): string {
+    return this._anchor2ID;
+  }
+  set anchor2ID(v: string) {
+    this._anchor2ID = v;
+    if (this.data) {
+      this.data.Anchor2ID = this._anchor2ID;
+    }
+  }
+  /** 数据存储  */
+  data: Relation | null = null;
+  /** 接收事件作出修改  */
+  changePos() {
+    if (this.startAnchor) {
+      // 判断删除equip后,不移动
+      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+        this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+      }
+    }
+    if (this.endAnchor) {
+      // 删除equip后
+      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+        this.pointList[
+          this.pointList.length - 1
+        ] = this.endAnchor.mapToScene(0, 0);
+      }
+    }
+  }
+
+  constructor(parent: SGraphItem | null, data: Relation) {
+    super(parent, []);
+    this.zOrder = ItemOrder.polylineOrder;
+    this.pointList = data.PointList.map(item => {
+      return new SPoint(item.X, item.Y);
+    });
+    this.data = data;
+    this.id = data.ID;
+    if (data.GraphElementId) {
+      this._graphElementId = data.GraphElementId
+    }
+    if (data.Node1ID) {
+      this._node1Id = data.Node1ID
+    }
+    if (data.Node2ID) {
+      this._node2Id = data.Node2ID
+    }
+    if (data.Anchor1ID) {
+      this._anchor1ID = data.Anchor1ID
+    }
+    if (data.Anchor2ID) {
+      this._anchor2ID = data.Anchor2ID
+    }
+    if (data.Properties && data.Properties.Color) {
+      this.strokeColor = data.Properties.Color
+    }
+    // if(data.Properties && data.Properties.LineDash){
+    //   this.LineDash = data.Properties.LineDash
+    // }
+    if (data.Properties && data.Properties.LineWidth) {
+      this.lineWidth = data.Properties.LineWidth;
+    }
+  }
+
+  /** 获取data数据  */
+  toData(): Relation | null {
+    let pointList: Point[] = this.pointList.map(item => {
+      return {
+        X: item.x,
+        Y: item.y
+      }
+    });
+
+    if (this.data) {
+      this.data.PointList = pointList;
+      this.data.Properties.LineWidth = this.lineWidth;
+      // this.data.Properties.LineDash = this.LineDash;
+      this.data.Properties.Color = this.strokeColor
+    }
+
+    return this.data
+  }
+}

+ 120 - 0
src/lib/parsers/STopologyParser.js

@@ -0,0 +1,120 @@
+import { SParser } from '@saga-web/big/lib';
+import { SNoneLegendItem } from '../items/SNoneLegendItem';
+import { SZoneLegendItem } from '../items/SZoneLegendItem';
+import { SImageLegendItem } from '../items/SImageLegendItem';
+import { SImageMarkerItem } from '../items/SImageMarkerItem';
+import { SLineMarkerItem } from '../items/SLineMarkerItem';
+import { STextMarkerItem } from '../items/STextMarkerItem';
+import { TipelineItem } from '../items/TipelineItem';
+import { ItemOrder } from "@saga-web/big";
+/**
+ * 拓扑图信息解析器
+ *
+ */
+export class STopologyParser extends SParser {
+    constructor() {
+        super(...arguments);
+        /** 图例list(非图例类型)   */
+        this.noneLegendList = [];
+        /** 图例list(线类型)   */
+        this.lineLegendList = [];
+        /** 图例list(区域类型)   */
+        this.zoneLegendList = [];
+        /** 图例list(图标类型)   */
+        this.imageLegendList = [];
+        /** 标识list(图类型)   */
+        this.imageMarkerList = [];
+        /** 标识list(线类型)   */
+        this.lineMarkerList = [];
+        /** 标识list(文本类型)   */
+        this.textMarkerList = [];
+        /** 管线关系对象关系list   */
+        this.relationList = [];
+    }
+    /**
+     * 解析数据
+     *
+     * @param   data    系统图数据
+     * */
+    parseData(data) {
+        if (data.Nodes) {
+            data.Nodes.forEach((t) => {
+                this.addLegend(t);
+            });
+        }
+        if (data.Markers) {
+            data.Markers.forEach((t) => {
+                this.addMarker(t);
+            });
+        }
+        if (data.Relations) {
+            data.Relations.forEach((t) => {
+                this.addRelation(t);
+            });
+        }
+    } // Function parseData()
+    /**
+     * 添加图例节点至场景中
+     *
+     * @param   t       图例节点数据
+     * */
+    addLegend(t) {
+        if (t.GraphElementType == 'None') {
+            let item = new SNoneLegendItem(null, t);
+            this.noneLegendList.push(item);
+        }
+        else if (t.GraphElementType == 'Line') {
+            let item = new TipelineItem(null, t);
+            item.selectable = true;
+            item.status = 0;
+            item.zOrder == ItemOrder.polylineOrder;
+            alert(123);
+            this.relationList.push(item);
+        }
+        else if (t.GraphElementType == "Zone") {
+            let item = new SZoneLegendItem(null, t);
+            item.selectable = true;
+            item.zOrder == ItemOrder.polygonOrder;
+            this.zoneLegendList.push(item);
+        }
+        else if (t.GraphElementType == 'Image') {
+            let item = new SImageLegendItem(null, t);
+            item.selectable = true;
+            this.imageLegendList.push(item);
+        }
+    } // Function addNode()
+    /**
+     * 添加标识对象至场景中
+     *
+     * @param   t       标识对象数据
+     * */
+    addMarker(t) {
+        if (t.Type == "Image") {
+            let item = new SImageMarkerItem(null, t);
+            this.imageMarkerList.push(item);
+            item.selectable = true;
+            item.zOrder = ItemOrder.imageOrder;
+        }
+        else if (t.Type == "Line") {
+            let item = new SLineMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.lineMarkerList.push(item);
+        }
+        else if (t.Type == "Text") {
+            let item = new STextMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.textMarkerList.push(item);
+        }
+    } // Function addMarker()
+    /**
+     * 添加管线关系至场景中
+     *
+     * @param   t       管线关系对象数据
+     * */
+    addRelation(t) {
+        let item = new TipelineItem(null, t);
+        this.relationList.push(item);
+    } // Function addRelation()
+} // class STopologyParser

+ 126 - 0
src/lib/parsers/STopologyParser.ts

@@ -0,0 +1,126 @@
+import { ElementData } from "../types/ElementData";
+import { Legend } from "../types/Legend";
+import { Marker } from "../types/Marker";
+import { Relation } from "../types/Relation";
+import { SGraphElementType } from "../enums/SGraphElementType";
+import { SMarkerType } from "../enums/SMarkerType";
+import { SParser, SRelation } from '@saga-web/big/lib';
+import { SNoneLegendItem } from '../items/SNoneLegendItem';
+import { SLineLegendItem } from '../items/SLineLegendItem';
+import { SZoneLegendItem } from '../items/SZoneLegendItem';
+import { SImageLegendItem } from '../items/SImageLegendItem';
+import { SImageMarkerItem } from '../items/SImageMarkerItem';
+import { SLineMarkerItem } from '../items/SLineMarkerItem';
+import { STextMarkerItem } from '../items/STextMarkerItem';
+import { TipelineItem } from '../items/TipelineItem';
+import { ItemOrder } from "@saga-web/big";
+import { SItemStatus } from "@saga-web/big";
+/**
+ * 拓扑图信息解析器
+ *
+ */
+export class STopologyParser extends SParser {
+    /** 图例list(非图例类型)   */
+    noneLegendList: SNoneLegendItem[] = [];
+    /** 图例list(线类型)   */
+    lineLegendList: SLineLegendItem[] = [];
+    /** 图例list(区域类型)   */
+    zoneLegendList: SZoneLegendItem[] = [];
+    /** 图例list(图标类型)   */
+    imageLegendList: SImageLegendItem[] = [];
+
+    /** 标识list(图类型)   */
+    imageMarkerList: SImageMarkerItem[] = [];
+    /** 标识list(线类型)   */
+    lineMarkerList: SLineMarkerItem[] = [];
+    /** 标识list(文本类型)   */
+    textMarkerList: STextMarkerItem[] = [];
+
+    /** 管线关系对象关系list   */
+    relationList: SRelation[] = [];
+
+    /**
+     * 解析数据
+     *
+     * @param   data    系统图数据
+     * */
+    parseData(data: ElementData): void {
+        if (data.Nodes) {
+            data.Nodes.forEach((t: Legend): void => {
+                this.addLegend(t);
+            });
+        }
+        if (data.Markers) {
+            data.Markers.forEach((t: Marker): void => {
+                this.addMarker(t);
+            });
+        }
+        if (data.Relations) {
+            data.Relations.forEach((t: Relation): void => {
+                this.addRelation(t);
+            });
+        }
+    } // Function parseData()
+
+    /**
+     * 添加图例节点至场景中
+     *
+     * @param   t       图例节点数据
+     * */
+    private addLegend(t: Legend): void {
+        if (t.GraphElementType == 'None') {
+            let item = new SNoneLegendItem(null, t);
+            this.noneLegendList.push(item);
+        } else if (t.GraphElementType == 'Line') {
+            let item = new TipelineItem(null, t);
+            item.selectable = true;
+            item.status = 0;
+            item.zOrder == ItemOrder.polylineOrder;
+            alert(123)
+            this.relationList.push(item);
+        } else if (t.GraphElementType == "Zone") {
+            let item = new SZoneLegendItem(null, t);
+            item.selectable = true;
+            item.zOrder == ItemOrder.polygonOrder;
+            this.zoneLegendList.push(item);
+        } else if (t.GraphElementType == 'Image') {
+            let item = new SImageLegendItem(null, t);
+            item.selectable = true;
+            this.imageLegendList.push(item);
+        }
+    } // Function addNode()
+
+    /**
+     * 添加标识对象至场景中
+     *
+     * @param   t       标识对象数据
+     * */
+    private addMarker(t: Marker): void {
+        if (t.Type == "Image") {
+            let item = new SImageMarkerItem(null, t);
+            this.imageMarkerList.push(item);
+            item.selectable = true;
+            item.zOrder = ItemOrder.imageOrder;
+        } else if (t.Type == "Line") {
+            let item = new SLineMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.lineMarkerList.push(item);
+        } else if (t.Type == "Text") {
+            let item = new STextMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.textMarkerList.push(item);
+        }
+    } // Function addMarker()
+
+    /**
+     * 添加管线关系至场景中
+     *
+     * @param   t       管线关系对象数据
+     * */
+    private addRelation(t: Relation): void {
+        let item = new TipelineItem(null, t);
+        this.relationList.push(item);
+    } // Function addRelation()
+} // class STopologyParser

+ 19 - 0
src/lib/types/Anchor.js

@@ -0,0 +1,19 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */

+ 35 - 0
src/lib/types/Anchor.ts

@@ -0,0 +1,35 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+
+
+import { Point } from "@saga-web/big/lib/types/Point";
+
+/**
+ * 锚点item接口
+ *
+ * @author  张宇
+ */
+export interface Anchor {
+    /** 锚点ID */
+    ID: string;
+    /** 锚点的坐标  */
+    Pos: Point;
+} // Interface Anchor

+ 19 - 0
src/lib/types/ElementData.js

@@ -0,0 +1,19 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */

+ 36 - 0
src/lib/types/ElementData.ts

@@ -0,0 +1,36 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+
+
+import { Legend } from "./Legend";
+import { Marker } from "./Marker";
+import { Relation } from "./Relation";
+
+/**
+ * 系统图数据接口
+ *
+ * @author  张宇
+ */
+export interface ElementData {
+    Nodes: Legend[];
+    Markers: Marker[];
+    Relations: Relation[];
+} // Interface ElementData

+ 19 - 0
src/lib/types/Legend.js

@@ -0,0 +1,19 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */

+ 61 - 0
src/lib/types/Legend.ts

@@ -0,0 +1,61 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+
+import { Anchor } from "./Anchor";
+import { SGraphElementType } from "./../enums/SGraphElementType";
+import { Point } from "@saga-web/big/lib/types/Point";
+import { Size } from "@saga-web/big/lib/types/Size";
+
+/**
+ * 图例节点接口
+ *
+ * @author  张宇
+ */
+export interface Legend {
+    /** ID */
+    ID: string;
+    /** 名称  */
+    Name: string;
+    /** 返回工程信息化对象 ID 列表 */
+    AttachObjectIds?: string[];
+    /** 图标,区域类型  */
+    GraphElementType: SGraphElementType;
+    /** 对应的图例ID  */
+    GraphElementId: string;
+    /** 图例数量  */
+    Num?: number;
+    /** 位置  */
+    Pos: Point;
+    /** item类型 */
+    Type: string
+    /** 缩放  */
+    Scale?: Point;
+    /** 旋转  */
+    Rolate?: Point;
+    /** 大小  */
+    Size?: Size;
+    /** 锚点List  */
+    AnchorList?: Anchor[];
+    /** 轮廓线  */
+    OutLine?: Point[];
+    /** 由应用自己定义  */
+    Properties?: any;
+} // Interface Legend

+ 19 - 0
src/lib/types/Marker.js

@@ -0,0 +1,19 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */

+ 49 - 0
src/lib/types/Marker.ts

@@ -0,0 +1,49 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+
+
+import { SMarkerType } from "@saga-web/big/lib/enums/SMarkerType";
+import { Point } from "@saga-web/big/lib/types/Point";
+import { Size } from "@saga-web/big/lib/types/Size";
+
+/**
+ * 标识对象接口
+ *
+ * @author  张宇
+ */
+export interface Marker {
+    /** ID */
+    ID: string;
+    /** 名称  */
+    Name: string;
+    /** 图标(Image),线类型(Line) */
+    Type: string;
+    /** 位置  */
+    Pos: Point;
+    /** 缩放  */
+    Scale?: Point;
+    /** 旋转  */
+    Rolate?: Point;
+    /** 大小  */
+    Size?: Size;
+    /** 由应用自己定义  */
+    Properties?: any;
+} // Interface Marker

+ 19 - 0
src/lib/types/Relation.js

@@ -0,0 +1,19 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */

+ 55 - 0
src/lib/types/Relation.ts

@@ -0,0 +1,55 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+
+
+import { SRelationDir } from "@saga-web/big/lib/enums/SRelationDir";
+import { SLineType } from "@saga-web/big/lib/enums/SLineType";
+import { Point } from "@saga-web/big/lib/types/Point";
+
+/**
+ * 管线对象关系接口
+ *
+ * @author  张宇
+ */
+export interface Relation {
+    /** ID */
+    ID: string;
+    /** 名称 */
+    Name: string;
+    /** 对应的图例ID */
+    GraphElementId: string;
+    /** 关联节点1_id */
+    Node1ID?: string;
+    /** 关联节点2_id */
+    Node2ID?: string;
+    /** 关联锚点1_id  */
+    Anchor1ID?: string;
+    /** 关联锚点2_id */
+    Anchor2ID?: string;
+    /** 方向(0:无向,1:节点1到节点2,2:节点2到节点1) */
+    Dir?: SRelationDir;
+    /** 线类型(0:直线,1:水平/垂直线,2:曲线) */
+    LineType: SLineType;
+    /** 线的顶点坐标 */
+    PointList: Point[];
+    /** 线的绘图样式 */
+    Properties?: any;
+} // Interface Relation