cesium控制及效果(一)：显示瓦片编号和网格

1、显示瓦片编号和网格方法

const addAdditionalLayerOption = async(name,imageryProviderPromise,alpha,show) => {
    try {
        const imageryProvider = await Promise.resolve(imageryProviderPromise);
        const layer = new Cesium.ImageryLayer(imageryProvider);
        layer.alpha = Cesium.defaultValue(alpha, 0.5);
        layer.show = Cesium.defaultValue(show, true);
        layer.name = name;
        viewer.imageryLayers.add(layer);
    } catch (error) {
        console.error(`There was an error while creating ${name}. ${error}`);
    }
}

2、瓦片编号显示与隐藏

//添加瓦片编号
let tileLayer = addAdditionalLayerOption("TileCoordinates",new Cesium.TileCoordinatesImageryProvider(),1.0,true);
//设置瓦片编号服务状态
tileLayer.then((res) => {
    res.show = true; //显示
    res.show = false; //隐藏
})

3、添加网格线

 //添加网格线
let gridLayer = addAdditionalLayerOption("Grid",new Cesium.GridImageryProvider({}),1.0,true);
//设置网格线服务状态
gridLayer.then((res) => {
    res.show = true; //显示
    res.show = false; //隐藏
})

4、实现效果

1）瓦片编号显示效果

2）网格线显示效果

3）叠加显示效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star