<!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>
<script src="./bmgl-plot.min.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>
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,
});
if (
bmgl.FeatureDetection.supportsImageRenderingPixelated()
) {
viewer.resolutionScale =
window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
// 綠色走廊
viewer.entities.add({
corridor: {
positions: bmgl.Cartesian3.fromDegreesArray(
[
104.0578222, 30.67863126,
104.0579295, 30.66936665,
104.0698171, 30.6695143,
104.0717053, 30.6721166,
104.0735722, 30.67490338,
104.0747523, 30.67601068,
]
),
material: bmgl.Color.GREEN.withAlpha(0.4),
width: 200.0,
height: 0,
extrudedHeight: 40.0,
cornerType: bmgl.CornerType.MITERED,
outline: true, // height or extrudedHeight must be set for outlines to display
outlineColor: bmgl.Color.WHITE,
},
});
//圓角走廊
viewer.entities.add({
// 默認為圓角
corridor: {
positions: bmgl.Cartesian3.fromDegreesArray(
[
104.0509987, 30.68269117,
104.0540886, 30.68106723,
104.0550327, 30.67970162,
104.0518999, 30.67756089,
104.0492821, 30.67379606,
104.0497541, 30.6704002,
104.0491962, 30.6677794,
]
),
material:
bmgl.Color.fromCssColorString(
"#f981be"
),
width: 100.0,
},
});
//直角走廊
viewer.entities.add({
corridor: {
positions: bmgl.Cartesian3.fromDegreesArray(
[
104.0582514, 30.65663098,
104.058423, 30.65744316,
104.0582728, 30.66061798,
104.0688086, 30.66072873,
104.0747953, 30.66093176,
104.0791297, 30.65890137,
]
),
material:
bmgl.Color.fromCssColorString(
"#fb6600"
),
width: 100.0,
cornerType: bmgl.CornerType.MITERED,
},
});
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
104.0698171,
30.6695143,
10000
),
});
},
//畫管道體 參數為半徑
computeCircle(radius) {
var positions = [];
for (var i = 0; i < 360; i++) {
var radians = bmgl.Math.toRadians(i);
positions.push(
new bmgl.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
);
}
return positions;
},
},
beforeDestroy() {
viewer.destroy();
viewer = null;
},
});
};
</script>
</body>
</html>