<!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: 420px;
height: 40px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<el-button type="danger" size="small" @click="switchTo2d"
>切換為二維視角效果</el-button
>
<el-button
type="warning"
size="small"
@click="switchToColumbusView"
>切換為哥倫布視角效果</el-button
>
<el-button type="primary" size="small" @click="switchTo3d"
>切換為三維視角效果</el-button
>
</div>
<div id="baseMap"></div>
</div>
<script>
window.viewer = 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,
});
},
//切換為2d
switchTo2d() {
// console.log("2ddd");
if (viewer.scene.mode == 2) return;
let view = {};
//獲取轉換為2d模式前，當前鏡頭的經緯度位置
let p = bmgl.Cartographic.fromCartesian(
viewer.camera.position
);
view.destination = {
lng: bmgl.Math.toDegrees(p.longitude),
lat: bmgl.Math.toDegrees(p.latitude),
height: p.height,
};
view.orientation = {
heading: viewer.camera.heading,
roll: viewer.camera.roll,
pitch: viewer.camera.pitch,
};
//將3d模式切換為2d
// viewer.scene.morphTo2D(0);
viewer.scene.morphTo2D(0, (e) => {
console.log("Finish 2d");
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
view.destination.lng,
view.destination.lat,
view.destination.height
),
orientation: {
heading: 0,
pitch: bmgl.Math.toRadians(-90),
roll: 0,
},
});
});
},
//切換為3d
switchTo3d() {
// console.log("3ddd");
if (viewer.scene.mode == 3) return;
let result = this.getPos();
viewer.scene.morphTo3D(0, (e) => {
viewer.camera.setView({
destination: result.destination,
orientation: result.orientation,
});
});
},
//切換為2.5d哥倫布視角
switchToColumbusView() {
if (viewer.scene.mode == 2.5) return;
let result = this.getPos();
viewer.scene.morphToColumbusView(0, (e) => {
viewer.camera.setView({
destination: result.destination,
orientation: result.orientation,
});
});
},
getPos() {
let params = {};
let ellipsoid = viewer.scene.globe.ellipsoid;
let camera = viewer.scene.camera;
let extend = viewer.camera.computeViewRectangle();
if (typeof extend === "undefined") {
//2D下會可能拾取不到坐標，extend返回undefined,所以做以下轉換
let canvas = viewer.scene.canvas;
let upperLeft = new bmgl.Cartesian2(0, 0); //canvas左上角坐標轉2d坐標
let lowerRight = new bmgl.Cartesian2(
canvas.clientWidth,
canvas.clientHeight
); //canvas右下角坐標轉2d坐標
let ellipsoid = viewer.scene.globe.ellipsoid;
let upperLeft3 = viewer.camera.pickEllipsoid(
upperLeft,
ellipsoid
); //2D轉3D世界坐標
let lowerRight3 = viewer.camera.pickEllipsoid(
lowerRight,
ellipsoid
); //2D轉3D世界坐標
let upperLeftCartographic =
viewer.scene.globe.ellipsoid.cartesianToCartographic(
upperLeft3
); //3D世界坐標轉弧度
let lowerRightCartographic =
viewer.scene.globe.ellipsoid.cartesianToCartographic(
lowerRight3
); //3D世界坐標轉弧度
let minx = bmgl.Math.toDegrees(
upperLeftCartographic.longitude
); //弧度轉經緯度
let maxx = bmgl.Math.toDegrees(
lowerRightCartographic.longitude
); //弧度轉經緯度
let miny = bmgl.Math.toDegrees(
lowerRightCartographic.latitude
); //弧度轉經緯度
let maxy = bmgl.Math.toDegrees(
upperLeftCartographic.latitude
); //弧度轉經緯度
params.minx = minx; // 最小經度
params.maxx = maxx; // 最大經度
params.miny = miny; // 最小緯度
params.maxy = maxy; // 最大緯度
} else {
//3D獲取方式
// 最大經度
params.maxx = bmgl.Math.toDegrees(extend.east); //弧度轉經緯度
// 最大緯度
params.maxy = bmgl.Math.toDegrees(extend.north); //弧度轉經緯度
// 最小經度
params.minx = bmgl.Math.toDegrees(extend.west); //弧度轉經緯度
// 最小緯度
params.miny = bmgl.Math.toDegrees(extend.south); //弧度轉經緯度
}
let height =
camera.frustum.right - camera.frustum.left;
return {
destination: bmgl.Cartesian3.fromDegrees(
(params.minx + params.maxx) / 2,
(params.miny + params.maxy) / 2,
height
),
orientation: {
heading: 0,
pitch: bmgl.Math.toRadians(-90),
roll: 0,
},
};
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>