<!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: 660px;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
padding-top: 4px;
justify-content: center;
border-radius: 4px;
/* align-items: center; */
}
.box {
width: 360px;
margin: 0 20px;
height: 600px;
border: 1px solid white;
margin-top: 6px;
overflow-y: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 4px;
/* justify-content: center; */
}
.box .item {
width: 320px;
height: 160px;
display: flex;
justify-content: center;
margin-left: 15px;
margin-bottom: 4px;
border-radius: 2px;
border: 2px solid white;
padding: 2px;
position: relative;
}
.item .de {
position: absolute;
top: 4px;
right: 6px;
background: url("/offline_data/delete.png") no-repeat;
background-size: 100% 100%;
width: 16px;
height: 16px;
cursor: pointer;
z-index: 9999;
}
.item .name {
position: absolute;
color: white;
font-family: "楷體";
bottom: 2px;
left: 2px;
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<div class="top" style="display: flex; justify-content: center">
<el-button
type="primary"
size="small"
style="width: 200px; margin-left: 10px; height: 30px"
@click="setbookMark"
>點擊將當前位置作為視角書簽記錄</el-button
>
</div>
<div class="box">
<div
class="item"
v-for="(item,index) in sjsq"
:key="item.img"
@click="setCameraView(index)"
>
<img
:src="item.img"
style="width: 98%; height: 98%"
title="點擊可以跳轉到對應位置"
/>
<h5 class="name">{{item.name}}</h5>
<h5 class="de" @click="deleteItem(index)"></h5>
</div>
</div>
</div>
<div id="baseMap"></div>
</div>
<script>
window.viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
sjsq: [],
};
},
mounted() {
this.$nextTick(()=>{
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,
});
viewer.camera.setView({
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,
},
});
},
setCameraView(index) {
let data = this.sjsq[index];
if (data == undefined) return;
viewer.camera.flyTo(data.posOptions);
},
setbookMark() {
// 渲染當前場景，將其轉換為圖片
viewer.scene.render();
let dataUrl =
viewer.scene.canvas.toDataURL("image/png");
let url = dataUrl;
let lth = this.sjsq.length;
this.sjsq.push({
img: url,
name: `視角書簽${lth + 1}號`,
posOptions: this.getNowPos(),
});
},
//獲取當前的鏡頭位置
getNowPos() {
let view = {};
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,
};
console.log(view);
return {
destination: bmgl.Cartesian3.fromDegrees(
view.destination.lng,
view.destination.lat,
view.destination.height
),
orientation: view.orientation,
duration: 5.0,
};
},
deleteItem(index) {
this.sjsq.splice(index, 1);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
this.sjsq = [];
},
});
};
</script>
</body>
</html>