<!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: 200px;
height: 40px;
display: flex;
justify-content: right;
/* align-items: center; */
}
</style>
</head>
<body>
<div id="app">
<div class="tools">
<el-button type="success" size="small" @click="changeTerrain"
>{{showText}}</el-button
>
</div>
<div id="baseMap"></div>
</div>
<script>
let viewer = null;
window.onload = () => {
new Vue({
el: "#app",
data() {
return {
isShowTerrain: true,
showText:"取消地形效果"
};
},
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,
// terrainId指定離線服務器上發布的高程服務的id
terrainId:"bigemap.dc-terrain"
});
viewer.camera.setView({
destination: new bmgl.Cartesian3(
-1233524.2528105492,
5342784.449529671,
3266300.735257586
),
orientation: {
heading: 5.737109377827798,
roll: 6.281571490802099,
pitch: -0.3089655832119651,
},
});
},
changeTerrain() {
if (this.isShowTerrain) {
let terrainProvider =
new bmgl.EllipsoidTerrainProvider();
viewer.terrainProvider = terrainProvider;
this.isShowTerrain = false;
this.showText = "加載地形效果"
} else {
let terrainBM = new bmgl.BMTerrainProvider({
terrainId:"bigemap.dc-terrain"
});
viewer.terrainProvider = terrainBM;
this.isShowTerrain = true;
this.showText = "取消地形效果";
}
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>