加载-影像图(单个图像)
1.构造方法：
var manager = new MchCesium.SingleImageryTileLayer(viewer);
2.参数说明：
viewer：Cesium创建的view实例。
3.addLayer创建图层实例
var layer = manager.addLayer(id,option)
参数说明：
id {string}实例唯一标识
option{object}配置项：
* imageurl {string}影像图（必填）
* bounds:southwest, northeast 矩形坐标（必填）
* needTrans{Boolean}是否需要gcj02 to wgs84, true需要 / false 不需要
4.setVisible控制显示/隐藏
方式一：layer.setVisible(visible)
方式二：manager.getLayer(id).show = visible
方式三：layer.show();layer.hide();
参数说明：
id {string}实例唯一标识；
visible{Boolean}显示状态:true显示，false隐藏
5.remove 移除
方式一：layer.remove()
方式二：manager.removeLayer(id)
参数说明：
id{string}实例唯一标识
6.destroy全部清理
manager.destroy();
7.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="cesium开发加载影像图" />
<meta name="keywords" content="microbee-http,软件开发框架,cesium,影像图,单图" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>cesium-demo</title>
<style>
body {
position: relative;
}
.btnbar {
position: absolute;
top: 10px;
left: 10px;
}
button {
margin: 10px;
border: solid 1px #ccc;
border-radius: 3px;
padding: 5px 10px;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnbar">
<button onclick="sshow1()">聚焦layer1</button>
<button onclick="sshow2()">聚焦layer2</button>
<br>
<button onclick="hide1()">隐藏layer1</button>
<button onclick="show1()">显示layer1</button>
<button onclick="remove1()">移除layer1</button>
<br>
<button onclick="hide2()">隐藏layer2</button>
<button onclick="show2()">显示layer2</button>
<button onclick="remove2()">移除layer2</button>
<br>
<button onclick="destroy()">全部销毁</button>
</div>
<script>
const view = MchCesium.init('cesiumContainer', true);
// 测试数据
var csData = [
{
"outputurl": "http:/127.0.0.1/uploads/20250627/174512799.png",
"SEPos": {
"latitude": 31.65058099999999,
"longitude": 117.09833000000003
},
"imgurl": "http://127.0.0.1/uploads/20250627/174512799.png",
"zindex": 1,
"imagename": "合肥飞龙创业园-影像",
"NEPos": {
"latitude": 31.658873,
"longitude": 117.09833000000003
},
"NWPos": {
"latitude": 31.658873,
"longitude": 117.08391
},
"angle": 0,
"ctime": "2025-06-27T17:53:32",
"SWPos": {
"latitude": 31.65058099999999,
"longitude": 117.08391
},
"taskplan_id": 123
},
{
"outputurl": "http://127.0.0.1/uploads/taskimage/guan2.png",
"SEPos": {
"latitude": 39.45074979995016,
"longitude": 116.25280325627494
},
"imgurl": "http://127.0.0.1/uploads/taskimage/guan2.png",
"zindex": 1,
"imagename": "yxdddd",
"NEPos": {
"latitude": 39.457810445791665,
"longitude": 116.2528041157716
},
"NWPos": {
"latitude": 39.457813952086184,
"longitude": 116.24153521133087
},
"angle": 0,
"ctime": "2025-04-24T09:56:06",
"SWPos": {
"latitude": 39.45075330632062,
"longitude": 116.2415343511093
},
"taskplan_id": 1120
}
]
var layers = [];
var manager = new MchCesium.SingleImageryTileLayer(MchCesium.viewer);
for (item of csData) {
let southwest = [item.SWPos.longitude, item.SWPos.latitude]
let northeast = [item.NEPos.longitude, item.NEPos.latitude]
let imageurl = item.outputurl
var layer = manager.addLayer('layer_' + item.taskplan_id, {
imageurl: imageurl,
bounds: {
southwest: southwest,
northeast: northeast
},
needTrans: true,
})
// console.log(layer)
layers.push(layer)
}
// console.log(manager)
// 显示layer1
function show1() {
// manager.getLayer('layer_'+csData[0].taskplan_id).show = true
layers[0].show();
}
// 显示layer2
function show2() {
// manager.getLayer('layer_'+csData[1].taskplan_id).show = true
layers[1].show();
}
// 隐藏layer1
function hide1() {
// manager.getLayer('layer_'+csData[0].taskplan_id).show = false;
layers[0].hide();
}
// 隐藏layer2
function hide2() {
// manager.getLayer('layer_'+csData[1].taskplan_id).show = false
layers[1].hide();
}
// 移除layer1
function remove1() {
// manager.removeLayer('layer_'+csData[0].taskplan_id)
layers[0].remove();
}
// 移除layer2
function remove2() {
// manager.removeLayer('layer_'+csData[1].taskplan_id)
layers[1].remove();
}
// 全部销毁
function destroy() {
manager.destroy()
}
// 聚焦1
function sshow1() {
MchCesium.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(117.09112, 31.654727, 1000), // 经度、纬度、高度
orientation: {
pitch: -1.1403232479865166,
heading: 6.04247881210372,
},
});
}
// 聚焦2
function sshow2() {
MchCesium.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.2415343511093, 39.45075330632062, 1000), // 经度、纬度、高度
orientation: {
pitch: -1.1403232479865166,
heading: 6.04247881210372,
},
});
}
sshow1();
</script>
</body>
</html>
8.效果展示：
Demo地址：
https://mhc.ixiera.com/html/cesiumDemo/demo-imagesSingle.html
返回顶部
热线电话
微信
扫一扫