控件

大约 3 分钟

控件

UI控件

Popup是一个HTML内容提示控件，常用于点击提示或内容呈现。

// 点击对象，并提示对象的名称
var popup = null;
viewer.on("click", (e) => {
    const {object, position} = e;
    if(popup) {
        popup.remove();
    }
    if(position && object) {
        const content = object.name;
        popup = new VT.Popup({
            position: position,
            html: content,
        }).addTo(viewer).show();
    }
})

指北针控件

指北针控件 CompassControl 是一个UI用于方向显示的控件，添加后默认位置在左下角，此控件可跟随相机角度变化。

// 初始化控件
const compassControl = new VT.CompassControl({
    // 起始角度
    startDegree: 30,
});

// 添加控件
viewer.addControl(compassControl);

漫游控件

漫游控件 RomaControl 实现第一人称自由漫游、线路漫游、路线巡检模式。

创建漫游控件方式：

const option = {
    // 相机X轴偏移
    offsetX: 0,
    // 相机Y轴偏移
    offsetY: 1.7,
    // 相机Z轴偏移
    offsetZ: 0,

    // 线路漫游配置参数
    // 速度，公里/第小时
    speed: 40, 
    // 是否显示路径
    showPath: false,
    // 线路点位
    points: [],

    // 模型
    model: null,

    // 第一人称漫游参数
    // 移动单位 0.25米
    moveStep: 0.25,

    // 巡检漫游配置参数，线路漫游配置需生效
    inspectionMode: false,
    // 相等距离条件判断，在离目标点位相隔此距离时暂停
    equalDistance: 1.0,
    // 暂停时间
    inspectionPauseTime: 2000, // 巡检停止时间，毫秒

    // 线路漫游模式下的音频播放
    audio: "",
    // 是否自动播放音频
    playAudio: true,
}

const romaControl = new VT.RomaControl(viewer, option);

自由漫游模式

自由漫游式模拟了人正常行走的状态，在三维场景中选取一个位置后，相机将根据键盘的控制进行移动。

// 创建漫游
const romaControl = new VT.RomaControl(viewer);

// 调用pickStartPoint方法，在场景中选取点位后开始自由漫游
romaControl.pickStartPoint();

线路漫游模式

给定一组线路坐标，相机沿线路移动。

// 给定一组点位
const points = [[0, 0, 0], [1, 0, 0], [3, 0, 2], ...];

// 创建漫游控件
const romaControl = new VT.RomaControl(viewer, {
    points: points,
});

// 开始播放
romaControl.play();

线路巡检模式

巡检模式是在线路漫游基础上增加暂停事件，常用于巡检功能。

// 给定一组点位坐标
const points = [[0, 0, 0], [1, 0, 0], [3, 0, 2], ...];

// 创建一个漫游控件
const romaControl = new VT.RomaControl(viewer, {
    points: points,
    inspectionMode: true,
    inspectionPauseTime: 5000, // 暂时5秒
});

// 监听巡检暂停事件
romaControl.addEventListener("inspection.pause", ({index, point}) => {
    // index 第几个点位
    // point 点位位置
    // 巡检暂停，业务逻辑开始代码片断位置
});

// 调用开始播放
romaControl.play();

退出漫游

// 停止漫游
romaControl.stop();

// 退出第一人称
viewer.setFirstPersonMode(false);

测量控件

测量控件提供连续距离测量、连续距离测量（不分段）、两点距离测量、三角测量、直角测量、高度测量、角度测量、面积测量共8种模式。

测量类型	模式与说明
MultipleDistanceMeasure	mode:segment，连续测距(分段)
MultipleDistanceMeasure	mode:total，连续测距(不分段)
SimpleDistanceMeasure	两点测距
RectilinearDistanceMeasure	两点直角测距
DistanceMeasure	标准距离测距
AreaMeasure	面积测量
HeightMeasure	高度测量
AngleMeasure	角度测量

Viewer对象初始化后自动创建了MeasureControl，使用方式如下：

viewer.measureControl.activate(type, {mode: mode});

// 连续测距(不分段)
viewer.measureControl.activate("MultipleDistanceMeasure", {mode: "total"});

// 标准距离测距
viewer.measureControl.activate("DistanceMeasure");

小地图控件

小地图控件 MiniMapControl 是一个UI控件，可在三维场景中显示一个小地图，并跟随相机移动。

// 添加小地图控件
const minimapControl = new VT.MinimapControl({
    width: 256,
    backgroundColor: "rgba(0,0,0,.5)",
});
viewer.addControl(minimapControl, "bottom-left");

// 移除小地图控件
viewer.removeControl(minimapControl);