get-start.md 2.9 KB

快速上手

::: details 目录 [[toc]] :::

一、绘制底图

代码分解

  1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view. ``` // 清空画布 clearImg() { this.scene = new SGraphScene(); if (this.view) { this.view.update(); } },

created() {

this.clearImg();

},

mounted() {

// 获取 canvas 的宽高
this.canvasWidth = 800;
this.canvasHeight = 600;
// 初始化场景类(注入id)
this.view = new SGraphView("floorMap");
if (this.scene) {
  this.view.scene = this.scene;
}

},


2. getJsonz 请求jsonz压缩包(该方法自动解压生成json数据)

import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib"; getJsonz(url)

    .then((data) => {
      this.loading = false;
    })
    .catch(() => {
      this.loading = false;
    });

3. 获取 json 数据通过解析器转换成实例

import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";

getJsonz(url)

    .then((data) => {
      this.loading = false;
        this.parserData(data);
    })
    .catch(() => {
      this.loading = false;
    });
      // 解析数据并注入 scene 类中
parserData(data) {
 // 通过解析器将数据解析成 item
  let parser = new SFloorParser();
  parser.parseData(data);
},
4 将实例添入场景中

// 解析数据并注入 scene 类中

parserData(data) {
 // 通过解析器将数据解析成 item
  let parser = new SFloorParser();
  parser.parseData(data);
  // 注入场景中
    parser.parseData(data);
  parser.spaceList.forEach((t) => {
    // 添加图例
    this.scene.addItem(t);
  });
  parser.wallList.forEach((t) => {
    this.scene.addItem(t);
  });
  parser.virtualWallList.forEach((t) => {
    this.scene.addItem(t);
  });
  parser.doorList.forEach((t) => {
    this.scene.addItem(t);
  });
  parser.columnList.forEach((t) => {
    this.scene.addItem(t);
  });
  parser.casementList.forEach((t) => {
    this.scene.addItem(t);
  });
  // 画板是否可拖动
  this.view.DragMove = true;
  this.view.fitSceneToView();
},

### 二、绘制修改底图样式

<tDInsert-getStart1/>

#### 代码分解
``` /////////////////////////////////////////
    // 样式调整
    // 是否显示实例
    t.visible = this.isSpaceSelectable;
    //是否展示名称
    t.showBaseName = false;
    // 显示边框色
    t.strokeColor = new SColor("#F0F3F7");
    // 填充色
    t.fillColor = new SColor("#F0F3F7");
    // 边框线宽
    t.lineWidth = 1;

::: tip 更多属性请查看以下连接
http://doc.sagacloud.cn/api/web/big/globals.html :::