类 Label

Description

标签对象，用于在地图上渲染文本标签、图标标签或两者结合, 支持自定义样式。 Label组件一般用于批量管理大量标签数据, 比如整体显隐控制, 对于少量的标签加载和管理推荐使用RenderingLabel。

示例: 文本标签

// 创建一个文本标签
const textLabel = engine.add(new mapvthree.Label({
    type: 'text',
    textSize: 16,
    textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
    textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
    textStrokeWidth: 2, // 边框宽度
}))
const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
 {
     type: 'Feature',
     geometry: {
         type: 'Point',
         coordinates: [116.404, 39.915]
     },
     properties: {
         text: '北京市',
     }
 }]);
data.defineAttribute('text', 'text');
textLabel.dataSource = data;

示例: 图标标签

// 创建一个图标标签
const iconLabel = engine.add(new mapvthree.Label({
    type: 'icon',
    vertexIcons: true,
    iconWidth: 40,
    iconHeight: 40,
}));
// 设置数据源
const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
 {
     type: 'Feature',
     geometry: {
         type: 'Point',
         coordinates: [116.404, 39.915]
     },
     properties: {
         icon: 'path/icon.png',
     }
 }
]);
// 设置数据源
data.defineAttribute('icon', 'icon');
iconLabel.dataSource = data;

示例: 图标文字组合标签

// 创建一个图标和文字组合标签
const abel = engine.add(new mapvthree.Label({
    type: 'icontext',
    vertexIcons: true,
    textSize: 16,
    textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
    textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
    textStrokeWidth: 2, // 边框宽度
    iconWidth: 40,
    iconHeight: 40,
}));
// 设置数据源
const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
 {
     type: 'Feature',
     geometry: {
         type: 'Point',
         coordinates: [116.404, 39.915]
     },
     properties: {
         icon: 'path/icon.png',
     }
 }
]);
// 设置数据源
data.defineAttribute('icon', 'icon');
data.defineAttribute('text', 'text');
label.dataSource = data;

Description

Label组件的样式可以通过初始化参数整体控制, 也支持丰富的自定义样式配置(在传入数据中携带)

示例: 自定义样式

// 整体控制样式，在初始化时设置
const label = engine.add(new mapvthree.Label({
    type: 'icontext',
    vertexIcons: true,
    textSize: 16,
    textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
    textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
    textStrokeWidth: 2, // 边框宽度
    iconWidth: 40,
    iconHeight: 40,
}));
// 自定义样式，在传入数据中设置
const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
 {
     type: 'Feature',
     geometry: {
         type: 'Point',
         coordinates: [116.404, 39.915]
     },
     properties: {
         icon: 'path/icon.png',
         iconSize: [40, 40],
         text: '北京市',
         textSize: 16,
         textAnchor: 'center',
         textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
         textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
         textStrokeWidth: 2, // 边框宽度
         textOffset: [0, 0],
         rotateZ: 0, // 旋转角度
     }
}
]);
// 支持的自定义数据配置
// 图标相关
data.defineAttribute('icon', 'icon'); // 图标路径
data.defineAttribute('iconSize', 'iconSize'); // 图标尺寸
// 文字相关
data.defineAttribute('text', 'text'); // 文字内容
data.defineAttribute('textSize', 'textSize'); // 文字大小
data.defineAttribute('textFillStyle', 'textFillStyle'); // 文字颜色
data.defineAttribute('textStrokeStyle', 'textStrokeStyle'); // 文字边框颜色
data.defineAttribute('textStrokeWidth', 'textStrokeWidth'); // 文字边框宽度
data.defineAttribute('textOffset', 'textOffset'); // 文字偏移
data.defineAttribute('textAnchor', 'textAnchor'); // 文字对齐方式
// 其他
data.defineAttribute('rotateZ', 'rotateZ'); // 旋转角度

层级

GeoMesh
- Label

索引

构造函数

constructor

new Label(
    parameters?: {
        enableFade?: boolean;
        flat?: boolean;
        iconHeight?: number;
        iconWidth?: number;
        mapSrc?: string;
        pixelOffset?: any[];
        positionOffset?: any[];
        rotateZ?: number;
        textAlign?: string;
        textAnchor?: string;
        textFamily?: string;
        textFillStyle?: string | any[];
        textOffset?: any[];
        textPadding?: any[];
        textSize?: number;
        textStrokeStyle?: string | any[];
        textStrokeWidth?: number;
        textWeight?: string;
        transparent?: boolean;
        type?: string;
        useIconScale?: any[];
        vertexIcons?: boolean;
    },
): Label
构造函数
参数
- parameters: {
      enableFade?: boolean;
      flat?: boolean;
      iconHeight?: number;
      iconWidth?: number;
      mapSrc?: string;
      pixelOffset?: any[];
      positionOffset?: any[];
      rotateZ?: number;
      textAlign?: string;
      textAnchor?: string;
      textFamily?: string;
      textFillStyle?: string | any[];
      textOffset?: any[];
      textPadding?: any[];
      textSize?: number;
      textStrokeStyle?: string | any[];
      textStrokeWidth?: number;
      textWeight?: string;
      transparent?: boolean;
      type?: string;
      useIconScale?: any[];
      vertexIcons?: boolean;
  } = {}
  配置参数
  - 可选enableFade?: boolean
    是否启用淡入淡出效果, 默认为false, 若要启用淡入淡出效果, 数据中需要指定id
  - 可选flat?: boolean
    是否贴地, 默认为false
  - 可选iconHeight?: number
    图标高度, 默认40
  - 可选iconWidth?: number
    图标宽度, 默认40
  - 可选mapSrc?: string
    图标url
  - 可选pixelOffset?: any[]
    像素偏移, 默认[0,0]
  - 可选positionOffset?: any[]
    坐标偏移, 默认[0,0]
  - 可选rotateZ?: number
    旋转角度, 默认0
  - 可选textAlign?: string
    文本对齐方式,支持'left'|'right'|'center', 默认'center'
  - 可选textAnchor?: string
    文字锚点, 支持'left'|'right'|'top'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right', 默认'center'
  - 可选textFamily?: string
    文字字体
  - 可选textFillStyle?: string | any[]
    文字颜色, 默认[255,255,255]
  - 可选textOffset?: any[]
    文字偏移, 默认[0,0]
  - 可选textPadding?: any[]
    文字内边距, 默认[0,0]
  - 可选textSize?: number
    文字大小, 默认16
  - 可选textStrokeStyle?: string | any[]
    文字描边颜色, 默认[0,0,0]
  - 可选textStrokeWidth?: number
    文字描边宽度, 默认0
  - 可选textWeight?: string
    文字粗细, 默认'400'
  - 可选transparent?: boolean
    是否透明
  - 可选type?: string
    绘制类型,支持'icon'｜'text'｜'icontext'
  - 可选useIconScale?: any[]
    是否使用图片自身的比例
  - 可选vertexIcons?: boolean
    数据中是否携带icon(url资源), 默认为false
返回 Label
重写了 GeoMesh.constructor

属性

`只读`isGeoObject

isGeoObject: true

类型为GeoObject的标识

`只读`isMesh

isMesh: true

类型为Mesh的标识

parameters

parameters: LabelMeshParameters

spriteTexture

spriteTexture: Texture

textTexture

textTexture: Texture

方法

addAttributeRename

addAttributeRename(key: string, value: string): void
添加属性重命名
参数
- key: string
  原始属性名，该组件的属性名
- value: string
  重命名后的属性名，数据源的属性名
返回 void
继承自 GeoMesh.addAttributeRename

clearAttributeRename

clearAttributeRename(): void
清空属性重命名

返回 void
继承自 GeoMesh.clearAttributeRename

dispose

dispose(): void
销毁object上的geometry和material实例，释放资源, 调用engine.remove(object)会自动销毁资源，不需要手动调用

返回 void
继承自 GeoMesh.dispose

removeAttributeRename

removeAttributeRename(key: string): void
移除属性重命名
参数
- key: string
  原始属性名
返回 void
继承自 GeoMesh.removeAttributeRename

访问器

dataSource

get dataSource(): DataSource
object连接的数据源[[DataSource]]类

返回 DataSource
继承自 GeoMesh.dataSource
set dataSource(dataSource: DataSource): void
设置object的数据源
参数
- dataSource: DataSource
  数据源
返回 void
继承自 GeoMesh.dataSource

needsUpdate

get needsUpdate(): boolean
是否需要更新

返回 boolean
继承自 GeoMesh.needsUpdate
set needsUpdate(value: boolean): void
设置object是否在下一帧更新
参数
- value: boolean
  设置为true，则下一帧渲染前更新该object
返回 void
继承自 GeoMesh.needsUpdate

类 Label

Description

示例: 文本标签

示例: 图标标签

示例: 图标文字组合标签

Description

示例: 自定义样式

层级

索引

构造函数

属性

方法

访问器

构造函数

constructor

参数

可选enableFade?: boolean

可选flat?: boolean

可选iconHeight?: number

可选iconWidth?: number

可选mapSrc?: string

可选pixelOffset?: any[]

可选positionOffset?: any[]

可选rotateZ?: number

可选textAlign?: string

可选textAnchor?: string

可选textFamily?: string

可选textFillStyle?: string | any[]

可选textOffset?: any[]

可选textPadding?: any[]

可选textSize?: number

可选textStrokeStyle?: string | any[]

可选textStrokeWidth?: number

可选textWeight?: string

可选transparent?: boolean

可选type?: string

可选useIconScale?: any[]

可选vertexIcons?: boolean

返回 Label

属性

只读isGeoObject

只读isMesh

parameters

spriteTexture

textTexture

方法

addAttributeRename

参数

返回 void

clearAttributeRename

返回 void

dispose

返回 void

removeAttributeRename

参数

返回 void

访问器

dataSource

返回 DataSource

参数

返回 void

needsUpdate

返回 boolean

参数

返回 void

显示设置

目录

`可选`enableFade?: boolean

`可选`flat?: boolean

`可选`iconHeight?: number

`可选`iconWidth?: number

`可选`mapSrc?: string

`可选`pixelOffset?: any[]

`可选`positionOffset?: any[]

`可选`rotateZ?: number

`可选`textAlign?: string

`可选`textAnchor?: string

`可选`textFamily?: string

`可选`textFillStyle?: string | any[]

`可选`textOffset?: any[]

`可选`textPadding?: any[]

`可选`textSize?: number

`可选`textStrokeStyle?: string | any[]

`可选`textStrokeWidth?: number

`可选`textWeight?: string

`可选`transparent?: boolean

`可选`type?: string

`可选`useIconScale?: any[]

`可选`vertexIcons?: boolean

`只读`isGeoObject

`只读`isMesh