类 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 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',
         text: '北京市',
     }
 }
]);
// 设置数据源
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'); // 旋转角度
label.dataSource = data;

层级

GeoMesh
- Label

索引

构造函数

constructor

new Label(
    parameters?: {
        clampToGround?: boolean;
        enableFade?: boolean;
        flat?: boolean;
        groundTargets?: any[];
        iconHeight?: number;
        iconWidth?: number;
        mapSrc?: string;
        padding?: any[];
        pixelOffset?: any[];
        positionOffset?: number[];
        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?: boolean;
        vertexIcons?: boolean;
    },
): Label
构造函数
参数
- parameters: {
      clampToGround?: boolean;
      enableFade?: boolean;
      flat?: boolean;
      groundTargets?: any[];
      iconHeight?: number;
      iconWidth?: number;
      mapSrc?: string;
      padding?: any[];
      pixelOffset?: any[];
      positionOffset?: number[];
      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?: boolean;
      vertexIcons?: boolean;
  } = {}
  配置参数
  - 可选clampToGround?: boolean
    锚点贴合三维实体表面，保留自身朝向
  - 可选enableFade?: boolean
    是否启用淡入淡出效果, 默认为false, 若要启用淡入淡出效果, 数据中需要指定id
  - 可选flat?: boolean
    是否采用平面朝向；三维实体表面贴合由 clampToGround 控制
  - 可选groundTargets?: any[]
    接收对象根节点；省略时自动发现，空数组表示不接收
  - 可选iconHeight?: number
    图标高度, 默认40
  - 可选iconWidth?: number
    图标宽度, 默认40
  - 可选mapSrc?: string
    图标url
  - 可选padding?: any[]
    文字与图标间距, 默认[2, 2]
  - 可选pixelOffset?: any[]
    整体屏幕偏移，单位为 CSS 像素，正 X 向右、正 Y 向上；仅 flat=false 时生效，不随 keepSize 缩放
  - 可选positionOffset?: number[]
    三维坐标偏移
  - 可选rotateZ?: number
    旋转角，单位弧度
  - 可选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,2]
  - 可选textSize?: number
    文字大小, 默认16
  - 可选textStrokeStyle?: string | any[]
    文字描边颜色, 默认[0,0,0]
  - 可选textStrokeWidth?: number
    文字描边宽度, 默认0
  - 可选textWeight?: string
    文字粗细, 默认'400'
  - 可选transparent?: boolean
    是否启用透明混合
  - 可选type?: string
    绘制类型,支持'icon'｜'text'｜'icontext'
  - 可选useIconScale?: boolean
    是否使用图片自身的比例
  - 可选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

addComponent

addComponent(component: any): void
注册一个 component，在 fade 数据更新时接收通知
参数
- component: any
  需实现 onFadeUpdate(renderedData) 和 dispose() 方法
返回 void

clearAttributeRename

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

返回 void
继承自 GeoMesh.clearAttributeRename

clone

clone(): any
Returns a clone of this object and optionally all descendants.

返回 any
重写了 GeoMesh.clone

dispose

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

返回 void
继承自 GeoMesh.dispose

intersectsFrustum

intersectsFrustum(frustum: Frustum): boolean
视锥剔除测试。

three r18x 起 WebGLRenderer 把剔除判断从 frustum.intersectsObject(object) 改成了 object.intersectsFrustum(frustum)，而 Object3D 的基类实现是空函数（返回 undefined）。本类只是打了 isMesh 标记、并不继承 three 的 Mesh，所以必须自己实现，否则在新版 three 下会被判定为「不在视锥内」而永远不渲染。行为与 three 的 Mesh.intersectsFrustum 一致；Frustum.intersectsObject 在 0.179 与 0.186 中都存在，所以这份实现对两个版本都安全。
参数
- frustum: Frustum
  视锥
返回 boolean
是否与视锥相交

继承自 GeoMesh.intersectsFrustum

removeAttributeRename

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

removeComponent

removeComponent(component: any): void
移除一个 component
参数
- component: any
返回 void

访问器

clampToGround

get clampToGround(): boolean
Only move the anchor; flat, rotation and pixel offsets keep their original semantics.

返回 boolean
继承自 GeoMesh.clampToGround

dataSource

get dataSource(): DataSource
对象连接的 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

参数

可选clampToGround?: boolean

可选enableFade?: boolean

可选flat?: boolean

可选groundTargets?: any[]

可选iconHeight?: number

可选iconWidth?: number

可选mapSrc?: string

可选padding?: any[]

可选pixelOffset?: any[]

可选positionOffset?: number[]

可选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?: boolean

可选vertexIcons?: boolean

返回 Label

属性

只读isGeoObject

只读isMesh

parameters

spriteTexture

textTexture

方法

addAttributeRename

参数

返回 void

addComponent

参数

返回 void

clearAttributeRename

返回 void

clone

返回 any

dispose

返回 void

intersectsFrustum

参数

返回 boolean

removeAttributeRename

参数

返回 void

removeComponent

参数

返回 void

访问器

clampToGround

返回 boolean

dataSource

返回 DataSource

参数

返回 void

needsUpdate

返回 boolean

参数

`可选`clampToGround?: boolean

`可选`enableFade?: boolean

`可选`flat?: boolean

`可选`groundTargets?: any[]

`可选`iconHeight?: number

`可选`iconWidth?: number

`可选`mapSrc?: string

`可选`padding?: any[]

`可选`pixelOffset?: any[]

`可选`positionOffset?: number[]

`可选`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?: boolean

`可选`vertexIcons?: boolean

`只读`isGeoObject

`只读`isMesh