加载-影像瓦片
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="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="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); var url1 = "https://127.0.0.1/map/{z}/{x}/{reverseY}.jpg"; var url2 = "https://127.0.0.1/map2/{z}/{x}/{reverseY}.jpeg"; var moptions = {} var manager = new MchCesium.CustomImageryTileLayer(MchCesium.viewer); var layer1 = manager.addLayer('imgLayer1', { url: url1 }) console.log(layer1) var layer2 = manager.addLayer('imgLayer2', { url: url2 }) console.log(layer2) function show1() { // layer1.setVisible(true) manager.getLayer('imgLayer1').show = true } function hide1() { // layer1.setVisible(false) manager.getLayer('imgLayer1').show = false } function setOpacity1() { // layer1.setOpacity(0.2) manager.getLayer('imgLayer1').alpha = 0.2 } function setOpacity2() { // layer1.setOpacity(1) manager.getLayer('imgLayer1').alpha = 1 } function updata() { // layer1.update({url: url2}) manager.updateLayer('imgLayer1', { url: url2 }) } function remove() { // layer1.remove() manager.removeLayer('imgLayer1') } function destroy() { manager.destroy(); } function show2() { layer2.setVisible(true) } function hide2() { layer2.setVisible(false) } </script> </body> </html>
10.效果展示：
Demo地址：
返回顶部
热线电话
微信
扫一扫