<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>探测效果</title>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
<script src='http://bigemap.com:9000/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://www.bigemap.com:9000';
var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu' });
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>
源码