# Marker组件
使用Marker组件可以为实体添加标记。当前支持文本、图标、Lottie (opens new window)三种类型标记，文本和图标、文本和Lottie可以组合显示，图标和Lottie无法组合显示。
1️⃣ 文本标记
import { Marker } from '@tx3d/core';
// 创建空实体
const entity = engine.createEntity();
// 添加Marker组件
const marker = entity.addComponent( Marker, {
text: {
name: '华夏天信',
size: 24,
color: '#ffffff',
outline: true,
outlineColor: '#888888'
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2️⃣ 图标标记
import { Marker } from '@tx3d/core';
// 创建空实体
const entity = engine.createEntity();
// 添加Marker组件
const marker = entity.addComponent( Marker, {
image: {
map: 'assets/textures/point.png',
size: 48
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3️⃣ Lottie标记
import { Marker } from '@tx3d/core';
// 创建空实体
const entity = engine.createEntity();
// 添加Marker组件
const marker = entity.addComponent( Marker, {
lottie: {
path: 'assets/jsons/panel/lottie/695-bouncy-mapmaker.json',
size: 48
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4️⃣ 文本和图标组合标记
import { Marker } from '@tx3d/core';
// 创建空实体
const entity = engine.createEntity();
// 添加Marker组件
const marker = entity.addComponent( Marker, {
text: {
name: '华夏天信',
size: 24,
color: '#ffffff',
outline: true,
outlineColor: '#888888'
},
image: {
map: 'assets/textures/point.png',
size: 48
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
5️⃣ 文本和Lottie组合标记
import { Marker } from '@tx3d/core';
// 创建空实体
const entity = engine.createEntity();
// 添加Marker组件
const marker = entity.addComponent( Marker, {
text: {
name: '华夏天信',
size: 24,
color: '#ffffff',
outline: true,
outlineColor: '#888888'
},
lottie: {
path: 'assets/jsons/panel/lottie/695-bouncy-mapmaker.json',
size: 48
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
提示
Marker组件初始化参数，详见MarkerParameters。
# 属性
🌏 text 文本内容
// 获取文本内容
const text = marker.text;
// 设置文本内容
marker.text = '华夏天信';
1
2
3
4
5
2
3
4
5
🌏 textSize 文本文字尺寸，单位：像素。
// 获取文本文字尺寸
const textSize = marker.textSize;
// 设置文本文字尺寸
marker.textSize = 24;
1
2
3
4
5
2
3
4
5
🌏 textColor 文本颜色
// 获取文本颜色
const textColor = marker.textColor;
// 设置文本颜色
marker.textColor = '#ff0000';
1
2
3
4
5
2
3
4
5
🌏 textOutline 文本描边
// 获取文本是否描边
const textOutline = marker.textOutline;
// 设置文本是否描边
marker.textOutline = true;
1
2
3
4
5
2
3
4
5
🌏 textOutlineColor 文本描边颜色
// 获取文本描边颜色
const textOutlineColor = marker.textOutlineColor;
// 设置文本描边颜色
marker.textOutlineColor = '#888888';
1
2
3
4
5
2
3
4
5
🌏 textVisible 文本可见性控制，只写。
// 设置文本可见性
marker.textVisible = false;
1
2
2
🌏 textAlign 文本对齐方式
import { TextAlign } from '@tx3d/core';
// 获取文本对齐方式
const textAlign = marker.textAlign;
// 设置文本对齐方式
marker.textAlign = TextAlign.RIGHT;
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
文本对齐方式，详见TextAlign。
🌏 image 图标资源
// 获取图标资源
const image = marker.image;
// 设置图标资源
marker.image = 'assets/textures/pointgreen.png';
1
2
3
4
5
2
3
4
5
🌏 imageSize 图标尺寸，单位：像素。
// 获取图标尺寸
const imageSize = marker.imageSize;
// 设置图标尺寸
marker.imageSize = 32;
1
2
3
4
5
2
3
4
5
🌏 imageColor 图标混合颜色
// 获取图标混合颜色
const imageColor = marker.imageColor;
// 设置图标混合颜色
marker.imageColor = '#00ff00';
1
2
3
4
5
2
3
4
5
🌏 imageVisible 图标可见性控制，只写。
// 设置图标可见性
marker.imageVisible = true;
1
2
2
🌏 isImageReady 图标是否已准备好，只读。
// 判断图标是否已准备好
if ( marker.isImageReady ) {
// TODO:
}
1
2
3
4
5
6
2
3
4
5
6
注意
- 图标创建是异步的，所以Marker组件添加完成后并不意味着图标已创建完成，可以通过isImageReady判断是否已创建完成；
- 如果Marker组件不包含图标，调用isImageReady也会返回false。
🌏 lottie Lottie资源
// 获取Lottie资源
const lottie = marker.lottie;
// 设置Lottie资源
marker.lottie = 'assets/jsons/panel/lottie/695-bouncy-mapmaker.json'
1
2
3
4
5
2
3
4
5
🌏 lottieSize Lotties尺寸，单位：像素。
// 获取Lottie尺寸
const lottieSize = marker.lottieSize;
// 设置Lottie尺寸
marker.lottieSize = 32;
1
2
3
4
5
2
3
4
5
🌏 lottieColor Lottie混合颜色
// 获取Lottie混合颜色
const lottieColor = marker.lottieColor;
// 设置Lottie混合颜色
marker.lottieColor = '#00ff00';
1
2
3
4
5
2
3
4
5
🌏 lottieVisible Lottie可见性控制，只写。
// 设置Lottie可见性
marker.lottieVisible = true;
1
2
2
🌏 isLottieReady 判断Lottie是否已准备好了，只读。
// 判断Lottie是否已准备好
if ( marker.isLottieReady ) {
// TODO:
}
1
2
3
4
5
6
2
3
4
5
6
注意
- Lottie创建是异步的，所以Marker组件添加完成后并不意味着Lottie已创建完成，可以通过isLottieReady判断是否已创建完成；
- 如果Marker组件不包含Lottie，调用isLottieReady也会返回false。
🌏 horizontalOrigin 水平方向原点
import { HorizontalOrigin } from '@tx3d/core';
// 获取水平方向原点
const horizontalOrigin = marker.horizontalOrigin;
// 设置水平方向原点
marker.horizontalOrigin = HorizontalOrigin.CENTER;
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
水平方向原点，详见HorizontalOrigin。
🌏 verticalOrigin 垂直方向原点
import { VerticalOrigin } from '@tx3d/core';
// 获取垂直方向原点
const verticalOrigin = marker.verticalOrigin;
// 设置垂直方向原点
marker.verticalOrigin = VerticalOrigin.BOTTOM;
1
2
3
4
5
6
7
2
3
4
5
6
7
提示
垂直方向原点，详见VerticalOrigin。
🌏 offset 水平和垂直方向偏移量，单位：像素。
// 获取水平和垂直方向偏移量
const offset = marker.offset;
// 设置水平和垂直方向偏移量
marker.offset = [ 10, 0 ];
1
2
3
4
5
2
3
4
5
🌏 sizeScale 尺寸缩放量
// 获取尺寸缩放量
const sizeScale = marker.sizeScale;
// 设置尺寸缩放量
marker.sizeScale = 1.25;
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取透明度
const opacity = marker.opacity;
// 设置透明度
marker.opacity = 0.75;
1
2
3
4
5
2
3
4
5
🌏 occluded 是否可遮挡
// 获取是否可遮挡
const occluded = marker.occluded;
// 设置是否可遮挡
marker.occluded = false;
1
2
3
4
5
2
3
4
5
🌏 autoCulling 是否自动遮挡剔除
// 获取是否自动遮挡剔除
const autoCulling = marker.autoCulling;
// 设置是否自动遮挡剔除
marker.autoCulling = true;
1
2
3
4
5
2
3
4
5
🌏 weight 自动遮挡剔除权重
// 获取自动遮挡剔除权重
const weight = marker.weight;
// 设置自动遮挡剔除权重
marker.weight= 1.25;
1
2
3
4
5
2
3
4
5
# 接口
🌏 play 播放Lottie动画
// 播放Lottie动画
marker.play();
1
2
2
🌏 pause 暂停Lottie动画
// 暂停Lottie动画
marker.pause();
1
2
2
🌏 stop 停止Lottie动画
// 停止Lottie动画
marker.stop();
1
2
2
🌏 setSpeed 设置Lottie动画播放速度
// 设置Lottie动画播放速度
marker.setSpeed( 2.0 );
1
2
2
🌏 setDirection 设置Lottie动画播放方向
// 设置Lottie动画播放方向
marker.setDirection( 1.0 );
1
2
2
提示
可选+1或-1，其中+1表示正向播放，-1表示反向播放。
🌏 updateProperties 批量更新Marker组件属性
// 批量更新MarKer组件属性
marker.updateProperties( {
sizeScale: 1.25,
text: {
name: '华夏天信',
color: '#ff00de'
},
image: {
map: 'assets/textures/poi.png'
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
提示
更新参数，详见MarkerParameters。
注意
updateProperties是一个异步（ async ）方法。