LabelVisualizer

简介

LabelVisualizer 是 CesiumJS 中的一个 2D/3D 标记可视化工具，用于在地球表面显示文本标签。通过 LabelVisualizer 可以实现在地球表面显示文字、数字等标注信息，方便用户对地球数据进行有效的理解和分析。

功能

• 在地球表面显示文字、数字等标注信息。
• 可以通过设置字体、字号、颜色等属性调整标注显示效果。
• 支持对标注进行位置、大小、旋转等调整，灵活多样。
• 支持对鼠标事件进行监听，实现交互式标注显示。

使用方法

创建 LabelVisualizer 对象：

var viewer = new Cesium.Viewer('cesiumContainer');     //创建Viewer
var entities = viewer.entities;                        //获取Entities对象
var labelVisualizer = new Cesium.LabelVisualizer(entities);     //创建LabelVisualizer

在 entities 中添加标注实体：

var entity = entities.add({
    name : '标注名称',
    position : Cesium.Cartesian3.fromDegrees(117.16, 39.13, 0),
    label : {
        text : '标注内容',
        font : '15px sans-serif',
        style : Cesium.LabelStyle.FILL_AND_OUTLINE,     //标注样式
        fillColor : Cesium.Color.YELLOW,         //填充颜色
        outlineColor : Cesium.Color.BLACK,      //轮廓颜色
        outlineWidth : 2,                       //轮廓宽度
        verticalOrigin : Cesium.VerticalOrigin.TOP     //位置对齐方式
    },
});

设置标注属性：

entity.label.text = '新的标注内容';
entity.label.font = '20px 微软雅黑';
...                                //其他属性设置

删除标注：

entities.remove(entity);      //从 entities 中移除该标注实体

API

• LabelVisualizer(entities): 创建 LabelVisualizer 对象，entities 是 Cesium.EntityCollection 对象。

• Entity.label: 标注实体的标注属性，包括以下属性：

  • text : 标注内容。
  • font : 字体样式。
  • style : 文本样式，默认值为 Cesium.LabelStyle.FILL。
  • fillColor : 文本填充颜色。
  • outlineColor : 文本轮廓颜色。
  • outlineWidth : 文本轮廓宽度。
  • verticalOrigin : 垂直方向位置对齐方式。

• LabelVisualizer.update(time): 更新标注的位置、大小、旋转等属性。

• LabelVisualizer.render(labels): 将标注渲染到地球表面。

• LabelVisualizer.pick(mousePosition, scene, camera): 检测鼠标选中的标注。

示例

var viewer = new Cesium.Viewer('cesiumContainer');
var entities = viewer.entities;
var labelVisualizer = new Cesium.LabelVisualizer(entities);
 
var entity = entities.add({
    name : '标注名称',
    position : Cesium.Cartesian3.fromDegrees(117.16, 39.13, 0),
    label : {
        text : '北京',
        font : '15px sans-serif',
        style : Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor : Cesium.Color.YELLOW,
        outlineColor : Cesium.Color.BLACK,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.TOP
    },
});

viewer.zoomTo(entities);   //缩放视角

function update(){
    labelVisualizer.update(Cesium.JulianDate.now());   //更新标注属性
}

var labels = new Set();
labels.add(entity.label);   //将标注添加到标注集对象中

function render(){
    labelVisualizer.render(labels);   //渲染标注
}

function pick(movement){
    var pickedObject = viewer.scene.pick(movement.position);    //获取鼠标选中的对象
    if(pickedObject && pickedObject.id && pickedObject.id.label){
        console.log('选中了标注：' + pickedObject.id.label.text);   //输出选中的标注实体的标注内容
    }
}

viewer.clock.onTick.addEventListener(update);   //在指定的时间上更新标注属性
viewer.scene.postRender.addEventListener(render);   //渲染场景结束时渲染标注
viewer.canvas.addEventListener('click', pick, false);   //监听鼠标点击事件

总结

通过 LabelVisualizer 工具，我们可以方便地在地球表面展示文字、数字等标注信息。LabelVisualizer 工具支持对标注的位置、大小、旋转等调整，可以根据应用场景进行自定义设置。在实现标注可视化的过程中，我们还可以通过监听鼠标事件，实现交互式标注显示，提升用户体验，实现更广泛的应用场景。