OpenLayers笔记5：加载栅格影像数据的三种方法（GeoServer发布）

最新推荐文章于 2025-02-27 20:29:26 发布

getMoreTime

最新推荐文章于 2025-02-27 20:29:26 发布

阅读量2.8k

点赞数 5

分类专栏： OpenLayers实践文章标签： gis web javascript wms remoting

本文链接：https://blog.csdn.net/nolesstime/article/details/120228311

版权

OpenLayers实践专栏收录该内容

5 篇文章

订阅专栏

调用WMS服务

ol.source.ImageWMS

    //以Image的方式调用栅格影像
    var layer = new ol.layer.Image({    
         source: new ol.source.ImageWMS({
             url: 'http://127.0.0.1:8080/geoserver/nurc/wms',
             params: {
                 layers: 'nurc:mosaic',
                 format: 'image/png'//影像格式
             }   
         }),
     });
     map.addLayer(layer);

本方法在请求加载的时候，渲染单张影像，速度较快。但是在缩放比例或者视口变化的时候，整张影像都需重新渲染，会有较为明显的延迟。

ol.source.TileWMS

    var layer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://127.0.0.1:8080/geoserver/nurc/wms',
            params: {
                layers: 'nurc:mosaic',
                format: 'image/png',//影响格式
                tiled: true//是否划分瓦片网格
            }
        }),
    });
    map.addLayer(layer);

本方法在请求加载的时候，GIS服务器需要先对请求的影像进行网格划分，再将其返回到客户端进行渲染，速度较慢。但是在缩放比例或者视口变化的时候，只需对视口内的瓦片影像进行重新渲染，更新速度较快。

调用WMTS服务

ol.source.WMTS

    var projection = ol.proj.get('EPSG:4326');//投影坐标系信息
    var projectionExtent = projection.getExtent();//投影坐标系范围
    var size = ol.extent.getWidth(projectionExtent) / 256;//分辨率
    var resolutions = new Array(15);//分辨率数组
    var matrixIds = new Array(15);//缩放等级数组
    for (var i = 1; i < 16; i++) {
        resolutions[i] = size / Math.pow(2, i);
        matrixIds[i] = 'EPSG:4326:'+(i-1);
    }
    
    var layer = new ol.layer.Tile({
        source:new ol.source.WMTS({
            url: 'http://127.0.0.1:8080/geoserver/gwc/service/wmts',
            layer:'RemotePic:dblbnd',
            matrixSet: 'EPSG:4326', //投影坐标系设置矩阵
            format: 'image/png', //影像格式
            projection: projection, //投影坐标系
            //瓦片网格
            tileGrid: new ol.tilegrid.WMTS({
                origin: [-180.0, 90.0],//原点
                extent: projectionExtent,//范围，与视图对应，此处也可用[-180.0,-90.0,180.0,90.0]
                resolutions: resolutions,//分辨率数组
                matrixIds:matrixIds//缩放等级数组，需要与分辨率数组相匹配。
                //或者如下，需要一一对应，否则会报错
                //resolutions:['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']
                //matrixIds:[0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5]
            }),
            wrapX: true//水平包裹
        }),
    });

本方法调用地图瓦片服务向GIS服务器请求影像，GIS服务器根据请求信息将对应影像瓦片组合返回到客户端进行渲染。
本方法的优势在于可以进行瓦片缓存，可以明显提高影像加载、刷新的速度。瓦片缓存有两种方法：
1、使用GeoWebCache预先进行瓦片缓存。可以在GeoServer中使用GeoWebCache对发布的影像进行金字塔瓦片切割，并将切割结果保存在服务器端以供调用。具体步骤可参考：https://blog.csdn.net/qq_28418387/article/details/82823928.
2、调用WMTS服务加载影像瓦片时自动进行缓存。调用WMTS服务时，GeoWebCache会检索所需的瓦片，若所需的瓦片不存在，则会自动切割出所需瓦片，保存并返回。