Appearance
上卷下钻
此功能案例实现楼层点位展示，拆解楼层及散点显隐等。
目录
1. 功能点
- 添加地标图 addLandmarkLayer
- 地标图点击事件 pickOverlay、 onLandmarkLayerClick
- 设置相机 setCamera
- 拆解楼层 showBuildingFloor
- 控制图层显隐 setOverlayVisibility
- 删除图层 removeOverlay
- 恢复楼层 resetBuildingFloor
2. 视频演示
3. 核心代码
引入版本：3.0 起支持
第一步
准备图层数据，点击按钮 1，切换视角，添加图层，在成功回调中，开启该图层点击事件
JavaScript
// 添加鼠标点击事件
document.querySelectorAll('.btns div')[0].onclick = function () {
// 展示大楼
setCamera1();
// 添加楼层地标图层
addFloors();
};切换大楼视角
JavaScript
// 展示大楼
function setCamera1() {
window.appInstance.uniCall('setCamera', {
centerCoord: [113.94008542655, 22.52094558212], // 中心点的坐标 lng,lat
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
coordZ: 19.5, // Z 轴高度（单位：米）
distance: 656, // 镜头距中心点距离(单位:米)
heading: 16, // 镜头偏航角(0正北, 0~359)
pitch: 25, // 镜头俯仰角(5~89)
duration: 2, // 飞行时间，秒
fly: true // true: 飞行动画(飞行时间根据当前点与目标点计算,则pitch及heading不生效, 会自行计算);
});
}添加楼层点位
JavaScript
// 楼层点位数据
let points1 = [
{
id: 'floor1', // 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
label: '一楼', // 图标标签文本
coord: [113.93968949408, 22.51875640972], // XY 轴坐标，X：经度；Y：纬度
coordZ: 80, // Z 轴高度（单位：米）
type: 'legendName1' // 地标点的图例类别名称
},
{
id: 'floor2',
label: '二楼',
coord: [113.93968949408, 22.51876640972],
coordZ: 90,
type: 'legendName1'
},
{
id: 'floor3',
label: '三楼',
coord: [113.93968949408, 22.51877640972],
coordZ: 100,
type: 'legendName1'
}
];
// 添加楼层地标图层
function addFloors() {
let jsonData = {
id: 'landmarkLayerId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name: 'layerName', // 图层名称，支持为图层自定义名称
coordType: 0, // XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y米，相对世界00点
coordTypeZ: 0, // Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）
autoScale: false, // 如果开启后，图标会按照摄像机远近自动缩放大小
legends: [ // 定义图层包含图例，支持为不同图例定义各自样式
{
name: 'legendName1', // 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别
color: '#ffffff', // 颜色（HEX 颜色值）
iconName: 'site_03'
}
],
data: points1
};
window.appInstance.uniCall('addLandmarkLayer', jsonData, (res) => {
window.appInstance.uniCall('pickOverlay', {
overlayType: 'landmarkLayer', // 图层对象类别
idLayer: 'landmarkLayerId', // 如果具体想限定图层对象，则填写图层对象 id，如不限制，可不填
type: 'click', // 单选模式，click：点击选中；hover：悬停选中
isShowDecorator: false // 表示是否显示选中的高亮装饰符，true：显示，false：不显示，默认：true
});
});
}第二步
监听楼层点位点击事件，切换楼层视野，隐藏楼层点位，拆解楼层，添加楼层中相关图层
JavaScript
window.appInstance.uniCall('onLandmarkLayerClick', {}, (res) => {
setPointShow(false); //隐藏楼层点位
showFloor(res.idObj.split('r')[1]); //拆解楼层
setCamera2(); //切换楼层视野
addFloorPoints(); //展示楼层中相关图层
});隐藏楼层点位
JavaScript
function setPointShow(flag) {
window.appInstance.uniCall('setOverlayVisibility', {
id: 'landmarkLayerId', // 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
overlayType: 'landmarkLayer', // 图层对象类别，详见下表：图层对象类别
visible: flag // 显隐控制，true：显示；false：隐藏
});
}拆解楼层
JavaScript
// 拆解楼层
function showFloor(floor) {
let jsonData = {
id: 'building01', // 模型对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
floor: floor, // 要拆解的楼层号，1 楼为 1，地下一楼为 -1，依此类推
animation: 1 // 楼层拆解动画类型，1：默认动画类型
};
appInstance.uniCall('showBuildingFloor', jsonData, (result) => {
console.log('showBuildingFloor', result);
});
}聚焦楼层
JavaScript
function setCamera2() {
window.appInstance.uniCall('setCamera', {
centerCoord: [113.93969626514, 22.51876787552],
coordType: 0,
coordTypeZ: 0,
coordZ: 19.5,
distance: 300,
heading: 16,
pitch: 89,
duration: 2,
fly: true
});
}添加楼层中相关图层
JavaScript
function addFloorPoints() {
let jsonData = {
id: 'floorPoints',
name: 'layerName',
coordType: 0,
coordTypeZ: 0,
autoScale: false,
legends: [
{
name: 'legend',
color: '#ff0000',
iconName: 'wifi'
},
],
data: points2
};
window.appInstance.uniCall('addLandmarkLayer', jsonData, (res) => {
console.log('addLandmarkLayer', res);
});
}第三步
点击返回按钮，恢复楼层，删除楼层内部点位，显示楼层点位
JavaScript
document.querySelectorAll('.btns div')[1].onclick = function () {
setCamera1();
resetBuilding();
setPointShow(true);
removeLayer();
};恢复建筑
JavaScript
function resetBuilding() {
let jsonData = {
id: 'building01', // 模型对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
animation: 1 // 楼层拆解动画类型，1：默认动画类型
};
appInstance.uniCall('resetBuildingFloor', jsonData, (result) => {
console.log('resetBuildingFloor', result);
});
}删除楼层内部点位
JavaScript
function removeLayer(flag) {
window.appInstance.uniCall('removeOverlay', {
id: 'floorPoints',
overlayType: 'landmarkLayer'
});
}