<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<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>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-satellite",
requestRenderMode: false,
timeline:true,
//動畫控制控件
animation: true,
shouldAnimatiom:true,
infoBox:false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(104, 30, 0),
ellipsoid: {
radii: new bmgl.Cartesian3(1000.0, 1000.0, 1000.0),
maximumCone: bmgl.Math.toRadians(90),
material: new bmgl.Color.fromCssColorString(
"#16950f"
).withAlpha(0.6),
outline: true,
outlineColor: new bmgl.Color.fromCssColorString(
"#2aec26"
),
outlineWidth: 1,
slicePartitions: 70,
stackPartitions: 20,
minimumCone: bmgl.Math.toRadians(41.0),
maximumCone: bmgl.Math.PI_OVER_TWO,
// fill: true,
// vertexFormat: bmgl.VertexFormat.POSITION_ONLY,
// distanceDisplayCondition:new bmgl.DistanceDisplayCondition(0.0, 10.5e6),
},
model: {
// /bmgl/glb/satellite.glb
uri: "/bmgl/glb/t90d.gltf",
scale: 40,
},
});
// 添加的圓錐
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(104, 30,420),
cylinder: {
length: 680.0,
topRadius:654.0,
bottomRadius: 0.0,
material: new bmgl.Color.fromCssColorString("#07fb07").withAlpha(0.9),
// outline: true,
// outlineColor: new bmgl.Color.fromCssColorString("#2aec26"),
// slices:10
},
});
let num = 0;
let maxAngle = 360;
let position = bmgl.Cartesian3.fromDegrees(104, 30,60);
let preAct = null;
viewer.entities.add({
position: position, //bmgl.Cartesian3
orientation: new bmgl.CallbackProperty(() => {
num += 4;
if (num >= maxAngle) num = 0;
return bmgl.Transforms.headingPitchRollQuaternion(
position,
// 設置這個數值越大,掃描區域越往上
// new bmgl.HeadingPitchRoll((num * Math.PI) / 180,0,0)
// new bmgl.HeadingPitchRoll((num * Math.PI) / 180,180,180)
// new bmgl.HeadingPitchRoll((num * Math.PI) / 180,120,120)
// pitch為正順時針旋轉，為負逆時針旋轉
new bmgl.HeadingPitchRoll((num * Math.PI) / 180,-0,0)
);
}, false),
ellipsoid: {
radii: new bmgl.Cartesian3(1000.0,1000.0,1000.0), // 扇形半徑
innerRadii: new bmgl.Cartesian3(1.0,1.0,1.0),
// 控制橫向的扇形寬度
minimumClock: bmgl.Math.toRadians(90.0),
maximumClock: bmgl.Math.toRadians(95.0),
// 控制橫向的扇形寬度
minimumCone: bmgl.Math.toRadians(80.0),
maximumCone: bmgl.Math.toRadians(85.0),
material: bmgl.Color.ORANGE.withAlpha(0.5),
outline: true,
outlineColor: bmgl.Color.ORANGE.withAlpha(0.8),
// heightReference: bmgl.HeightReference.CLAMP_TO_GROUND, //RELATIVE_TO_GROUND CLAMP_TO_GROUND
},
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>