<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<!-- elementui -->
<script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
<link rel="stylesheet" href="http://bigemap.com/offline_data/newjunbiao/elementui.css" />
<!-- 引入第三方的dat.gui.min.js -->
<script src="/offline_data/dat.gui.min.js"></script>
<title>模型調(diào)整樣式</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
z-index: 9;
top: 40px;
right: 60px;
width: 200px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
let viewer = null;
let controlObj = {
lng: 104,
lat: 30,
height: 1000,
heading: 0,
pitch: 0,
roll: 0,
scale: 30,
};
let model = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
//初始化地圖
initMap() {
bmgl.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
viewer = new bmgl.Viewer("baseMap", {
mapId: "bigemap.dc-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
//添加一個模型
let modelPos = bmgl.Cartesian3.fromDegrees(
controlObj.lng,
controlObj.lat,
controlObj.height
);
let modelHpr = new bmgl.HeadingPitchRoll(
controlObj.heading,
controlObj.pitch,
controlObj.roll
);
model = viewer.entities.add({
position: modelPos,
orientation:
bmgl.Transforms.headingPitchRollQuaternion(
modelPos,
modelHpr
),
model: {
uri: "/offline_data/bmgl_Air.glb",
scale: controlObj.scale,
},
});
viewer.zoomTo(model);
this.load3dPancel();
},
//初始化三維編輯的控制面板
load3dPancel() {
var _this = this;
let gui = new dat.GUI();
gui.domElement.style =
"position:absolute;top:10px;left:10px;";
gui.add(controlObj, "lng", -180, 180)
.name("經(jīng)度")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "lat", -90, 90)
.name("緯度")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "height", 100, 10000)
.name("高度")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "heading", 0, 360)
.name("偏航角水平方向")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "pitch", 0, 360)
.name("俯仰角上下方向")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "roll", 0, 360)
.name("翻滾角側(cè)向方向")
.onChange(function (value) {
_this.changePosition();
});
gui.add(controlObj, "scale", 1, 60)
.name("模型大小縮放")
.onChange(function (value) {
_this.changePosition();
});
},
changePosition() {
let position = bmgl.Cartesian3.fromDegrees(
controlObj.lng,
controlObj.lat,
controlObj.height
);
let heading = bmgl.Math.toRadians(
controlObj.heading
);
let pitch = bmgl.Math.toRadians(controlObj.pitch);
let roll = bmgl.Math.toRadians(controlObj.roll);
let hpr = new bmgl.HeadingPitchRoll(
heading,
pitch,
roll
);
let orientation =
bmgl.Transforms.headingPitchRollQuaternion(
position,
hpr
);
model.position = position;
model.orientation = orientation;
model.model.scale = controlObj.scale;
viewer.flyTo(viewer.entities);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>