<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>探測效果</title>
<link rel='stylesheet' />
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<canvas id="canvas-a" width="400px" height="400px"></canvas>
<canvas id="canvas-b" width="400px" height="400px"></canvas>
<canvas id="canvas-c" width="400px" height="400px"></canvas>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.dc-satellite' });
viewer.scene.debugShowFramesPerSecond = true;
//必須開啟 不然模型會移位
viewer.scene.globe.depthTestAgainstTerrain = true;
//通過3個畫布交替切換實現探測紋理動態
var changenum = 0;
var curCanvas = 'a';
function readyCanvas(convasid, radius) {
var canvas = document.getElementById(convasid);
let cwidth = 400;
let cheight = 400;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, cwidth, cheight);
ctx.fillStyle = 'rgba(255, 255, 255, 0)';
ctx.fillRect(0, 0, cwidth, cheight);
for (let ii = 0; radius <= 200; ii++) {
ctx.lineWidth = 5;
//開始一個新的繪制路徑
ctx.beginPath();
//設置弧線的顏色
var trans = 1.0 - (radius / 255);
ctx.strokeStyle = "rgba(255, 0, 255, " + trans + ")";
var circle = {
x: 200, //圓心的x軸坐標值
y: 200, //圓心的y軸坐標值
r: radius //圓的半徑
};
//以canvas中的坐標點(200,200)為圓心，繪制一個半徑為50px的圓形
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
//按照指定的路徑繪制弧線
ctx.stroke();
radius += 20;
}
}
readyCanvas("canvas-a", 5);
readyCanvas("canvas-b", 10);
readyCanvas("canvas-c", 15);
//繪制canvas圖片
function drawCanvasImage(time, result) {
changenum++;
var canvas = document.getElementById("canvas-" + curCanvas);
if (changenum >= 20) {
changenum = 0;
if (curCanvas === 'a')
curCanvas = 'b';
else if (curCanvas === 'b')
curCanvas = 'c';
else
curCanvas = 'a';
}
return canvas;
}
//初始位置
var lon = -118.760842;
var lat = 38.132073;
let cyheight = 1200;
var planePosition = bmgl.Cartesian3.fromDegrees(lon, lat, cyheight)
//改變圓錐體位置，循環畫矩形
function changePosition() {
if (lon > -118.755842 && lat < 38.138073) {
lat += 0.00001;
} else if (lat > 38.138073 && lon > -118.760842) {
lon -= 0.00001;
} else if (lon <= -118.760842 && lat > 38.132074) {
lat -= 0.00001
} else {
lon += 0.00001;
}
planePosition = bmgl.Cartesian3.fromDegrees(lon, lat, cyheight)
return planePosition
}
//根據圓錐中心點位置動態計算朝向、圓錐體長度
var geoD = new bmgl.EllipsoidGeodesic();
//頂點經緯度
var startPt = bmgl.Cartographic.fromDegrees(-118.760842, 38.132073, 0);
function changeOrientation() {
//計算經度方向的夾角
var endX = bmgl.Cartographic.fromDegrees(lon, 38.132073, 0);
geoD.setEndPoints(startPt, endX);
var innerS = geoD.surfaceDistance;
var angleX = Math.atan(innerS / halfLen);
//計算圓錐體長度
var end = bmgl.Cartographic.fromDegrees(lon, lat, 0);
geoD.setEndPoints(startPt, end);
innerS = geoD.surfaceDistance;
length = Math.sqrt(innerS * innerS + halfLen * halfLen);
//計算緯度方向的夾角
var endY = bmgl.Cartographic.fromDegrees(-118.760842, lat, 0);
geoD.setEndPoints(startPt, endY);
innerS = geoD.surfaceDistance;
var angleY = Math.asin(innerS / length);
//計算朝向
var hpr = new bmgl.HeadingPitchRoll(0.0, angleX, angleY);
var orientation = bmgl.Transforms.headingPitchRollQuaternion(planePosition, hpr);
return orientation
}
var halfLen = 1000.0
var length = 1000.0;
function changeLength() {
return 2 * length;
}
//創建圓錐實體
var cylinder = viewer.entities.add({
name: 'Red cone',
position: new bmgl.CallbackProperty(changePosition, false),
orientation: new bmgl.CallbackProperty(changeOrientation, false),
cylinder: {
length: new bmgl.CallbackProperty(changeLength, false),
topRadius: 0.0,
bottomRadius: 300.0,
//topSurface: false, //新增參數，控制頂部是否渲染
bottomSurface: false, //新增參數，控制底部是否渲染
material: new bmgl.ImageMaterialProperty({
image: new bmgl.CallbackProperty(drawCanvasImage, false),
transparent: true
})
}
});
//定位到圓錐體
var initialPosition = bmgl.Cartesian3.fromDegrees(-118.760842, 38.089073, 8000); //相機視角三要素：朝向（左右偏移），傾斜（上下偏移），翻滾角度（相機視錐體中軸線旋轉角度）
var initialOrientation = new bmgl.HeadingPitchRoll.fromDegrees(1.27879878293835, -51.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
destination: initialPosition,
orientation: initialOrientation,
endTransform: bmgl.Matrix4.IDENTITY
});
</script>
</html>