关于javascript:简单四步学会在数字孪生可视化场景中创建小地图

家喻户晓，小地图 在游戏中是至关重要的，小地图用于显示周围环境信息。在数字孪生可视化场景中小地图也是常常利用于场景中的，用来显示地图或者以后场景的视角。首先，小地图是以配角为核心的。其次，小地图上应该用图标来代替实在的人物或者物体模型，因为小地图通常很小，可能无奈看清实在的模型。
创立小地图的办法网上有很多种，这里我应用 ThingJS 来实现 数字孪生可视化 场景的小地图的性能，能够用来显示地图或者以后数字孪生可视化场景的视角，不便而且不须要应用额定的插件。ThingJS 中应用零碎内置的控件集成一些性能利用的开发，也可自定义开发控件来对一些功能模块进行封装。

大多数小地图都是方形的，所以本文也将在数字孪生可视化场景中创立方形小地图。原理很简略就是在数字孪生可视化场景中创立两个相机，而后把相机 1 的地位传给相机 2。通常小地图四周还会依据需要增加一些按钮和标签。

第一步加载数字孪生可视化场景；第二步设置好两个摄像机地位、间隔、角度等; 第三步增加小地图控件；第四步依据须要增加按钮。
具体代码如下：

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'});
var control;
app.on('load', function () {app.camera.distanceLimited = [0, 50];// 设置摄像机间隔范畴[最小值, 最大值]
 app.camera.xAngleLimitRange = [10, 80];// 限度摄像机俯仰角[最小值，最大值]
 // 设置摄像机地位和指标点
 app.camera.position = [-21.874885906496672, 25.144446501358352, 32.15174699792633];
 app.camera.target = [1.074795849331875, 0.9467607412215804, 2.8844752703106087];
 
 new THING.widget.Button('增加控件', add_control);
 new THING.widget.Button('重置', remove_control);
});
 
/**
 * 增加控件
 */
function add_control() {if (control) return;
 control = new THING.MiniMapControl({
 width: 200,
 height: 200,
 position: THING.CornerType.RightBottom,
 opacity: 0.8,
 cameraViewImg: 'https://www.thingjs.com/static/images/minimap1.png',
 cameraCenterImg: 'https://www.thingjs.com/static/images/minimap0.png',
 // hasClose: true, // 是否有敞开按钮（默认没有）当点击敞开按钮时，小地图 enable 为 false
 // closeBtnImg: 'https://www.thingjs.com/static/images/minimap2.png'
 })
 // 增加小地图控件
 app.addControl(control);
}
 
/**
 * 删除控件
 */
function remove_control() {if (control) {app.removeControl(control);
 control = null;
 
 // control.minimap.enable = !control.minimap.enable; // 显示、暗藏小地图
 }
}

—————————————————
数字孪生可视化：https://www.thingjs.com/