<!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;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div id="baseMap"></div>
</div>
<script>
let 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-tian-w-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
// terrainId指定離線服務器上發布的高程服務的id
terrainId: "bigemap.dc-terrain",
});
this.loadpolygons();
},
//加載面
loadpolygons() {
// 多邊形默認會貼地 和 3dtiles
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray([
102.6857758, 31.12937485,
102.6061249, 31.08410576,
102.6548767, 31.02469413,
102.7468872, 31.03351998,
102.7695465, 31.10762486,
102.7153015, 31.09939384,
])
),
material: bmgl.Color.BLUE.withAlpha(0.4),
},
});
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray([
102.6857758, 31.12937485,
102.6061249, 31.08410576,
102.6548767, 31.02469413,
102.7468872, 31.03351998,
102.7695465, 31.10762486,
102.7153015, 31.09939384,
])
),
//設置多邊形離地高度
height: 5000,
material: bmgl.Color.RED.withAlpha(0.4),
},
});
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray([
102.927475, 31.22513296,
102.9103088, 31.16580959,
102.9975128, 31.13055038,
103.0970764, 31.18460914,
103.0414581, 31.25213919,
])
),
//設置多邊形離地高度
height: 6000,
// 設置擠壓高度 ，當extrudedHeight小于height，多邊形的擠壓的高度的值為height減去extrudedHeight
extrudedHeight: 5900,
material:
bmgl.Color.fromCssColorString(
"#9cc53d"
),
},
});
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray([
102.6541901, 31.26974779,
102.6191711, 31.19459488,
102.7262878, 31.18167195,
102.7578735, 31.24098538,
102.7125549, 31.26622633,
])
),
//設置多邊形離地高度
height: 6000,
//設置擠壓高度,當extrudedHeight大于height，多邊形的擠壓的高度的值為extrudedHeight減去height
extrudedHeight: 6400,
material:
bmgl.Color.fromCssColorString(
"#59acff"
),
},
});
viewer.entities.add({
polygon: {
hierarchy: new bmgl.PolygonHierarchy(
bmgl.Cartesian3.fromDegreesArray([
102.7825928, 31.34718658,
102.8437042, 31.29146054,
102.9247284, 31.33135201,
102.8512573, 31.3682952,
102.8196716, 31.39291593,
102.7695465, 31.36888148,
])
),
//設置多邊形離地高度
height: 6000,
//設置擠壓高度,當extrudedHeight等于height，多邊形為平面
extrudedHeight: 6000,
material: bmgl.Color.ORANGE.withAlpha(0.6),
},
});
viewer.flyTo(viewer.entities);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>