第四章 Cesium学习入门之加载离线影像图（tif）

从0开始的Cesium

第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境
第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏
第三章 Cesium学习入门之地形数据（DEM）的加载
第四章 Cesium学习入门之直接加载tif影像图

---

---

一、用geoserver发布tif服务

1. 建立工作区
   
2. 建立数据存储

在新建数据源中选择GeoTIFF

选择工作区，输入数据源的名称和选择tif所在的目录位置

3. 发布服务

点击发布按钮

在定义SRS中选择投影，选择边框范围
Input Transparent Color比如影像图有黑色边框范围等可以输入#000000更改背景色

4. 在Layer Preview中查看发布的服务

二、加载geoserer服务

创建WebMapServiceImageryProvider并加入到viewer对象中，重启页面即可看到影像

    const tifLayer = new Cesium.WebMapServiceImageryProvider({        
        url: 'http://localhost:8080/geoserver/cesium/wms',        // geoserver服务地址
        layers: 'cesium:output12',                                // 工作区名：图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            srs: 'EPSG:4326',
            crs: 'EPSG:4326',
            transparent: true,
        }
    });
    viewer.imageryLayers.addImageryProvider(tifLayer);