Poi 对象

createPoi

创建 poi 对象。

样例：

定义：

interface NameCanvasInfo {
  canvasWidth?: number;
  canvasHeight?: number;
  font?: string;
  fillStyle?: CanvasFillStrokeStyles['fillStyle'];
  strokeStyle?: CanvasFillStrokeStyles['strokeStyle'];
  textAlign?: CanvasTextAlign;
  textBaseline?: CanvasTextBaseline;
  backgroundStyle?: CanvasFillStrokeStyles['fillStyle'];
  borderStyle?: CanvasFillStrokeStyles['strokeStyle'];
  borderWidth?: number;
}

interface PoiInfo extends BaseObject3DInfo {
  url: string;
  type?: PoiType;
  namePosition?: IVector3;
  nameScale?: IVector3;
  nameCanvasInfo?: NameCanvasInfo;
  iconScale?: IVector3;
  scaleFixed?: ScaleFixed;
}

function createPoi(poiInfo: PoiInfo): Poi;

用法：

ssp.createPoi(
  // poiInfo
  {
    id: 'xx',
    name: 'xx',
    nameCanvasInfo: {
      fillStyle: '#fff',
      strokeStyle: '#000',
    },
    type: '2.5d',
    url: 'http://xx.com/xx.png',
    level: {
      max: 1000,
      min: null,
    },
    position: { x: 0, y: 0, z: 0 },
    rotation: { x: 0, y: 0, z: 0 },
    scale: { x: 2, y: 2, z: 2 },
    onClick(e) {
      /**
       * 对象的独立事件触发后，默认不传播（类似 DOM 的事件冒泡）到全局事件，
       * 调用 eventPropagation 方法通知事件继续传播到全局。
       *
       * warn：
       *  在 **非箭头函数** 中参数 e 与 this 的指向都是当前对象对象，
       *  在 *箭头函数** 参数 e 依然是对象对象，但 this 指向会发生改变。
       */
      this.eventPropagation();

      console.log('对象自身的点击事件触发', this);
    },
    onDblClick: (e) => {
      /**
       * 这里模拟在 **箭头函数** 中
       */
      e.eventPropagation();

      console.log('对象自身的双击事件触发', e);
    },
    userData: {},
  }
);

// 3d poi
ssp.createPoi({
  id: 'xx',
  name: 'xx',
  nameCanvasInfo: {
    fillStyle: '#fff',
    strokeStyle: '#000',
  },
  type: '3d',
  url: '/xx.png',
});

提示

2d 不支持 rotation 和 scale 属性。

2.5d 不支持 rotation 属性`。

参数：

poiInfo

描述: 实例 Poi 对象所需信息
类型: poiInfo
必填:

poiInfo

属性	描述	类型	默认值
id	唯一ID	string \| number
name	名称	string
type	类型	PoiType	2.5d
namePosition	展示名称的位置偏移（相对于poi）	Position	{ x: 0, y: 10, z: 0 }
nameScale	展示名称的缩放比例	Scale	{ x: 16, y: 16, z: 1 }
nameCanvasInfo	展示名称 canvas 配置	NameCanvasInfo	参考下方
iconScale	图片的缩放比例	Scale	{ x: 16, y: 16, z: 1 }
scaleFixed	相机超过设定距离时的固定缩放比例	ScaleFixed
url	图片资源路径	string
level	显示层级范围	Level	{ max: null, min: null }
visible	是否可见	boolean	true
position	位置坐标	Position	{ x: 0, y: 0, z: 0 }
rotation	旋转弧度	Rotation	{ x: 0, y: 0, z: 0 }
scale	缩放比例	Scale	{ x: 1, y: 1, z: 1 }
userData	用户数据	any	{}
onClick	左键单击事件	(object: Poi) => void	null
onDblClick	左键双击事件	(object: Poi) => void	null
onRightClick	右键单击事件	(object: Poi) => void	null
onLoad	创建完成事件	(object: Poi) => void	null

nameCanvasInfo

属性	描述	类型	默认值
canvasWidth	画布宽度	number	256
canvasHeight	画布高度	number	256
font	字体	string	32px Microsoft YaHei
fillStyle	填充色	CanvasFillStrokeStyles[fillStyle]	#fff
strokeStyle	描边色	CanvasFillStrokeStyles[strokeStyle]	#000
textAlign	文本对齐	CanvasTextAlign	center
textBaseline	文本基线	CanvasTextBaseline	middle
backgroundStyle	文本背景色	CanvasFillStrokeStyles[fillStyle]
borderStyle	文本边框色	CanvasFillStrokeStyles[strokeStyle]
borderWidth	文本边框宽度	number	3

scaleFixed

属性	描述	类型
originScale	小于 distance 时的 scale	number
fixedScale	大于 distance 时的固定 scale	number
distance	距离阈值	number

提示

使用 scaleFixed 需要开启 scaleFixedEnabled 配置

getPoiById

通过 id 查找

定义：

function getPoiById(id: PoiInfo['id']): Poi | null;

用法：

const poi = ssp.getPoiById('xxx');

弃用警告

请使用 getObjectById 替代

getPoiByName

通过 name 查找

定义：

function getPoiByName(name: string): Poi[];

用法：

const poiList = ssp.getPoiByName('xxx');

弃用警告

请使用 getObjectByName 替代

getAllPoi

获取所有 Poi 对象

定义：

function getAllPoi(): Poi[];

用法：

const allPoiList = ssp.getAllPoi();

getPoiByUserDataProperty

通过 userData 属性查找

定义：

function getPoiByUserDataProperty(propNameOrFindFunc: string | UserDataPropertyFindFunc, value?: any): Poi[];

用法：

const poiList = ssp.getPoiByUserDataProperty('propKey'， 'propVal')
// or
const poiList = ssp.getPoiByUserDataProperty(item => item['itemPropKey'] === 'itemPropVal')

参数：

propNameOrFindFunc

描述: userData 内属性名或 find 函数
类型: string | function
必填:

propValue

描述: userData 内属性值。
类型: any
必填:

find 函数使用场景

poi.userData = {
  people: {
    name: 'xiaoming',
    age: 18,
  },
};
const poiList = ssp.getPoiByUserDataProperty((userData) => userData?.people?.name === 'xiaoming');

弃用警告

请使用 getObjectByUserDataProperty 替代

removePoiById

通过 id 移除

定义：

function removePoiById(id: PoiInfo['id']): boolean;

用法：

ssp.removePoiById('xxx');

弃用警告

请使用 removeObjectById 替代

createPoiToGroup

创建 poi 到一个组内。

定义：

function createPoiToGroup(groupInfo: GroupInfo, poiInfoList: PoiInfo[]): Group;

用法：

ssp.createPoiToGroup(
  // groupInfo
  {
    id: 'firstPoiGroup',
    name: 'name_firstPoiGroup',
    // ...
  },
  // poiInfoList
  [poiInfo1, poiInfo2, poiInfo3]
);

参数

groupInfo

描述: 实例组对象所需信息
类型: GroupInfo
必填:

poiInfoList

描述: poiInfo 集合
类型: poiinfo[]
必填:

createGroupForPoi

为 poi 提前创建一个空组。

使用场景

与 createPoiToGroup 不同，有些时候可能你还没有具体的 poiInfo 数据，但你想提前创建一个批量管理的空组，当有数据时再使用 addPoiForGroup 插入。

定义：

function createGroupForPoi(groupInfo: GroupInfo): Group;

用法：

ssp.createGroupForPoi({
  id: 'firstPoiGroup',
  name: 'name_firstPoiGroup',
  // ...
});

参数

groupInfo

描述: 实例组对象所需信息
类型: GroupInfo
必填:

弃用警告

请使用 createGroup 替代

addPoiForGroup

向一个已经存在的组内添加 poi 对象。

定义：

function addPoiForGroup(groupId: GroupInfo['id'], poiInfoList: PoiInfo[]): Group | null;

用法：

ssp.addPoiForGroup(
  // groupId
  'firstPoiGroup',
  // poiInfoList
  [poiInfo4, poiInfo5]
);

参数

groupId

描述: 组 id
类型: groupId[‘id’]
必填:

poiInfoList

描述: poiInfo 集合
类型: poiinfo[]
必填:

getPoiGroupById

通过 id 查找 poi 组

定义：

function getPoiGroupById(id: GroupInfo['id']): Group | null;

用法：

const group = ssp.getPoiGroupById('firstPoiGroup');

弃用警告

请使用 getObjectById 替代

getPoiGroupByName

通过 name 查找 poi 组

定义：

function getPoiGroupByName(name: string): Group[];

用法：

const groupList = ssp.getPoiGroupByName('name_firstPoiGroup');

弃用警告

请使用 getObjectByName 替代

getAllPoiGroup

获取所有 Poi 对象组

定义：

function getAllPoiGroup(): Group[];

用法：

const allPoiGroupList = ssp.getAllPoiGroup();

弃用警告

请使用 getAllGroup 替代

removePoiGroupById

通过 id 移除 poi 组

定义：

function removePoiGroupById(id: GroupInfo['id']): boolean;

用法：

const isRemoveSuccess = ssp.removePoiGroupById('firstPoiGroup');

弃用警告

请使用 removeObjectById 替代

clearPoi

清除当前场景内所有 poi 对象。

定义：

function clearPoi(): void;

用法：

ssp.clearPoi();

showAllPoi

显示当前场景内所有 poi 对象。

定义：

function showAllPoi(): void;

用法：

ssp.showAllPoi();

hideAllPoi

隐藏当前场景内所有 poi 对象。

定义：

function hideAllPoi(): void;

用法：

ssp.hideAllPoi();

Poi 对象 ​

createPoi ​

样例： ​

定义： ​

用法： ​

参数： ​

poiInfo ​

poiInfo ​

nameCanvasInfo ​

scaleFixed ​

getPoiById ​

定义： ​

用法： ​

getPoiByName ​

定义： ​

用法： ​

getAllPoi ​

定义： ​

用法： ​

getPoiByUserDataProperty ​

定义： ​

用法： ​

参数： ​

propNameOrFindFunc ​

propValue ​

removePoiById ​

定义： ​

用法： ​

createPoiToGroup ​

定义： ​

用法： ​

参数 ​

groupInfo ​

poiInfoList ​

createGroupForPoi ​

定义： ​

用法： ​

参数 ​

groupInfo ​

addPoiForGroup ​

定义： ​

用法： ​

参数 ​

groupId ​

poiInfoList ​

getPoiGroupById ​

定义： ​

用法： ​

getPoiGroupByName ​

定义： ​

用法： ​

getAllPoiGroup ​

定义： ​

用法： ​

removePoiGroupById ​

定义： ​

用法： ​

clearPoi ​

定义： ​

用法： ​

showAllPoi ​

定义： ​

用法： ​

hideAllPoi ​

定义： ​

用法： ​

Poi 对象

createPoi

样例：

定义：

用法：

参数：

poiInfo

poiInfo

nameCanvasInfo

scaleFixed

getPoiById

定义：

用法：

getPoiByName

定义：

用法：

getAllPoi

定义：

用法：

getPoiByUserDataProperty

定义：

用法：

参数：

propNameOrFindFunc

propValue

removePoiById

定义：

用法：

createPoiToGroup

定义：

用法：

参数

groupInfo

poiInfoList

createGroupForPoi

定义：

用法：

参数

groupInfo

addPoiForGroup

定义：

用法：

参数

groupId

poiInfoList

getPoiGroupById

定义：

用法：

getPoiGroupByName

定义：

用法：

getAllPoiGroup

定义：

用法：

removePoiGroupById

定义：

用法：

clearPoi

定义：

用法：

showAllPoi

定义：

用法：

hideAllPoi

定义：

用法：