文档

小地图渲染

更新时间:

本文主要介绍小地图的渲染。

1、初始化

小地图的初始化和可编辑户型图的初始化一样,只需要在初始化的时候添加一个mode字段即可

//<div id='map'></div> 

var thumbnail = new Palette({
    mode: 'view' // 必须添加,表示当前画板只做渲染
    width: 125,
    height: 125,
    plottingScale: 1, 
    containerId: "map",
    backgroundImg:'', // 非必要
    data: JSON.parse(JSON.stringify(vectorMap)), //orthomap.json的vectorMap字段值
    refs: { // 非必要
      url: '',
    },
    rotation: 0,
    ratio: 1,
    styleOptions: {
      wallColor: 0x959595,
    },
  });

2、ratio字段说明

小地图和可编辑户型图初始化都有ratio字段,表示初始绘制内容的缩放,当两者关联渲染时,要做比例兼容

具体如何兼容案例如下:

var boxSize = 550
// scale 初始缩放比例,默认1
// 户型图编辑面板
var baseSize = 900;
var palette = new Palette({
  // ...
  width: 900,
  height: 900
  ratio:( scale * baseSize) / boxSize 
})
// 小地图
// 900是户型图编辑面板的宽度,125是小地图的宽度
var correct = (baseSize / 900)* 125
var thumbnail = new Palette({
  // ...
  width: 125,
  height: 125
  ratio:( scale * correct) / boxSize 
})

比例不相同会出现如下情况

error

3、画板(背景图+绘制内容)操作

// 缩放
thumbnail.worldScale(ratio: number)

// 平移
thumbnail.worldTranslate(x: number, y: number)

// 旋转
thumbnail.rotate(rotation: number)

4、其他方法

// 初始化小地图数据
thumbnail.initData(vectorMap)