<!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-satellite",
infoBox: false,
selectionIndicator: false,
requestRenderMode: false,
// terrainId指定離線服務器上發布的高程服務的id
terrainId: "bigemap.dc-terrain",
});
this.loadLines();
},
// 加載線
loadLines() {
viewer.entities.add({
polyline: {
//組成線的經緯度數組
positions: bmgl.Cartesian3.fromDegreesArray(
[
102.5793457, 31.11997006,
102.6068115, 31.08822202,
102.6198578, 31.01998667,
102.6926422, 31.05528693,
102.7338409, 31.09939384,
]
),
width: 4.0,
material: bmgl.Color.AQUA,
// 設置線貼地
clampToGround: true,
terrainId: "bigemap.dc-terrain",
},
});
//添加一個浮空線段
viewer.entities.add({
polyline: {
positions:
bmgl.Cartesian3.fromDegreesArrayHeights(
[
102.7194214, 31.33076549, 6000,
102.7475739, 31.15582081, 6000,
102.9638672, 31.17755974, 6000,
102.8821564, 31.23041739, 6000,
103.0476379, 31.28441911, 6000,
103.1066895, 31.11291586, 6000,
]
),
width: 4.0,
material: new bmgl.Color(0.3, 0.8, 0.6),
clampToGround: false,
},
});
viewer.flyTo(viewer.entities);
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>