Cesium加载GeoServer WMS、WMTS服务

最新推荐文章于 2025-05-14 17:37:43 发布

giscoder

最新推荐文章于 2025-05-14 17:37:43 发布

阅读量3.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Cesium

本文链接：https://blog.youkuaiyun.com/giscoder/article/details/102964409

Cesium 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Cesium在Web应用中加载WMS和WMTS地理服务。通过具体代码示例，展示了创建ImageryProvider、配置参数以及将图层添加到viewer的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本信息

Cesium 1.56.1
GeoServer 2.16.0
关于GeoServer如何发布WMS、WMTS服务请参考上一篇文章GeoServer数据服务发布及切片。如果您对什么是WMS、WMTS不太清楚的话，请参考WMS、WFS、WCS、WMTS服务。

WMS数据加载

          let parameters = {
             service: 'WMS',
             version: '1.1.0',
             request: 'GetMap',
             style: 'default',
             transparent: 'true',
             format: 'image/png',
             srs: this._proj
          };

          //1.新建ImageryProvider
          let wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
            url: layer.url,//服务地址，如：'http://localhost:8080/geoserver/gwc/service/wms'
            layers: layer.layers,//图层名称，如：'tasmania'
            parameters: parameters//其他所需参数
          });
         
          //2.新建imageryLayer
          let imageryLayer = new Cesium.ImageryLayer(wmsImageryProvider, {
            show: visible,//图层是否可见
            alpha: opacity//图层透明度值
          });
          //3.将imageryLayer加入到viewer中
          viewer.imageryLayers.add(imageryLayer);

WMTS数据加载

          let matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
            'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
          
          //1.新建ImageryProvider
          let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
            url: layer.url,//服务地址，如：'http://localhost:8080/geoserver/gwc/service/wmts'
            layer: layer.layers,//图层名称，如：'tasmania'
            style: '',
            format: 'image/png',
            tileMatrixSetID: 'EPSG:4326',
            tileMatrixLabels: matrixIds,
            tilingScheme: new Cesium.GeographicTilingScheme({//此处很重要，很重要。。。
              numberOfLevelZeroTilesX: 2,
              numberOfLevelZeroTilesY: 1
            })
          });

          //2.新建imageryLayer
          let imageryLayer = new Cesium.ImageryLayer(wmtsImageryProvider, {
            show: visible,//是否可见
            alpha: opacity//透明度
          });
          
         //3.将imageryLayer加入到viewer中
         viewer.imageryLayers.add(imageryLayer);

扫描下方二维码，关注微信公众号，精彩内容同步更新