无人机喷洒效果
关键引入文件：
第一步：引入框架地图关键文件
https://mhc.ixiera.com/mhc/main_min.js
https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
https://mhc.ixiera.com/mhc/Cesium3DTile.js
第二步：引入无人机喷洒效果API文件
https://mhc.ixiera.com/mhc/mchmap/droneSpraying/js/spray.min.js
- 初始化
var droneSpray = new DroneSpray(viewer,options);
实例代码：
var droneSpray = new DroneSpray(viewer); // 实例化
// 方式1：加载轨迹json文件
droneSpray.init(flypath).then(() => {
console.log('初始化加载轨迹json文件成功');
})
// 方式2：加载轨迹数据
droneSpray.init(flypath);
- 参数说明
Viewer：创建的view实例。
options: {object} 配置项(非必填)
flypath{string/Array} - 加载无人机轨迹数据（轨迹json文件路径 或 轨迹数据[obj,obj]）
轨迹数据格式：[{"id": 795,"x": 117.35780792236328,"y": 32.54529571533203,"z": 160,"time": "2025-07-01T07:24"}]
options参数详细说明：
属性名称 | 数据类型 | 默认值 | 说明 | |
droneModelUrl | String | 本地默认文件 | 无人机 3D 模型文件的路径（支持 GLB/GLTF 格式） | |
frustum | aspectRatio | Number | 2.5 | 视棱锥（喷洒覆盖的锥形区域）的宽高比，决定喷洒区域的横向 / 纵向比例，值越大表示喷洒区域越宽。 |
fov | Number | 40.0 | 视棱锥的视场角（单位：度），视场角越大，单次喷洒的覆盖范围越广（锥形越 “宽”），需为有效数值（0-180°）。 | |
near | Number | 1.0 | 视棱锥的近裁剪面距离（单位：米），表示无人机前方多少米开始计算喷洒区域，小于该距离的区域不绘制。 | |
far | Number | 500.0 | 视棱锥的远裁剪面距离（单位：米）。 | |
color | Cesium.Color | Cesium.Color.YELLOW.withAlpha(0.3) | 视棱锥的填充颜色，默认是半透明黄色（透明度 0.3）。 | |
outlineColor | Cesium.Color | Cesium.Color.YELLOW | 视棱锥的轮廓线颜色，默认纯黄色。 | |
sprayAreaColor | Cesium.Color | Cesium.Color.YELLOW.withAlpha(0.3) | 地面喷洒区域）的填充颜色，默认与视棱锥填充色一致（半透明黄色）。 | |
showDroneInfo | Boolean | true | 是否显示无人机实时信息面板。 | |
- startSpray开启喷洒
实例：droneSpray.startSpray();
- stopSpray停止喷洒
实例：droneSpray.stopSpray();
- destroy销毁
实例：droneSpray.destroy();
- show显示
实例：droneSpray.show();
- hide隐藏
实例：droneSpray.hide();
- updateTrajectory动态修改轨迹
实例：
droneSpray.updateTrajectory(newTrajectory).then(() => {
console.log('轨迹已更新，可重新开始喷洒');
});
参数说明：
newTrajectory{Array} - 无人机新轨迹数据;
轨迹数据格式：[{"id": 795,"x": 117.35780792236328,"y": 32.54529571533203,"z": 160,"time": "2025-07-01T07:24"}]
- 监听停止喷洒
实例：
droneSpray.on('stopSpray', (droneInfo) => {
console.log('停止喷洒，无人机信息：', droneInfo);
// 执行自定义操作
});
参数说明：
droneInfo{object} - 无人机信息，详细字段说明如下：
longitude{number}- 无人机最后位置：经度
latitude{number}- 无人机最后位置：纬度
altitude{number}- 无人机最后位置：高度
speed{number}- 无人机最后速度
heading{number}- 无人机最后角度
directiont{string}-无人机最后方向
currentArea{number}- 覆盖面积
- 监听喷洒结束
实例：
droneSpray.on(‘sprayEnd’, (droneInfo) => {
console.log('喷洒结束，无人机信息：', droneInfo)
// 执行自定义操作
});
参数说明：
droneInfo{object} - 无人机信息，详细字段说明如下：
longitude{number}- 无人机最后位置：经度
latitude{number}- 无人机最后位置：纬度
altitude{number}- 无人机最后位置：高度
speed{number}- 无人机最后速度
heading{number}- 无人机最后角度
directiont{string}-无人机最后方向
currentArea{number}- 覆盖面积
- 完整代码实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="mchmap 是一款由 microbee-http 软件开发框架深度集成的专业级地图引擎，专为对数据安全、网络环境受限或需高精度三维地理信息支持的行业应用而设计。">
<meta name="keywords" content="MCHMAP, mchmap, Microbee, 无人机喷洒覆盖率, 地图引擎">
<title>无人机喷洒覆盖率 - MCHMAP</title>
<script src="https://mhc.ixiera.com/mhc/main.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#cesiumContainer {
width: 100vw;
height: 100vh;
}
#cesiumContainer .cesium-widget canvas{
width: 100vw;
height: 100vh;
}
.btnsBox {
position: fixed;
top: 20px;
left: 20px;
width: 70%;
height: 30px;
}
.btnsBox button {
background-color: #fff;
border-radius: 2px;
color: #333;
line-height: 30px;
margin-right: 15px;
font-size: 12px;
padding: 0 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnsBox">
<button onclick="startSpray()">开始喷洒</button>
<button onclick="stopSpray()">停止喷洒</button>
<button onclick="showAll()">显示所有</button>
<button onclick="hideAll()">隐藏所有</button>
<button onclick="updateTrajectory()">修改轨迹</button>
<button onclick="destroySpray()">销毁实例</button>
</div>
<!-- 引入封装后的类 -->
<script src="js/spray.min.js"></script>
<script>
// 测试数据：（轨迹数据）
var flypath = [
{"id": 795,"x": 117.35780792236328,"y": 32.54529571533203,"z": 160,"time": "2025-07-01T07:24:43.000+0000"},
{"id": 796,"x": 117.36781555175781,"y": 32.54496955871582,"z": 159,"time": "2025-07-01T07:24:45.000+0000"},
{"id": 798,"x": 117.37781555175781,"y": 32.54396955871582,"z": 159,"time": "2025-07-01T07:24:47.000+0000"}
];
// 测试数据：（轨迹json文件）
var flypathUrl = './js/flypath.json';
// 创建Cesium视图器
const viewer = new Cesium.Viewer('cesiumContainer', true);
// 实例化
var droneSpray = new DroneSpray(viewer);
// 方式1：加载轨迹json文件
droneSpray.init(flypathUrl).then(() => {
console.log('初始化加载轨迹json文件成功');
}).catch(err => {
console.error('初始化失败:', err);
});
// // 方式2：加载轨迹数据
// droneSpray.init(flypath);
// 监听：停止喷洒事件
droneSpray.on('stopSpray', (droneInfo) => {
console.log('停止喷洒，无人机信息：', droneInfo, droneSpray);
});
// 监听：喷洒结束事件
droneSpray.on('sprayEnd', (droneInfo) => {
console.log('喷洒结束，无人机信息：', droneInfo, droneSpray)
console.log('喷洒结束，总喷洒区域数量：', droneSpray.completedRectangles.length);
console.log('喷洒结束，无人机轨迹数据：', droneSpray.trajectoryData);
});
// 调用API控制喷洒
function startSpray() {
if (droneSpray) droneSpray.startSpray();
}
function stopSpray() {
if (droneSpray) droneSpray.stopSpray();
}
function showAll() {
if (droneSpray) droneSpray.show();
}
function hideAll() {
if (droneSpray) droneSpray.hide();
}
// 动态修改轨迹示例
function updateTrajectory() {
if (!droneSpray) return;
// 新轨迹数据（示例格式）
const newTrajectory = [
{x: 116.404,y: 39.915,z: 88,time: '2026-02-03T00:00:00Z'},
{x: 116.406,y: 39.915,z: 90,time: '2026-02-03T00:00:05Z'},
{x: 116.406,y: 39.917,z: 95,time: '2026-02-03T00:00:10Z'},
{x: 116.404,y: 39.917,z: 100,time: '2026-02-03T00:00:15Z'}
];
droneSpray.updateTrajectory(newTrajectory).then(() => {
alert('轨迹已更新，可重新开始喷洒');
});
}
function destroySpray() {
if (droneSpray) {
droneSpray.destroy();
droneSpray = null;
}
}
</script>
</body>
</html>
- 效果展示
Demo地址：
https://mhc.ixiera.com/mhc/mchmap/droneSpraying/index.html
返回顶部
热线电话
微信
扫一扫