Browse Source

新增嵌入平面图文档

YaolongHan 4 years ago
parent
commit
d5e26a43f7

+ 2 - 0
docs/.vuepress/components/tDInsert/addPictrueClass/FloorView.ts

@@ -46,6 +46,8 @@ export class FloorView extends SGraphView {
     isDrag: boolean = false;
     constructor(id: string) {
         super(id);
+        console.log(this.fitSelectedToView);
+
     }
 
     /**

+ 0 - 5
docs/.vuepress/components/tDInsert/addPictrueClass/MarkItem.ts

@@ -28,14 +28,9 @@ import { SImageItem, SGraphItem } from "@persagy-web/graph"
 import { SPainter, SColor } from "@persagy-web/draw";
 import { SMouseEvent } from "@persagy-web/base/";
 export class MarkItem extends SImageItem {
-
-
     /** 图标数据 */
     data: any;
 
-
-
-
     /**
      * 构造函数
      */

+ 9 - 22
docs/.vuepress/components/tDInsert/addPicture.vue

@@ -15,11 +15,11 @@ import { SGraphView, SGraphScene } from "@persagy-web/graph";
 import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
 import { SColor } from "@persagy-web/draw";
 /////////模拟接口数据
-
+const map1 = require("../../../public/assets/map/1.json");
 import { equipmentList } from "./data/equipmentList.js";
 import { spaceList } from "./data/spacelist.js";
 import { MarkItem } from "./addPictrueClass/MarkItem";
-
+import { FloorView } from "./addPictrueClass/FloorView";
 export default {
   data() {
     return {
@@ -44,23 +44,11 @@ export default {
       this.clearImg();
       this.view ? (this.view.scene = this.scene) : null;
       // 获取压缩包数据并解压
-      this.getMapBlob();
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
     },
-    // 请求获取地图的压缩包
-    getMapBlob() {
-      const url = this.mapUrl + this.dataKey;
-      this.loading = true;
 
-      getJsonz(url)
-        .then((data) => {
-          // 解析数据并放入压缩包中
-          this.parserData(data);
-          this.loading = false;
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
     // 解析数据并注入 scene 类中
     parserData(data) {
       let parser = new SFloorParser();
@@ -113,7 +101,7 @@ export default {
       // 获取空间
       this.mapSpace(spaceList);
       // 设备
-      this.mapEquipment(equipmentList)
+      this.mapEquipment(equipmentList);
     },
 
     // 解析业务空间
@@ -141,10 +129,9 @@ export default {
             y: Number(arr[1]),
             width: item.width,
             height: item.height,
-            url:require('./../../public/assets/img/mark.png')
+            url: require("./../../public/assets/img/mark.png"),
           };
-          const aaa = new MarkItem(mark);
-          console.log(aaa,'aaa')
+          const aaa = new MarkItem(null, mark);
           this.scene.addItem(aaa);
         }
       });
@@ -176,7 +163,7 @@ export default {
     this.canvasWidth = 800;
     this.canvasHeight = 600;
     // 初始化场景类
-    this.view = new SGraphView("floorMap1");
+    this.view = new FloorView("floorMap1");
     if (this.scene) {
       this.view.scene = this.scene;
     }

+ 188 - 0
docs/.vuepress/components/tDInsert/addPicture1.vue

@@ -0,0 +1,188 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor } from "@persagy-web/draw";
+/////////模拟接口数据
+const map1 = require("../../../public/assets/map/1.json");
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
+import { FloorView } from "./addPictrueClass/FloorView";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList);
+    },
+
+    // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 设置 tooltip 信息
+        item.data.tooltipmsg = "空调房";
+        // 添加事件绑定
+        item.connect("onMouseLeave", this, this.onMouseleave);
+        item.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加到场景
+        this.scene.addItem(item);
+      });
+    },
+
+    // 解析设备点
+    mapEquipment(val) {
+      val.forEach((item) => {
+        if (item.bimLocation) {
+          const arr = item.bimLocation.split(",");
+          const mark = {
+            Id: item.equipId,
+            ElementType: "Mark",
+            equipId: item.equipId,
+            Name: item.equipName,
+            x: Number(arr[0]),
+            y: Number(arr[1]),
+            width: item.width,
+            height: item.height,
+            url: require("./../../public/assets/img/mark.png"),
+            tooltipmsg: "空调01", //tooltip信息
+          };
+          const t = new MarkItem(null, mark);
+          t.connect("onMouseLeave", this, this.onMouseleave);
+          t.connect("onMouseEnter", this, this.onMouseenter);
+          this.scene.addItem(t);
+        }
+      });
+    },
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+    // 鼠标移出
+    onMouseleave(item, e) {
+      this.$emit("onMouseleave", item, e);
+    },
+    // 鼠标移入
+    onMouseenter(item, e) {
+      this.$emit("onMouseenter", item, e);
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 43 - 0
docs/.vuepress/components/tDInsert/addTooltip.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="base">
+    <addPicture1
+      @onMouseleave="mouseLeave"
+      @onMouseenter="mouseenter"
+    ></addPicture1>
+    <tooltip ref="tooltip_map" v-show="showTooltip">{{ tooltipmsg }}</tooltip>
+  </div>
+</template>
+<script>
+import tooltip from "./tooltip";
+import addPicture1 from "./addPicture1";
+export default {
+  components: { tooltip, addPicture1 },
+  data() {
+    return {
+      tooltipmsg: "", //tooltip信息
+      showTooltip: false, // 是否展示tooltip
+    };
+  },
+  methods: {
+    //   鼠标移入
+    mouseenter(item, e) {
+      //   显示卡片
+      this.showTooltip = true;
+      //   赋给卡片坐标
+      this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
+      this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
+      //   赋给内容
+      this.tooltipmsg = item.data.tooltipmsg;
+    },
+    //   鼠标移出
+    mouseLeave(item, e) {
+      this.showTooltip = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.base {
+  position: relative;
+}
+</style>

+ 0 - 0
docs/.vuepress/components/tDInsert/data/addTootip.vue


+ 0 - 7
docs/.vuepress/components/tDInsert/data/equipmentList.js

@@ -6,11 +6,4 @@ export const equipmentList = [
         width: 30,        //设备在视图中展示的大小(1=实际中的1m)
         height: 30,
     },
-    {
-        equipId: "11111",   //设备id
-        equipName: "xxx",   //设备名称
-        bimLocation: "30588.48688281251,-65850.65770572917,53800.0",  //设备坐标
-        width: 30,        //设备在视图中展示的大小(1=实际中的1m)
-        height: 30,
-    },
 ]

+ 196 - 0
docs/.vuepress/components/tDInsert/partChange.vue

@@ -0,0 +1,196 @@
+<!-- 画板 -->
+<template>
+  <div ref="baseMap" class="base-map">
+    <canvas
+      v-loading="loading"
+      id="floorMap1"
+      :width="canvasWidth"
+      :height="canvasHeight"
+      tabindex="0"
+    ></canvas>
+  </div>
+</template>
+<script>
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
+import { SColor, SPoint } from "@persagy-web/draw";
+/////////模拟接口数据
+const map1 = require("../../../public/assets/map/1.json");
+import { equipmentList } from "./data/equipmentList.js";
+import { spaceList } from "./data/spacelist.js";
+import { MarkItem } from "./addPictrueClass/MarkItem";
+import { FloorView } from "./addPictrueClass/FloorView";
+export default {
+  data() {
+    return {
+      canvasWidth: 0, // 画布的宽
+      canvasHeight: 0, // 画布的高
+      view: null, // 视图 view
+      scene: null, // 场景类
+      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
+      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
+      loading: false,
+      isShowColumn: false, //是否展示柱子
+      isShowWall: false, //是否显示墙
+      isShowVirtualWall: false, //是否显示虚拟墙
+      isShowDoor: false, // 是否显示门
+      isShowWindow: false, //是否显示窗户
+      isSpaceSelectable: true, //是否显示空间
+    };
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.clearImg();
+      this.view ? (this.view.scene = this.scene) : null;
+      // 获取压缩包数据并解压
+      setTimeout(() => {
+        this.parserData(map1.EntityList[0].Elements);
+      });
+    },
+
+    // 解析数据并注入 scene 类中
+    parserData(data) {
+      let parser = new SFloorParser();
+      parser.parseData(data);
+      parser.spaceList.forEach((t) => {
+        /////////////////////////////////////////
+        // 样式调整
+        // 是否显示实例
+        t.visible = this.isSpaceSelectable;
+        //是否展示名称
+        t.showBaseName = false;
+        // 显示边框色
+        t.strokeColor = new SColor("#F0F3F7");
+        // 填充色
+        t.fillColor = new SColor("#F0F3F7");
+        // 边框线宽
+        t.lineWidth = 1;
+
+        // 添加图例
+        this.scene.addItem(t);
+      });
+      parser.wallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWall;
+        this.scene.addItem(t);
+      });
+      parser.virtualWallList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowVirtualWall;
+        this.scene.addItem(t);
+      });
+      parser.doorList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowDoor;
+        this.scene.addItem(t);
+      });
+      parser.columnList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowColumn;
+        this.scene.addItem(t);
+      });
+      parser.casementList.forEach((t) => {
+        // 是否显示
+        t.visible = this.isShowWindow;
+        this.scene.addItem(t);
+      });
+      // 画板是否可拖动
+      this.view.DragMove = true;
+      this.view.fitSceneToView();
+      // 获取空间
+      this.mapSpace(spaceList);
+      // 设备
+      this.mapEquipment(equipmentList);
+    },
+
+    // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        item.selectable = true;
+        item.showSelect = false;
+        item.connect("onMouseDown", this, this.spaceDown);
+        this.scene.addItem(item);
+      });
+    },
+
+    // 解析设备点
+    mapEquipment(val) {
+      val.forEach((item) => {
+        if (item.bimLocation) {
+          const arr = item.bimLocation.split(",");
+          const mark = {
+            Id: item.equipId,
+            ElementType: "Mark",
+            equipId: item.equipId,
+            Name: item.equipName,
+            x: Number(arr[0]),
+            y: Number(arr[1]),
+            width: item.width,
+            height: item.height,
+            url: require("./../../public/assets/img/mark.png"),
+          };
+          const aaa = new MarkItem(null, mark);
+          aaa.connect("onMouseDown", this, this.equipDown);
+          this.scene.addItem(aaa);
+        }
+      });
+    },
+    // 点击设备
+    equipDown(item, e) {
+        this.locationGraphy(item);
+    },
+    // 点击空间
+    spaceDown(item, e) {
+      item.selected = true;
+      this.sizeGraphy();
+    },
+    // 画布移动到中部
+    locationGraphy(item) {
+      let centerX = this.view.width / 2 - item.x * this.view.scale;
+      let centerY = (this.view.height / 2 - item.y * this.view.scale);
+      this.view.origin = new SPoint(centerX, centerY);
+    },
+    // 局部放大
+    sizeGraphy() {
+      this.view.fitSelectedToView(0.9);
+    },
+
+    // 清空画布
+    clearImg() {
+      this.scene = new SGraphScene();
+      if (this.view) {
+        this.view.update();
+      }
+    },
+  },
+  watch: {
+    // 监听key
+    dataKey: {
+      handler(val) {
+        if (val) {
+          this.init();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.clearImg();
+  },
+  mounted() {
+    // 获取 canvas 的宽高
+    this.canvasWidth = 800;
+    this.canvasHeight = 600;
+    // 初始化场景类
+    this.view = new FloorView("floorMap1");
+    if (this.scene) {
+      this.view.scene = this.scene;
+    }
+  },
+};
+</script>

+ 26 - 0
docs/.vuepress/components/tDInsert/tooltip.vue

@@ -0,0 +1,26 @@
+<template >
+  <div id="tooltip">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+#tooltip {
+  min-width: 40px;
+  min-height: 40px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.1);
+  border-radius: 2px;
+  padding: 6px 10px 6px 10px;
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  top: 0;
+}
+</style>

+ 3 - 3
docs/guides/index.js

@@ -92,9 +92,9 @@ const content = [
             ["/guides/tDInsert/get-start.md", "快速上手"],
             ["/guides/tDInsert/addEvent.md", "添加事件"],
             ["/guides/tDInsert/addPicture.md", "添加二次绘制图"],
-            ["/guides/tDInsert/install.md", "实现tooltip"],
-            ["/guides/tDInsert/install.md", "画布拖动"],
-            ["/guides/tDInsert/install.md", "切换楼层"],
+            ["/guides/tDInsert/addTootip.md", "实现tooltip"],
+            ["/guides/tuopuInsert/dragScene.md", "画布拖动"],
+            ["/guides/tDInsert/partChange.md", "局部放大与移动"],
             ["/guides/tDInsert/install.md", "平面图示例代码"],
         ]
     },

+ 82 - 2
docs/guides/tDInsert/addPicture.md

@@ -1,9 +1,89 @@
 ## 添加二次绘制的数据
 根据业务我们常常会在平面图上做一些二次的绘制以满足业务需求<br>
 所以业务一般是这样的<br>
-1. 接口请求平面图(具体看快速上手);
+1. 接口请求平面图(具体看快速上手);
 2. 接口请求二次绘制的区域类图和点
 
 ### 绘制示例
+(为保持文档文档,底图将不走接口,用本地数据、若涉及到底图相关,请移步“快速上手”)
+<tDInsert-addPicture/>
+注,本次直接引入设备与空间数据模拟接口请求返回
 
-<tDInsert-addPicture/>
+#### 数据格式
+
+::: details 空间接口返回参数(必要返回参数)
+<<< @/docs/.vuepress/components/tDInsert/data/spacelist.js
+:::
+
+::: details 设备接口返回参数(必要返回参数)
+<<< @/docs/.vuepress/components/tDInsert/data/equipmentList.js
+:::
+
+::: tip
+更多数据格式相关看 “数据格式” 模块!
+:::
+
+#### 示例代码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tDInsert/addPicture.vue
+:::
+
+####  图标源码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tDInsert/addPictureClass/MarkItem
+:::
+
+#### 源码解析
+::: details 源码解析
+1. 绘制平面图
+移步 “快速上手”
+2. 绘制空间
+```js
+// 引入空间解析器
+import {SZoneParser } from "@persagy-web/big/lib";
+
+  // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+    //   将空间数据传入 parseData 方法中
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        this.scene.addItem(item);
+      });
+    },
+```
+3. 绘制坐标类(引擎包中未提供解析器)
+
+```js
+// 引入 mark 坐标
+import { MarkItem } from "./addPictrueClass/MarkItem";
+    // 将设备数组传入该方法
+    mapEquipment(val) {
+      val.forEach((item) => {
+        if (item.bimLocation) {
+            // 解析坐标
+          const arr = item.bimLocation.split(",");
+           //   mark存入必要参数
+           //  其他数据也可以绑入,item.data中存储,方便交互
+          const mark = {
+            Id: item.equipId,
+            ElementType: "Mark",
+            equipId: item.equipId,
+            Name: item.equipName,
+            x: Number(arr[0]),
+            y: Number(arr[1]),
+            width: item.width,
+            height: item.height,
+            url:require('./../../public/assets/img/mark.png')
+          };
+          this.scene.addItem(new MarkItem(null,mark));
+        }
+      });
+    },
+```
+
+:::

+ 110 - 0
docs/guides/tDInsert/addTootip.md

@@ -0,0 +1,110 @@
+## 添加 tooltip 功能
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制图例
+
+<tDInsert-addTooltip/>
+
+#### 示例代码
+
+::: details 示例代码
+<<< @/docs/.vuepress/components/tDInsert/addTooltip.vue
+:::
+
+::: details tooltip
+<<< @/docs/.vuepress/components/tDInsert/tooltip.vue
+:::
+
+::: details addPicture
+<<< @/docs/.vuepress/components/tDInsert/addPicture.vue
+:::
+
+#### 代码分解
+
+
+::: details 1. 引入二次绘制图,绑定移入移出事件,并绑定 tooltip 数据
+```js
+// 在 addPicture.vue中
+  // 解析业务空间
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 设置 tooltip 信息
+        item.data.tooltipmsg = "空调房";
+        // 添加事件绑定
+        item.connect("onMouseLeave", this, this.onMouseleave);
+        item.connect("onMouseEnter", this, this.onMouseenter);
+        // 添加到场景
+        this.scene.addItem(item);
+      });
+    },
+
+    // 解析设备点
+    mapEquipment(val) {
+      val.forEach((item) => {
+        if (item.bimLocation) {
+          const arr = item.bimLocation.split(",");
+          const mark = {
+            Id: item.equipId,
+            ElementType: "Mark",
+            equipId: item.equipId,
+            Name: item.equipName,
+            x: Number(arr[0]),
+            y: Number(arr[1]),
+            width: item.width,
+            height: item.height,
+            url: require("./../../public/assets/img/mark.png"),
+            tooltipmsg: "空调01", //tooltip信息
+          };
+          const t = new MarkItem(null, mark);
+          t.connect("onMouseLeave", this, this.onMouseleave);
+          t.connect("onMouseEnter", this, this.onMouseenter);
+          this.scene.addItem(t);
+        }
+      });
+    },
+    // 将事件抛出,方便父组件接受
+        // 鼠标移出
+    onMouseleave(item, e) {
+      this.$emit("onMouseleave", item, e);
+    },
+    // 鼠标移入
+    onMouseenter(item, e) {
+      this.$emit("onMouseenter", item, e);
+    },
+```
+:::
+
+::: details 2. 在父组件中 获取鼠标坐标赋值,并显示toolip 数据
+
+```js
+//1 设置父盒子相对css
+.base {
+  position: relative;
+}
+
+// 2.对toolitp组件设置相关坐标
+  //   鼠标移入
+
+    mouseenter(item, e) {
+      //   显示卡片
+      this.showTooltip = true;
+      //   赋给卡片坐标
+      this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
+      this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
+      //   赋给内容
+      this.tooltipmsg = item.data.tooltipmsg;
+    },
+    //   鼠标移出
+    mouseLeave(item, e) {
+      this.showTooltip = false;
+    },
+
+
+```
+:::

+ 58 - 0
docs/guides/tDInsert/partChange.md

@@ -0,0 +1,58 @@
+## 局部放大与局部移动
+
+::: details 目录
+[[toc]]
+:::
+
+### 绘制示例(点击图中区域和点位)
+
+<tDInsert-partChange/>
+
+#### 源码展示
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/tDInsert/partChange.vue
+:::
+
+#### 源码解析
+
+::: details 点击区域局部放大
+```js
+ //1. 解析业务空间 设置 selectable 和 showSelect
+    mapSpace(val) {
+      if (!this.scene) return;
+      const parse = new SZoneParser();
+      parse.parseData(val);
+      parse.zoneList.forEach((item) => {
+        // 添加到场景
+        ////////////重要
+        item.selectable = true;
+        item.showSelect = false;
+        item.connect("onMouseDown", this, this.spaceDown);
+        this.scene.addItem(item);
+      });
+    },
+  // 2.  点击空间 selected 为true
+    spaceDown(item, e) {
+      item.selected = true;
+      this.sizeGraphy();
+    },
+//   3. 设置放大比例 (最大为1)
+   // 局部放大
+    sizeGraphy() {
+      this.view.fitSelectedToView(0.9);
+    },
+```
+:::
+
+::: details 图例移入画布中心点
+```js
+  //   点击获取到图例item 后执行此方法
+  // 画布移动到中部
+    locationGraphy(item) {
+      let centerX = this.view.width / 2 - item.x * this.view.scale;
+      let centerY = (this.view.height / 2 - item.y * this.view.scale);
+      this.view.origin = new SPoint(centerX, centerY);
+    },
+```
+:::

+ 5 - 2
docs/guides/tuopuInsert/dragScene.md

@@ -3,17 +3,20 @@
 ::: details 目录
 [[toc]]
 :::
+
 ### 1 默认画布长按中键拖动
 
 #### 绘制示例
 <tuopu-baseTopu1/>
 
 ### 2 不允许拖动(默认为 true)
+
+#### 绘制示例
+<tuopu-baseTopu4/>
+
 ```
 this.view.moveable = false;
 ```
-#### 绘制示例
-<tuopu-baseTopu4/>
 
 ### 左键拖动画布