diff --git a/package.json b/package.json
index 1a03ba6..6c9be3c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@types/cesium": "^1.59.5",
     "@types/swiper": "^5.3.0",
     "angular-calendar": "^0.28.2",
+    "bson-objectid": "^1.3.1",
     "cesium": "^1.64.0",
     "date-fns": "^2.9.0",
     "e-ngx-cesium": "^6.3.2",
@@ -34,14 +35,13 @@
     "ngx-countdown": "^9.0.1",
     "ngx-echarts": "^4.2.2",
     "ngx-perfect-scrollbar": "^8.0.0",
+    "pixi-filters": "^3.1.1",
+    "pixi.js": "^5.3.2",
     "rxjs": "~6.5.4",
     "swiper": "^5.3.7",
     "tslib": "^1.10.0",
     "viewerjs": "^1.6.2",
-    "zone.js": "~0.10.2",
-    "pixi-filters": "^3.1.1",
-    "pixi.js": "^5.3.2",
-    "bson-objectid": "^1.3.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.900.1",
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index f93a159..75e2f4a 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit,Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
 import * as PIXI from 'pixi.js';
 import { EventEmitter } from 'events';
 import { EventManager } from '@angular/platform-browser';
@@ -22,9 +22,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
   @ViewChild('content')
   content: ElementRef;
-  //父组件
-  @Input( ) init:any;
-  //父组件
+  /**
+   * 父组件
+   */
+  @Input( ) init: any;
   /**
    * pixijs 程序
    */
@@ -85,7 +86,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 拷贝素材数据
    */
   public copyData: any[] = [];
-
+  /**
+   * 确认绘制按钮
+   */
   private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg');
   /**
    * 框选工具图形
@@ -99,7 +102,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 最终鼠标位置
    */
   private finalScreenMousePos: PIXI.Point = new PIXI.Point();
-  // 根据ID 找到图标
+  /**
+   * 允许编辑
+   */
+  public allowEdit = false;
 
   // 根据ID 找到数据
 
@@ -162,6 +168,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     });
     setTimeout(() => {
       this.createCanvas();
+      this.loadDemoScene();
     }, 0);
   }
 
@@ -368,6 +375,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
     });
   }
+  /**
+   * 加载测试界面
+   */
+  public loadDemoScene() {
+    this.backgroundImage.texture = PIXI.Texture.from('./assets/images/demo.jpg');
+    setTimeout(() => {
+      const assetData = {
+        TemplateId: null,
+        FloorId: null,
+        Angle: 0,
+        Color: 0,
+        Enabled: true,
+        FillMode: 0,
+        FireElementId: 0,
+        FixedSize: true,
+        Height: 32,
+        Width: 32,
+        Id: ObjectID.default.generate(),
+        ImageUrl: './assets/images/泡沫消防车.png',
+        InteractiveMode: 0,
+        MultiPoint: null,
+        Point: new PIXI.Point(5295 - (this.backgroundImage.texture.width / 2), 4067 - (this.backgroundImage.texture.height / 2)),
+        Name: '',
+        PropertyInfos: null,
+        Border: null,
+        DrawMode: null,
+        Thickness: 0,
+        IsFromBuilding: false,
+        GameMode: 0
+      };
+      const single = new SinglePointIcon(assetData, this);
+    }, 100);
+
+    // this.backgroundImage.anchor.set(0);
+  }
   /**
    *
    * @param id 图标ID
@@ -927,7 +969,7 @@ export class SinglePointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   private image = PIXI.Sprite.from(this.assetData.ImageUrl);
   constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
     super();
@@ -947,38 +989,36 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.anchor.set(0.5);
     this.image.interactive = true;
     this.image
-     .on('mousedown', event => {
-       event.stopPropagation();
-       console.log(this.assetData);
-       event.currentTarget.parent.data = event.data;
-       event.currentTarget.parent.alpha = 0.5;
-       event.currentTarget.parent.dragging = true;
-
-       this.workingArea.selection.selectOne(this);
+      .on('mousedown', event => {
+        event.stopPropagation();
+        this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+        }
      })
      .on('mouseup', event => {
-       event.currentTarget.parent.alpha = 1;
-       event.currentTarget.parent.dragging = false;
-       event.currentTarget.parent.data = null;
+       if (event.currentTarget.parent.dragging) {
+         event.currentTarget.parent.alpha = 1;
+         event.currentTarget.parent.dragging = false;
+         event.currentTarget.parent.data = null;
+       }
      })
-     .on('mouseupoutside', event => {
-       event.currentTarget.parent.alpha = 1;
-       event.currentTarget.parent.dragging = false;
-       event.currentTarget.parent.data = null;
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
      })
      .on('mousemove', event => {
        if (event.currentTarget.parent.dragging) {
          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
          event.currentTarget.parent.x = newPosition.x;
          event.currentTarget.parent.y = newPosition.y;
-
-        //  this.text.x = newPosition.x;
-        //  this.text.y = newPosition.y - 32;
-
          this.assetData.Point = new PIXI.Point(this.x, this.y);
          this.workingArea.canvasData.isChange = true;
-         // console.log(this.workingArea.canvasData.originaleveryStoreyData);
-         // console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
        }
      })
      .on('rightclick', event => {
@@ -1015,7 +1055,7 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.angle = this.assetData.Angle;
     this.text.text = this.assetData.Name
       + '\r\n'
-      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+      + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
     this.text.x = this.image.x;
     this.text.y = this.image.y - this.image.height / 2;
   }
@@ -1046,7 +1086,7 @@ export class MultipointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   /**
    *
    * @param texture 图片素材
@@ -1101,19 +1141,25 @@ export class MultipointIcon extends PIXI.Container {
       item.interactive = true;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.data = event.data;
-        event.currentTarget.alpha = 0.5;
-        event.currentTarget.dragging = true;
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.data = event.data;
+          event.currentTarget.alpha = 0.5;
+          event.currentTarget.dragging = true;
+        }
       })
         .on('mouseup', event => {
-          event.currentTarget.alpha = 1;
-          event.currentTarget.dragging = false;
-          event.currentTarget.data = null;
+          if (event.currentTarget.dragging) {
+            event.currentTarget.alpha = 1;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.alpha = 1;
-          event.currentTarget.dragging = false;
-          event.currentTarget.data = null;
+          if (event.currentTarget.dragging) {
+            event.currentTarget.alpha = 1;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.dragging) {
@@ -1191,25 +1237,30 @@ export class MultipointIcon extends PIXI.Container {
       item.interactive = true;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.parent.data = event.data;
-        event.currentTarget.parent.alpha = 0.5;
-        event.currentTarget.parent.dragging = true;
-
-        event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
-        event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
-        event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
-
         this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+
+          event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+          event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+        }
       })
         .on('mouseup', event => {
-          event.currentTarget.parent.alpha = 1;
-          event.currentTarget.parent.dragging = false;
-          event.currentTarget.parent.data = null;
+          if (event.currentTarget.parent.dragging) {
+            event.currentTarget.parent.alpha = 1;
+            event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.parent.alpha = 1;
-          event.currentTarget.parent.dragging = false;
-          event.currentTarget.parent.data = null;
+          if (event.currentTarget.parent.dragging) {
+            event.currentTarget.parent.alpha = 1;
+            event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.parent.dragging) {
@@ -1219,11 +1270,10 @@ export class MultipointIcon extends PIXI.Container {
 
             this.assetData.Point = new PIXI.Point(this.x, this.y);
             this.workingArea.canvasData.isChange = true;
-            // console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
           }
         })
         .on('rightclick', event => {
-          // this.workingArea.selection.deselectAll();
+
         });
     });
   }
@@ -1326,22 +1376,25 @@ export class PolygonIcon extends PIXI.Container {
       item.zIndex = 1;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.data = event.data;
-        event.currentTarget.alpha = 0.5;
-        event.currentTarget.dragging = true;
-
-        // console.log(item.zIndex);
-        // console.log(this.polygonLineGraphics.zIndex);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.data = event.data;
+          event.currentTarget.alpha = 0.5;
+          event.currentTarget.dragging = true;
+        }
       })
         .on('mouseup', event => {
-          event.currentTarget.alpha = 1;
-          event.currentTarget.dragging = false;
-          event.currentTarget.data = null;
+          if (event.currentTarget.dragging) {
+            event.currentTarget.alpha = 1;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.alpha = 1;
-          event.currentTarget.dragging = false;
-          event.currentTarget.data = null;
+          if (event.currentTarget.dragging) {
+            event.currentTarget.alpha = 1;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.dragging) {
@@ -1371,41 +1424,47 @@ export class PolygonIcon extends PIXI.Container {
     });
     // 添加选中事件
     this.polygonGraphics.interactive = true;
-    this.polygonGraphics.on('mousedown', event => {
+    this.polygonGraphics
+      .on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.parent.data = event.data;
-        event.currentTarget.parent.alpha = 0.5;
-        event.currentTarget.parent.dragging = true;
-
-        event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
-        event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
-        event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
-
         this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+
+          event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+          event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+        }
       })
-        .on('mouseup', event => {
+      .on('mouseup', event => {
+        if (event.currentTarget.parent.dragging) {
           event.currentTarget.parent.alpha = 1;
           event.currentTarget.parent.dragging = false;
           event.currentTarget.parent.data = null;
-        })
-        .on('mouseupoutside', event => {
+        }
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
           event.currentTarget.parent.alpha = 1;
           event.currentTarget.parent.dragging = false;
           event.currentTarget.parent.data = null;
-        })
-        .on('mousemove', event => {
-          if (event.currentTarget.parent.dragging) {
-            const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
-            event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
-            event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
+        }
+      })
+      .on('mousemove', event => {
+        if (event.currentTarget.parent.dragging) {
+          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
+          event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
 
-            this.assetData.Point = new PIXI.Point(this.x, this.y);
-            this.workingArea.canvasData.isChange = true;
-          }
-        })
-        .on('rightclick', event => {
-          // this.workingArea.selection.deselectAll();
-        });
+          this.assetData.Point = new PIXI.Point(this.x, this.y);
+          this.workingArea.canvasData.isChange = true;
+        }
+      })
+      .on('rightclick', event => {
+        // this.workingArea.selection.deselectAll();
+      });
     // 缩放
     this.workingArea.on('backgroundScale', data => {
       const scale = 1 / data;
@@ -1624,3 +1683,117 @@ export class PropertyInfo {
    */
   public PropertyValue: string;
 }
+/**
+ * demo图标
+ */
+export class DemoIcon extends PIXI.Container {
+  style = new PIXI.TextStyle({
+    fontFamily: 'Arial',
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: 'bold',
+    fill: ['#000000'],
+    stroke: '#ffffff',
+    strokeThickness: 3,
+    dropShadow: true,
+    dropShadowColor: '#000000',
+    dropShadowBlur: 3,
+    dropShadowAngle: Math.PI / 6,
+    dropShadowDistance: 1,
+    wordWrap: false,
+    wordWrapWidth: 100,
+  });
+
+  private text = new PIXI.Text(this.assetData.Name
+    + '\r\n'
+    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+  private image = PIXI.Sprite.from(this.assetData.ImageUrl);
+  constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+    super();
+    this.workingArea.backgroundImage.addChild(this);
+    this.x = this.assetData.Point.x;
+    this.y = this.assetData.Point.y;
+    this.name = this.assetData.Id;
+
+    this.image.angle = this.assetData.Angle;
+
+    this.image.x = 0;
+    this.image.y = 0;
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+
+    this.image.alpha = 1;
+    this.image.anchor.set(0.5);
+    this.image.interactive = true;
+    this.image
+      .on('mousedown', event => {
+        event.stopPropagation();
+        this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+        }
+      })
+      .on('mouseup', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mousemove', event => {
+        if (event.currentTarget.parent.dragging) {
+          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.x = newPosition.x;
+          event.currentTarget.parent.y = newPosition.y;
+          this.assetData.Point = new PIXI.Point(this.x, this.y);
+          this.workingArea.canvasData.isChange = true;
+        }
+      })
+      .on('rightclick', event => {
+
+      })
+      .on('mouseover', event => {
+
+      });
+
+    this.workingArea.on('backgroundScale', data => {
+      if (this.assetData.FixedSize) {
+        const scale = 1 / data;
+        this.scale.set(scale);
+      }
+    });
+
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+    this.text.anchor.set(0.5, 1);
+
+    this.addChild(this.text);
+    this.addChild(this.image);
+  }
+  // 设置名称
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
+  // 刷新
+  public refresh() {
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+    this.image.angle = this.assetData.Angle;
+    this.text.text = this.assetData.Name
+      + '\r\n'
+      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+  }
+}
diff --git a/src/assets/images/demo.jpg b/src/assets/images/demo.jpg
new file mode 100644
index 0000000..08fd8cc
Binary files /dev/null and b/src/assets/images/demo.jpg differ
diff --git a/src/assets/images/压缩空气泡沫消防车.png b/src/assets/images/压缩空气泡沫消防车.png
new file mode 100644
index 0000000..ac6706f
Binary files /dev/null and b/src/assets/images/压缩空气泡沫消防车.png differ
diff --git a/src/assets/images/水罐消防车.png b/src/assets/images/水罐消防车.png
new file mode 100644
index 0000000..f6c2c54
Binary files /dev/null and b/src/assets/images/水罐消防车.png differ
diff --git a/src/assets/images/泡沫消防车.png b/src/assets/images/泡沫消防车.png
new file mode 100644
index 0000000..0ad1595
Binary files /dev/null and b/src/assets/images/泡沫消防车.png differ