cesium 加载上传至 geoserver 的 tif 底图并控制显隐

老四点COM

已于 2024-03-01 08:46:00 修改

阅读量356

点赞数 6

分类专栏： cesium 文章标签：前端 vue.js javascript

于 2024-02-18 14:35:45 首次发布

本文链接：https://blog.csdn.net/m0_57715356/article/details/136151466

版权

cesium 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let array = []
const tifArr = GEO_NAME
tifArr.forEach(el => {

                // 在el 中截取 w s e n
                var nValue = el.match(/n(-?\d+\.\d+)/)[1];
                // 截取 sValue
                var sValue = el.match(/s(-?\d+\.\d+)/)[1];
                // 截取 wValue
                var wValue = el.match(/w(-?\d+\.\d+)/)[1];
                // 截取 eValue
                var eValue = el.match(/e(-?\d+\.\d+)/)[1];
                
                // viewer是 cesium 构建的Viewer

                array.push(viewer.imageryLayers.addImageryProvider(
                    new Cesium.WebMapServiceImageryProvider({        
                        url: GEO_URL, // geoserver 地址
                        rectangle: Cesium.Rectangle.fromDegrees(wValue, sValue, eValue, nValue)              // 规定范围 顺序为 w s e n             
                    }),
                ))
            });

array.forEach((layer) => {
                layer.alpha = 1.0; // 1.0显示
            });

array.forEach((layer) => {
                layer.alpha = 0.0; // 0.0隐藏
            });

那么同样图片也可以

let ImagingImageLayer= undefined
ImagingImageLayer = viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url: "/image/world/{z}/{x}/{y}.jpg", //服务地址
            })
        );

ImagingImageLayer.alpha = 1.0 // 显示
ImagingImageLayer.alpha = 0.0 // 隐藏