<!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" />
<title>鏡頭飛行</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: 400px;
height: 40px;
display: flex;
align-items: center;
justify-content: right;
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<el-button type="success" size="small" @click="flyToChengdu"
>點擊從洛杉磯飛往成都</el-button
>
<el-button type="primary" size="small" @click="flyToRect"
>飛向指定矩形區域</el-button
>
</div>
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
let baseRect = 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-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
});
},
//從洛杉磯飛往成都
flyToChengdu() {
let camera = viewer.scene.camera;
//在成都位置鏡頭的相關設置
let chengduOptions = {
destination: bmgl.Cartesian3.fromDegrees(
104.05,
30.5,
20000.0
),
orientation: {
heading: bmgl.Math.toRadians(15.0),
pitch: bmgl.Math.toRadians(-60),
roll: 0.0,
},
duration: 10,
};
//洛杉磯相關的鏡頭設置
let laOptions = {
destination: bmgl.Cartesian3.fromDegrees(
-117.729,
34.457,
10000.0
),
duration: 5,
orientation: {
heading: bmgl.Math.toRadians(-15.0),
pitch: -bmgl.Math.PI_OVER_FOUR,
roll: 0.0,
},
};
laOptions.complete = function () {
setTimeout(function () {
camera.flyTo(chengduOptions);
}, 1000);
};
camera.flyTo(laOptions);
},
//飛向指定矩形區域
flyToRect() {
let west = -90.0;
let south = 38.0;
let east = -87.0;
let north = 40.0;
//矩形
let rectangle = bmgl.Rectangle.fromDegrees(
west,
south,
east,
north
);
viewer.camera.flyTo({
destination: rectangle,
});
if(baseRect!=null){
viewer.entities.remove(baseRect);
baseRect = null;
}
// 展示現在這個矩形范圍
baseRect = viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: bmgl.Color.BLUE,
},
});
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>