加载-影像瓦片
1.构造方法：
var manager = new MchCesium.CustomImageryTileLayer(viewer, options);
2.参数说明：
viewer：Cesium创建的view实例。
options: 配置项（非必填）,可参考：
3.addLayer创建图层实例
var layer = manager.addLayer(id,option)
参数说明：
id {string}实例唯一标识
option{object}配置项（url必填）,可参考：
4.setVisible控制显示/隐藏
方式一：layer.setVisible(visible)
方式二：manager.getLayer(id).show = visible
参数说明：
id {string}实例唯一标识；
visible{Boolean}显示状态:true显示，false隐藏
5.remove 移除
方式一：layer.remove()
方式二：manager.removeLayer(id)
参数说明：
id{string}实例唯一标识
6.setOpacity设置透明度
方式一：layer.setOpacity(alpha)
方式二：manager.getLayer(id).alpha = alpha
参数说明：
id{string}实例唯一标识
alpha{number} 透明度0-1，默认值1
7.update更新图层
方式一：layer.update(option)
方式二：manager.updateLayer(id,option)
参数说明：
id{string}实例唯一标识
option{object}配置项,可参考：
8.destroy全部清理
manager.destroy();
9.代码实例
<!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</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="hide1()">隐藏layer1</button>
<button onclick="show1()">显示layer1</button>
<button onclick="setOpacity1()">透明0.2设置layer1</button>
<button onclick="setOpacity2()">透明1设置layer1</button>
<button onclick="updata()">更新layer1</button>
<button onclick="remove()">移除layer1</button>
<br>
<button onclick="hide2()">隐藏layer2</button>
<button onclick="show2()">显示layer2</button>
<button onclick="destroy()">全部销毁</button>
</div>
<script>
const view = MchCesium.init('cesiumContainer', true);
let url1 = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
let url2 = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var moptions = {}
var manager = new MchCesium.CustomImageryTileLayer(MchCesium.viewer);
var layer1 = manager.addLayer('imgLayer1',{url: url1, tilingScheme: new Cesium.WebMercatorTilingScheme()})
// console.log(layer1)
var layer2 = manager.addLayer('imgLayer2',{url: url2, tilingScheme: new Cesium.WebMercatorTilingScheme()})
layer2.setVisible(false);
// console.log(layer2)
// 显示layer1
function show1(){
// layer1.setVisible(true)
manager.getLayer('imgLayer1').show = true
}
// 隐藏layer1
function hide1(){
// layer1.setVisible(false)
manager.getLayer('imgLayer1').show = false
}
// 透明0.2设置layer1
function setOpacity1(){
// layer1.setOpacity(0.2)
manager.getLayer('imgLayer1').alpha = 0.2
}
// 透明1设置layer1
function setOpacity2(){
// layer1.setOpacity(1)
manager.getLayer('imgLayer1').alpha = 1
}
// 更新layer1
function updata(){
// layer1.update({url: url2})
manager.updateLayer('imgLayer1',{url: url2, tilingScheme: new Cesium.WebMercatorTilingScheme()})
}
// 移除layer1
function remove(){
// layer1.remove()
manager.removeLayer('imgLayer1')
}
// 全部销毁
function destroy(){
manager.destroy();
}
// 显示layer2
function show2(){
layer2.setVisible(true)
}
// 隐藏layer2
function hide2(){
layer2.setVisible(false)
}
</script>
</body>
</html>
10.效果展示：
Demo地址：
本文档来自—MCHMAP 丨 地图引擎平台
返回顶部
热线电话
微信
扫一扫